JS原型链中 _proto_和prototype及constructor的关系

总结:

1、对象有属性_proto_,指向prototype。a. 对象的_proto_指向其构造方法的原型对象。b. 原型对象的_proto_指向上一级原型对象。c. Object.prototype._proto_=null

foo——>Foo.prototype——>Object.prototype(上一级原型对象)——>null

Foo()——>Function.prototype(构造方法可看成Function的实例)——>Object.prototype(上一级原型对象)——>null


2、方法除了有_proto_,还有属性prototype,指向该方法的原型对象。

Foo()——>Foo.prototype


3、每个对象都有constructor指针,a. 指向创建该对象实例的构造函数。b. 原型对象指向对应的构造函数

Foo.prototype——>Foo()——>Function(Foo是Function的实例)

foo——>Foo()——>Function


然后祭出一张经典图

JS原型链中 _proto_和prototype及constructor的关系_第1张图片


实例:

function Girl(name) {
    this.name=name;
    this.getName=function () {    
        console.log(this.name);
    }
}
Girl.prototype.getName=function () {
    console.log("原型名字");
}
Girl.prototype.age=function () {
    console.log('原型年龄')
}

function Boy(name) {
     Girl.call(this,name);
}

var Peter=new Boy('Peter');
var Mary=new Girl('Mary');
Peter.getName();       //'Peter'————通过call继承了Girl构造函数中的性质
//Peter.age();           //not a function————无法继承Girl原型中的性质。与Girl原型毫无关系。
Mary.getName();        //"Mary"————会先查找实例中是否有该方法,因此原型中的同名方法不被执行。
Mary.constructor.prototype.getName();  //"原型名字"————执行原型同名方法的方式:Mary.constructor指向Girl。

Girl.prototype={                       //这种对象赋值的方法等同于重写原型。若放在实例化之后,会切断实例与原型的联系。
    constructor:Girl,
    age:function () {
        console.log('新原型年龄');
    }
};

Mary.age();                             //"原型年龄"————实例仍指向旧原型,与新原型无关
Mary.constructor.prototype.age();       //"新原型年龄"————构造方法的prototype指向新原型
Mary.constructor.prototype.getName();   //not a function————新原型中无getName()方法。


Girl('jj');   //直接这样执行,this指向Windows,将name挂到windows上
getName();  //"jj"————读取了Windows上的name.




你可能感兴趣的:(js)