JavaScript的原型和原型链分析

原型和原型链是JavaScript中一个比较难理解的概念，本文理论性和操作性较强，感兴趣的小伙伴们可以看看，有一定基础的小伙伴也可以参考学习。

一、原型（prototype）

1.prototype属性和[[prototype]]内部属性

    1.1. 任何一个函数，都有一个prototype属性，它指向prototype对象。prototype对象中有一个constructor属性，constructor又指向函数本身。

    1.2. 任何一个对象，都有一个内部的[[prototype]]属性，它指向这个对象的构造函数的prototype对象。[[prototype]]是ECMAScript定义的内部属性，在脚本中不可直接访问，但浏览器对每个对象都支持一个__proto__属性，脚本可以访问__proto__，等同于[[prototype]]。

 

2.构造函数

    2.1. 构造函数也是普通的函数，所以它也有prototype属性。prototype的constructor指向构造函数本身。

  2.2. 构造函数如果不使用new关键字调用，跟普通函数没有区别。如果使用new关键字调用，将按照以下步骤执行。

        1.创建一个新对象。

        2.将this指向这个新对象。

        3.执行构造函数的代码。

        4.返回这个新对象。

3.原型对象

        原型对象的用途是它可以包含所有实例共享的属性和方法。
        如上面的Food构造函数，eat方法是可以被所有实例共享的，所以，可以把它放在原型对象里来定义。

 

4.查找属性

        当代码读取对象的属性时，会按照特定的顺序来执行搜索。

 

 

        结合上图分析，查找food.name的过程，首先在实例本身查找，找到属性name，那么停止查找。查找food.eat()，也是先在实例本身查找，并没有找到，则通过内部的[[prototype]]在构造函数的prototype对象中查找，找到了，则执行food.eat().

二、原型链

1.链的形成

        在上面的图中，food的内部指针[[prototype]]指向了构造函数的原型对象，那么如果又有另一个构造函数的原型，指向了food的[[prototype]]，那么就形成了一个由原型组成的链.

 

 

2.属性查找

        当脚本访问对象的属性时，首先查找对象本身，如果没有找到，则在构造函数的原型中寻找，如果还是没有找到，则继续向上，向构造函数的原型的[[prototype]]所指向的原型对象中去寻找，以此类推。

 

3.实现方法

        在上面的栗子中，属性值都是基本数据类型，但如果属性值是引用类型，就会出现问题。例如：

 

总结

        ECMAScript把原型链作为实现继承的最主要方法。

        原型链的基本思想是：利用原型，让一个引用类型继承另一个引用类型的属性和方法。

        原型链的实现方式：每一个构造函数，都包含一个原型对象，而构造函数的实例也有一个内部指针，指向原型对象。如果让这个实例等于另一个构造函数的原型对象，那么就形成了一个链，是由原型组成的链，也就是原型链。

———————————————————

作者：xiaoya1987  来源：优快云 

欢迎留言，共同进步。或者关注微信公众号[筑梦前端]。