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


然后祭出一张经典图


实例:

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.




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值