JavaScript面试题总结系列

Posted 2020-11-16 zxxsteven

4.javascript原型和原型链

4.1 概念介绍

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

• 构造函数
  首字母大写的函数。例如：
  ```javascript
  function Person() {

  }
  ```
• 对象实例
  对象有两种：
  • 函数对象：通过 new Function(); 创建的对象；
  • 普通对象：除了函数对象之外的所有对象；

4.2 概念之间的关系

• 每一个函数都有一个prototype属性；
• 每一个JavaScript对象(null除外)都具有一个属性，叫做__proto__，这个属性指向该对象的原型(prototype)；

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

  4.3 示例

1. 使用构造函数创建对象：
   ```javascript
   function Person() {

   }

   var person = new Person();
   person.name = "Kevin";

   console.log(person.name); // "Kevin"
   ``Person就是一个构造函数，我们使用new` 创建了一个实例对象 person。
   ?

2. prototype
   每个函数都有一个prototype属性
   ?
   每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们说的原型，每一个对象都会从原型“继承”属性。
   ?
   ```javascript
   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
   ?
   ```javascript
   function Person() {

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

4. constructor
   ?
   ```javascript
   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
https://www.cnblogs.com/zhengyeye/p/8986836.html
https://blog.csdn.net/m0_37585915/article/details/80843945
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
https://www.cnblogs.com/jianghao233/p/8983176.html
https://blog.csdn.net/m0_37585915/article/details/80843945
https://zhuanlan.zhihu.com/p/23090041?refer=study-fe
https://www.jianshu.com/p/dee9f8b14771
https://www.cnblogs.com/libin-1/p/5820550.html
https://blog.csdn.net/yucihent/article/details/79424506
https://zhuanlan.zhihu.com/p/22787302