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章

javascript --- js中prototype、proto、[[Propto]]、constructor的关系相关推荐

js中prototype，constructor的理解
连看4篇前辈的文章,记录一些知识点 Javascript继承机制的设计思想 Javascript 面向对象编程(一):封装 Javascript面向对象编程(二):构造函数的继承 Javascript ...
JS中prototype、__proto__以及原型链
1.对象的三角恋关系 1.每个"构造函数"中都有一个默认的属性, 叫做prototype prototype属性保存着一个对象, 这个对象称之为"原型对象" ...
JS中Prototype属性解释及常用方法
1.prototype的定义 javascript中的每个类都有prototype属性,其prototype属性的解释是:返回对象类型原型的引用.每一个构造函数都有一个属性叫做原型.这个属性非常有用: ...
夯实JavaScript基础之prototype, __proto__, instanceof
function New(f){return function(){var o = {'__proto__': f.prototype};f.apply(o, arguments);return o; ...
js中prototype用法(转)
JavaScript能够实现的面向对象的特征有: ·公有属性(public field) ·公有方法(public Method) ·私有属性(private field) ·私有方法(private ...
JS中prototype介绍
转载原文点这里用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性, 可以为其添加函数供实例访问 ...
javascript --- js中的事件
事件实现松耦合: // JS和HTML之间的交互是通过事件实现的. // 事件,就是文档或浏览器窗口中发生一些特定的交互瞬间. // 可以使用侦听器来预定事件,以便事件发生时执行相应的代码. // 这 ...
js中prototype用法
prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,而且特殊的地方便在于:它是一个给类的对象添加方法的方法!这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的 ...
[置顶] Javascript js中页面的重新加载
用JavaScript刷新上级页面和当前页面 <script type="text/javascript"> //刷新上级页面 //window.parent.main ...

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

javascript --- js中prototype、proto、[[Propto]]、constructor的关系相关推荐

最新文章

热门文章

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

javascript --- js中prototype、__proto__、[[Propto]]、constructor的关系相关推荐

最新文章

热门文章

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

javascript --- js中prototype、proto、[[Propto]]、constructor的关系相关推荐