Javascript----原型与原型链

最近在看javascript，下面总结一下原型与原型链。

一、定义

1.原型prototype:函数中的一个属性，指向构造函数的原型对象。

2.__proto__:对象中的一个属性，指向构造函数的原型对象。

3.constructor:原型对象中的一个属性，指向该原型对象的构造函数。

 

二、prototype

 

请看下面一个例子：

function Person(){			
}
Person.prototype.name="Janny"
var person1 = new Person();
var person2 = new Person();
console.log(person1.name);
console.log(person2.name)

上面demo显示结果是

Janny
Janny

上述例子说明，prototype指向一个对象，这个对象正是构造函数Person创建的实际的原型，也是person1和person2的原型。

用一张表表示构造函数跟原型的关系：

 

二、__proto__

每个对象都会有的属性，该属性指向对象原型。

其关系图是

 

运行以下代码

function Person(){
			
}

Person.prototype.name="Janny"
var person1 = new Person();
console.log(person1.__proto__===Person.prototype)

执行以上函数，可以得到

true

其实，使用person.__proto__时，实际调用Object.getPrototypeOf(person)。

请看以下demo

function Person(){
			
}

Person.prototype.name="Janny"
var person1 = new Person();
console.log(person1.__proto__===Person.prototype)
console.log(Object.getPrototypeOf(person1) ===person1.__proto__)

执行以上函数，可以得到

true
true

说明 person1.__proto__ ，Person.prototype , Object.getprototypeOf(person1)返回结果基本一样。

 

三、Constructor

该函数指向关联的构造函数。

function Person(){
}

Person.prototype.name="Janny"
var person1 = new Person();
console.log(Person === Person.prototype.constructor)

以上执行结果是

true

其关系图是

 

读取某个实例的属性，如果在子对象找不到，会往父对象查找，一直找到最顶层为止。

function Person(){
}

Person.prototype.name="Janny"
var person1 = new Person();
console.log(person1.name);
var person2 =new Person();
person2.name="Tony";
console.log(person2.name)；
delete person2.name;
console.log(person2.name);

执行以上结果是：

Janny
Tony
Janny

开始person1.name读取构造函数属性name值为Janny，person2对象中，重写定义name的值为Tony，所以person2.name的值为Tony。但是删除Person2.name的值后，只能到原型找name属性，所以最后person2.name为Janny。

其新的关系图。

三、原型链

蓝色图为原型链