javascript --- > js中prototype、__proto__、[[Propto]]、constructor的关系

首先看下面一行代码:

function Person(name){
		this.name = name;
}
var person1 = new Person;
console.log(person1.__proto__ === Person.prototype);
console.log(person1.constructor === Person);

控制台打印如下:
在这里插入图片描述

可以看见,当使用构造函数(Person)构造一个实例(person1)时,
在后台其实生成了2种关系,

第一种是:person1的 __proto__ 属性指向构造函数的原型(Person.prototype)
第二种是:实例(person1)的constructor属性指向该函数(Person).

其原理如下:
---> 第一种关系: person1.__proto__ === Person.prototype
一个构造函数通过new生成一个实例person1时,实际上有一个内部属性 [[Prototype ]],它指向对象的原型(即:Person.prototype).
[[Prototype]](内部)属性的读取(2种):
1.可以通过Object.getPrototypeOf()方法读取,这种方法比较长...
2.第二种方法是基于,JavaScript引擎在所有对象上都支持一个名为_proto_的属性.通过它,可以直接读写[[Prototype]]属性.(写法比较方便)

---> 第二种关系: person1.constructor === Person
1.当一个函数(这里指构造函数Person)被创建时,它的prototype属性也被创建,且该原型对象的constructor属性(Person.prototype.constructor)指向该函数
Person,即Person.prototype.constructor === Person,
2.当在实例person1种寻找constructor属性时,未找到,于是根据[[Prototype]]的指针(即:__proto__)属性,寻找其原型对象(Person.prototype)中的constructor属性,进而找到Person,最终有person1.construcoter === Person

// 注意:虽然person1.constructer === Person , Person.prototype.constructor === Person, 但person1 !== Person.prototype,
// 因为person1中是通过[[Prototype]] "指针"指向Person.prototype的!!!

在知道了上面2种关系后,下面在看一个例子:

function P(name) {
    this.name = name;
}
P.prototype = {
    sayName: function () {
        console.log(this.name);
    }
};

var p1 = new P();
console.log(p1 instanceof Person);
console.log(p1.constructor === Person);
console.log(p1.constructor === Object);

在这里插入图片描述

---> 对于第一行的true
1.a instanceof A是指,a是A的实例 
2.因为var p1 = New P() , 明显是对的

---> 对于第二行的false, 第3三行true
1.使用P.prototype进行字面量赋值时,实际上是对P的原型进行了重写,而上面例子未对(P.prototype)重写后的construcoter属性
进行说明
2.JavaScript默认其为一个泛用对象Object,因此其constructor属性指向了Object.

倘若我们在对P.prototype进行字面量赋值的同时,加上constructor属性,使其指向P,见下例:

function P(name){
    this.name = name;
}
P.prototype = {
    constructor: P,
    sayName:  function() {
        console.log(this.name);
    }
}
var p1 =new  P("marron");

console.log(p1 instanceof P) ;
console.log(p1.constructor === P);

在这里插入图片描述
可以看见,p1.constructor指向了函数P.即可以通过实例的constructor函数找到函数P…

参考《JavaScript面向对象精要》第4章

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值