js中原型和原型链

1.原型：在JavaScript 中，对象被表现为prototype 。

　　原型其实一直存在于我们接触过的任何一个对象。

Tip：在函数对象中也存在__proto__属性，但是查看函数对象的原型还是要使用prototype 。

JavaScript 在创建对象的时候，无论是普通对象还是函数对象，都存在一个属性__proto__，

JavaScript 的原型链和继承主要依赖于__proto__

我们可以通过__proto__ 和 prototype的结合查看原型的每一个层级，也就是原型链。

Tip：在js中，原型和原型链是实现继承的一种模型。

X.a();

当我们调用一个对象的属性或者方法的时候，系统会查询这个对象，如果这个对象中不存在这个方法，就会向上一层查询，如果上一层还是没有这个属性或者方法，就继续沿着原型链去找，一直找到原型的最顶端，object 的上一层 null才会停止。

3.简单的继承

        var a = {

            x : 1,

            y : 2

        }

        var b = {

            z : 3,

            w : 4

        }

        b.__proto__ = a;//b的原型是a，b继承a

        console.log(b);

        console.log(b.x);

4.create创建对象的一种方式

var a = Object.create({x:1});

        console.log(a.__proto__);//{x:1}

        var b = Object.create(null);

        console.log(b);//Object No Properties

        var e = "hello";

        console.log(e.__proto__);//String {length: 0, [[PrimitiveValue]]: ""}

        var dd = Object.create(Object.prototype);

        console.log(dd);

        console.log(dd.__proto__);

5.constructor 属性返回对创建此对象的数组函数的引用。

var a  = 10;

        console.log(a.constructor);//function Number

        var b = "hello";

        console.log(b.constructor);//function String

6.继承

/*

        需求：让我们新创建对象a 能够同时拥有 Show对象和 SHow对象原型的方法和属性。

        TIp：需要明白：js的原型是可以更改的。

        实现思路： 我们要通过更改原型的方式来实现继承。

        Why？ 因为js中的机制是：对象会从原型无条件的继承属性和方法。

        我们才去将a对象的原型重新赋值为实例化后的show对象。

         */

        function Show(){

            this.getName = function (name){

                alert(name);//爸爸

            }

        }

        Show.prototype.getAge = function (age){

            alert(age);//爷爷

        }

        // console.log(Show);

        // console.log(Show.prototype);

        var a = {};//干儿子  object  function Obejct

        a.__proto__ = new Show();//如果采用这种方式去实现继承的话，会发现，

        //a原型的构造函数和本身的构造函数被破坏了，那么这种情况是不利用开发的

        //容易出现不可预知的错误，所以，我们在下一步，要将a原型的构造函数改为a本身也就是obejct。

        // console.log(a.constructor);

        a.__proto__.constructor = a;

        // a.getName('dav');

        // a.getAge(10);

        console.log(a);

        console.log(a.__proto__);

        console.log(a.__proto__.constructor);

        // a.__proto__ = Show.prototype;

        // a.getAge(2);

        // a.getName('dav');

7.继承

/*

        m 对象  n对象  k对象

        需要k对象拥有m对象和 n对象的属性和方法

         */

        function m ()

        {

            this.showM = function (){

                alert('this is M')

            }

        }

        function n()

        {

            this.showN = function (){

                alert('this is N');

            }

        }

        function k()

        {

        }

        n.prototype = new m();

        n.prototype.constructor = n;

        k.prototype = new n();

        k.prototype.constructor = k;

        var boo = new k();

        boo.showM();

        boo.showN();

8.跳过继承过来的属性或方法

var a = {

            x:1,

            y:2

        }

        var b ={

            a :3,

            c:4

        }

        b.__proto__ = a;

        console.log(b);

        for(var i in b)

        {

            if(!b.hasOwnProperty(i)){//能够将继承过来的属性或者方法跳过，不去遍历出来

                continue;

            }

            else

            {

                document.write(b[i] + '<br/>')

            }

        }

巴特西

js中原型和原型链

最新文章

热门文章