JS原型与原型链

冲所周知，JS的复杂类型都是对象类型（Object），而JS不是一门完全面向对象编程的语言，所以如何涉及继承机制，就是一个问题。

一、构造函数

因为JS中没有类（Class）这个概念，所以JS的设计者使用了构造函数来实现继承机制。

ES6中的Class可以看作只是一个语法糖，它的绝大部分的功能，ES5都可以做到，新的Class写法只是让原型的写法更加的清晰、更像面向对象编程的语法而已。

// 构造函数
function Person(name,age){
     this.name = name;
     this.age = age;
}

// 创建实例
let p1 = new Person('张三',18);

通过上述代码所示，JS通过构造函数来生成实例。但是又出现了一个新的问题，在构造函数中通过this赋值的属性或者方法，是每个实例的实例属性以及实例方法，无法共享公共属性。所以又设计出了一个原型对象，来存储这个构造函数的公共属性以及方法。

二、原型对象

JS的每个函数在创建的时候，都会生成一个属性prototype，这个属性指向一个对象，这个对象就是此函数的原型对象。该原型对象中有个属性为constructor，指向该函数。这样原型对象和它的函数之间就产生了联系。

// 构造函数
function Preson(name, age) {
   this.name = name;
   this.age = age;
}
// Person的构造函数的原型方法say
Preson.prototype.say = function (word) {
   console.log(`${this.name}说：${word}`);
}

let p1 = new Preson('张三', 18); // 创建一个Person实例对象
// false 因为 'say' 方法是在 Person 的原型上定义的，而不是在 p1 本身上直接定义的    
console.log(p1.hasOwnProperty('say'));
p1.say('hello world'); // 调用公共方法 打印：张三说：hello world

三、原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会通过它的__proto__隐式属性，找到它的构造函数的原型对象，如果还没有找到就会再在其构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

1、__proto__

每个通过构造函数创建出来的实例对象，其本身有个属性__proto__，这个属性会指向该实例对象的构造函数的原型对象。

__proto__并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型，然后再来为原型添加方法/属性。

需要注意的是：如果通过p1实例对象的__proto__属性赋值，则会改变其构造函数的原型对象，从而被所有实例所共享。

    // 构造函数
    function Preson(name, age) {
      this.name = name;
      this.age = age;
    }
    // Person的构造函数的原型方法say
    Preson.prototype.say = function (word) {
      console.log(`${this.name}说：${word}`);
    }

    const p1 = new Preson('张三', 18); // 创建一个Person实例对象
    const p2 = new Preson('李四', 20); // 新创建一个Proson实例对象
    p1.say('hello world'); // 调用公共方法
    console.log(p1.hasOwnProperty('say')); // false
    p1.__proto__.do = function () {
      console.log('往原型对象中添加方法');
    }
    p2.do(); // 打印出往原型对象中添加方法

 

所以，在开发是时候，要注意不要通过实例对象去改变其构造函数的原型对象，这样会对其他通过该构造函数生成的实例对象造成影响。

 2、原型链的尽头

创建了一个A的构造函数，打印出它的prototype属性，我盟可以再浏览器中看到，它有个__proto__属性指向了一个Object对象。

 该对象的构造函数为function Object，由此可以得到，所有的原型对象的__proto__属性都是指向function Object的原型对象。而function Object的原型对象在上图中我们可以得知是不存在__proto__这个属性的，它指向了null，我们就得知了原型链的尽头是null。