JavaScript面试题总结系列（四）

4.JavaScript原型和原型链

4.1 概念介绍

• 原型和原型对象
  原型也是对象，叫原型对象。因此，原型和原型对象是一回事，只不过有人说的简洁，有人说的是全称。
   
• 原型链
  原型(原型对象)、构造函数和(对象)实例构成了原型链。原型链的核心就是依赖对象的__proto__指向，当检索依赖对象自己不存在的属性时，就会一层一层地向上去查找建立对象的构造函数，一直找到Object，就没有__proto__的指向了。
   

• 构造函数
  首字母大写的函数。例如：

  function Person() {
  
  }

   

• 对象实例
  对象有两种：

  • 函数对象：经过 new Function(); 建立的对象；
  • 普通对象：除了函数对象以外的全部对象；

4.2 概念之间的关系

• 每个函数都有一个prototype属性；
• 每个JavaScript对象(null除外)都具备一个属性，叫作__proto__，这个属性指向该对象的原型(prototype)；
• 每个原型都有一个 constructor 属性指向关联的构造函数，

4.3 示例

1. 使用构造函数建立对象：
    

   function Person() {
   
   }
   
   var person = new Person();
   person.name = "Kevin";
   
   console.log(person.name); // "Kevin"

   Person就是一个构造函数，咱们使用 new 建立了一个实例对象 person。
    

2. prototype
   每一个函数都有一个prototype属性
    
   每个JavaScript对象(null除外)在建立的时候就会与之关联另外一个对象，这个对象就是咱们说的原型，每个对象都会从原型“继承”属性。
    

   function Person() {
   
   }
   
   //注意：prototype是函数才会有的属性
   // 而__proto__是对象才会有的属性
   Person.prototype.name = "Kevin";
   var person1 = new Person();
   var person2 = new Person();
   
   console.log(person1.name); // "Kevin"
   console.log(person2.name); // "Kevin"

3. proto
    

   function Person() {
   
   }
   var person = new Person();
   console.log( person.__proto__ === Person.prototype ); // true

4. constructor
    

   function Person() {
   
   } 
   console.log( Person === Person.prototype.constructor ); // true

4.4 总结

理解原型和原型链的前提是，弄清楚这里面一共有多少个概念，以及概念和概念之间的关系。

这里面涉及到的概念有：原型、原型对象、构造函数、对象(实例)、prototype、proto、constructor。

他们之间的关系是怎样的呢?

• 首先，当咱们建立一个大写字母开头的函数的时候，这个函数就是构造函数；
• 当咱们new 一个这个构造函数的实例对象的时候，这个实例就是咱们说的对象(实例)，它具备 proto 属性；
• 原型和原型对象是一回事，他们是基于构造函数new出来的对象，也就是函数对象而存在的，它具备prototype属性；
• 原型和原型对象也有一个contructor属性（或者叫作指针），它指向关联的构造函数。
• 每个对象都有一个 proto 属性指向原型对象，这个原型对象还能够有它本身的原型，以此类推，造成了一个原型链。当查找特定属性的时候，先去这个对象里面查找，若是没有找到，那么就去它的原型对象里面找，若是仍是没有，再去原型对象的原型对象里面去查找。这个操做被委托在整个原型链上，也就是咱们所说的原型链了。

---

参考连接：
https://www.jianshu.com/p/be7c95714586
https://blog.csdn.net/xiaotao_css/article/details/72782416
https://blog.csdn.net/shuixiou1/article/details/81048816
http://www.javashuo.com/article/p-ewefmcnc-bv.html
http://www.javashuo.com/article/p-btstweuf-bs.html
https://www.jianshu.com/p/08c07a953fa0
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
https://blog.csdn.net/lyt_angularjs/article/details/100729591
http://www.javashuo.com/article/p-xihyuaei-ek.html
http://www.javashuo.com/article/p-btstweuf-bs.html
https://zhuanlan.zhihu.com/p/23090041?refer=study-fe
https://www.jianshu.com/p/dee9f8b14771
http://www.javashuo.com/article/p-cenbrctd-bu.html
http://www.javashuo.com/article/p-gcxbntmz-u.html
https://zhuanlan.zhihu.com/p/22787302