理解原型对象与原型链

背景：

Javascript语言的继承机制，没有子类和父类的概念，也没有类（class）和实例（instance）的区分。

为了实现继承（将所有对象联系起来），js的创始人最终还是采用了 new命令（只不过在Javascript语言中，new命令后面跟的不是类，而是构造函数。）

new运算符的缺点：

每一个实例对象，都有自己的属性和方法的副本。这样无法做到数据共享，也造成了极大的资源浪费。

prototype属性的引入：

通俗一点的理解：将所有实例对象需要共享的属性方法放在prototype指向的对象中；不需要共享的属性和方法就放在构造函数中

原型对象：

看了上面的内容之后。通俗一点的说 prototype 属性指向的对象就是原型对象（里面存放着的是所有实例对象所共享的属性和方法）

实例一旦创建出来就会自动引用prototype对象的属性和方法！所以实例对象的属性和方法一般分为两种：一种是自身的，一种是引用自prototype的。看下图代码

当代码读取某个对象的某个属性的时候，都会执行一次搜索。首先从对象实例本身开始，如果在实例中找到了该属性，则返回该属性的值，如果没有找到，则顺着prototype属性的指向，到原型对象中去找，如果如果找到就返回该属性值。（如果实例本身与原型对象的属性同名，实例本身优先级高）

原型链：

在说原型链之前，还需要了解__proto__属性

1.构造函数生成实例对象

2.实例对象有__proto__属性。函数有prototype属性

3.实例对象.__proto__ === 函数.prototype

接下来假设如下条件

constructor1.prototype = instance2 （构造函数1的原型对象是实例2）

鉴于上述规则生效,如果试图引用constructor1构造的实例instance1的某个属性p1:

1).首先会在instance1内部属性中找一遍;

2).接着会在instance1.__proto__(也就是constructor1.prototype)中找一遍,而constructor1.prototype 实际上是instance2, 也就是说在instance2中寻找该属性p1;

3).如果instance2中还是没有,此时程序不会灰心,它会继续在instance2.__proto__(也就是constructor2.prototype)中寻找...直至Object的原型对象

搜索轨迹: instance1--> instance2 --> constructor2.prototype…-->Object.prototype

这种搜索的轨迹,形似一条长链, 又因prototype在这个游戏规则中充当链接的作用,于是我们把这种实例与原型的链条称作原型链.（如果还不理解，看如下代码）

1.instabce这个实例自身中没有getFatherValue()方法

2.去找instabce的原型对象（也就是 new Father()这个实例对象中找）

3.new Father()这个实例对象中也没有，去他的原型对象上找

4.找到了！

new的过程:

var ClassA= function(){};

var p = new ClassA();

1. 创建空对象；

var p = {};

2. 设置新对象的constructor属性为构造函数的名称，设置新对象的__proto__属性指向构造函数的prototype对象；

p .__proto__ = ClassA.prototype;

3. 使用新对象调用函数，函数中的this被指向新实例对象：

ClassA.call(p );　　//{}.构造函数();

4. 将初始化完毕的新对象地址，保存到等号左边的变量中

原型对象的结构：

函数的原型对象constructor默认指向函数本身。

原型对象除了有原型属性外，为了实现继承，还有一个原型链指针__proto__，该指针指向上一层的原型对象，而上一层的原型对象的结构依然类似，这样利用__proto__一直指向Object的原型对象上

Object的原型对象用Object.prototype.__proto__ = null表示原型链的最顶端，如此变形成了javascript的原型链继承，同时也解释了为什么所有的javascript对象都具有Object的基本方法。

扩展函数：

hasOwnProperty：

JavaScript 中唯一一个查找属性但是不查找原型链的函数

console.log(instance1.hasOwnProperty('age'));//true

instanceof ：

该对象是否是构造函数的一个实例

最后编辑于：2019.08.08 17:28:28