javascript的原型与原型链

首先套用一句经典名言，JavaScript中万物皆对象。

但是对象又分为函数对象和普通对象。

function f1(){};

var f2=function(){};

var f3=new Function('name','console.log(name)');

所有 Function 的实例(上面三种方式）都是函数对象，其他的均为普通对象，其中包括 Function 实例的实例也为普通对象。

原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。

说到原型，必不可少的就是三个名词__proto__，prototype，constructor。

1.prototype

在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。见代码：

function Monkey(name){

    this.name=name;

}

Monkey.prototype.age=500;

var monkey1=new Monkey('熏悟空');

var monkey2=new Monkey('逼马吻');

console.log(monkey1.age);  //500

console.log(monkey2.age);  //500

上述例子中，函数Monkey的prototype指向了一个对象，而这个对象正是调用构造函数时创建的实例的原型对象，也就是person1和person2的原型对象。

2.__proto__

这是每个对象(除null外)都会有的属性，这个属性会指向该对象的原型对象。

function Pig(name){

    this.name=name

}

var pig1=new Pig('猪扒盖');

console.log(pig1.__proto__===Pig.prototype); //true

以上代码中函数对象Pig的prototype指向它的原型对象。Pig的实例对象pig1的__proto__指向Pig的原型对象，所以pig1.__proto__===Pig.prototype为true。

3.constructor

每个原型对象都有一个constructor属性，指向该关联的构造函数。

function Pig(){}

console.log(Pig===Pig.prototype.constructor); //true

4.实例与原型的关系。

当我们获取实例对象的属性时首先会访问自身的属性，如果没有查找到，就往该实例对象对应的原型对象中查找，如果还是查找不到就继续往原型对象的原型对象上面查找，一直找到最顶层null为止。

function Monkey(){}

Monkey.prototype.name='熏悟空';

var monkey1=new Monkey();


monkey1.name='逼马吻'；

console.log(monkey1.name); //逼马吻


detele monkey1.name;

console.log(monkey1.name); //熏悟空

上面代码中实例对象monkey1获取name属性时因为给其本身赋了值，所以获取到了‘逼马吻’，当我删除了monkey1的name属性时，monkey1本身就没有了name值，因此便往monkey1的原型对象上面寻找，找到了‘熏悟空’。如果没有找到的话就会继续往上找，一直找到null为止。

5.原型的原型

由上我们可以知道，原型其实也是个对象，既然是对象那么便可以通过new Object的方式创建，实际上实例对象也是通过Object构造函数的方式创建，由于实例对象的原型指向构造函数的实例对象，因此我们可以得出原型的最终原型对象就是Object的原型对象，而Object的原型是null。

最后，总结一下关系：

每个构造函数都有一个原型对象（prototype），原型对象都包含一个指向构造函数的指针（constructor），而实例都包含一个指向原型对象的内部指针(__ptoto__)；而原型链就是通过各个原型对象不断往里查找的过程中所形成的整体链接。

文章原文：https://www.cnblogs.com/loveyaxin/p/11151586.html

巴特西

javascript的原型与原型链

最新文章

热门文章