前端 JS 经典：原型和原型链

1. 前言

这个前言很重要，要理解原型、原型链，就需要理解前言里面的一些定义。开始！

所有对象都是通过 new 一个函数去创建的，而这个函数通常首字母大写，被称为构造函数。我们也可以通过自定义构造函数，去 new 一个对象。平时，我们通过语法糖直接赋值对象，但他本质是通过 new Object 来创建对象的。数组同理。函数也同理，但是不推荐通过 new Function 去创建函数。

所有的函数也是对象，包括构造函数，本质是通过 new Function 创建，那 Function 又是怎么来的呢，是直接放到内存里面的，就是 JS 引擎启动的时候，直接将 Function 放入内存中。不通过任何东西来创建。

所有对象都是引用类型，什么是引用类型呢，就是保存的是地址，赋值的也是地址，它们是引用传递。

// 创建对象
let obj = { name: "yqcoder" };
// 本质如下
let obj = new Object({
  name: "yqcoder",
});

// 创建数组
let arr = [1, 2, 3];
// 本质如下
let arr = new Array(1, 2, 3);

// 创建函数
let fn = function (str) {
  return str;
};
// 本质如下，不建议这样去创建
let fn = new Function("str", "return str");

// 自定义构造函数创建对象
let Person = function (name, age) {
  this.name = name;
  this.age = age;
};
let yq = new Person("yqcoder", 18);
console.log(yq); // {name: 'yqcoder', age: 18}

2. 原型 prototype

所有函数都有一个属性 prototype，称之为函数原型。默认情况下，prototype 是一个对象，所以 prototype 是通过 new Object 创建的。而这个 prototype 对象里面默认有一个 constructor 属性，它也是一个对象，它指向构造函数本身。

let fn = function () {};
fn.prototype.constructor == fn; // true

3. 隐式原型 __proto__

所有对象都有一个属性 __proto__，称之为隐式原型。默认情况下，隐式原型指向创建该对象的构造函数的原型。

let Person = function (name, age) {
  this.name = name;
  this.age = age;
};
let yq = new Person("yqcoder", 18);

yq.__proto__ === Person.prototype; // true

通过同一个构造函数产生的对象，它们有一块内存空间是公用的，哪一块空间共用呢，就是它们的隐式原型指向的内存空间是共用的。换句话说，就是它们的构造函数的原型是共用的。构造函数里共用的方法，一般写在 prototype 里，这样构建的对象，生成的方法是指向同一个地址的，节约了内存空间。同时还可以使用 this，谁调用这个方法，这个 this 就指向谁。效果如下：

// 构造函数 Person
let Person = function (name, age) {
  this.name = name;
  this.age = age;
};
Person.prototype.sayHello = function () {
  console.log(`${this.name} say hello`);
};

let user1 = new Person("yy", 18);
let user2 = new Person("qq", 18);
user1.__proto__.sayHello == user2.__proto__.sayHello; // true

user1.sayHello(); // yy say hello
user2.sayHello(); // qq say hello

4. 原型链

什么叫原型链，就是每一个对象都有隐式原型 __proto__，隐式原型的指向就形成了一个链条，可以称之为原型链。而 Function 的__proto__指向自身的原型。前言说过 Function 的特殊。Object 的 prototype 的__proto__指向 null。

当访问一个对象的成员时，访问步骤：先访问对象自身是否拥有该成员，如果有，直接使用，如果没有，再看该对象的隐式原型上有没有该成员，如果有直接使用。如果也没有，在原型链中依次查找。如上例子，为什么 user1 可以访问 sayHello，因为在隐式原型中有 sayHello。所以可以访问。

如下例子：先在自身找 sex，没有，然后在 yq.__proto__ 里找，因为 yq.__proto__ == Person.prototype，所以也没有，再在 Person.prototype.__proto__ 里找，因为 Person.prototype.__proto__ == Object.prototype，还是没有，最后在 Object.prototype.__proto__ 里找，因为 Object.prototype.__proto__ == null，所以 yq.sex == undefined;

let Person = function (name, age) {
  this.name = name;
  this.age = age;
};
let yq = new Person("yq", 18);
yq.sex; // undefined

5. 猴子补丁

什么叫猴子补丁，就是在函数原型中加入成员，以增强其对象的功能，但是猴子补丁会导致原型污染，所以使用需谨慎。