JavaScript 原型链

平常老听别人说什么原型链，我总是半知半解的，终于有时间好好梳理一下！给大家介绍我老婆。

图解

我们先来看一下这张图，不理解没关系，我来慢慢解释，先有个印象！当然结衣父母也可以生男孩（我觉得还是生女孩好 ohhhhhh）
在这里插入图片描述

关卡 1：通过构造函数 => new 一个对象

听说您还没有对象？没关系，我来给你new一个！

// 1. 首先通过构造函数，初始化一个女孩儿
function Girl(name, age, bustSize) {
  this.name = name;
  this.age = age;
  this.bustSize = bustSize;
  this.show = function () {
    console.log(`初次见面，我叫${this.name},请多指教！`);
  };
}

// 2. 实例化一个女朋友
var girlfriend1 = new Girl("唐泽雪穗", 22, "D");

// 3. 女朋友的自我介绍
girlfriend1.show(); //初次见面，我叫唐泽雪穗,请多指教！

以上实例，我们可以知道，通过构造函数能够new一个老婆对象出来。

关卡 2：实例化对象 => 原型对象

我们再来看看 girlfriend1里都有些什么吧！

1	console.log(girlfriend1);

在这里插入图片描述

我们发现，除了我们定义的年龄，胸围，名字和show方法之外，又多了一个__proto__，这个我们没写呀！！对，这个__proto__就是浏览器帮我们写的。
其实，每一个对象都会有__proto__，他是实例化对象的原型对象。
你可以理解为：我的对象，石原里美，她不是石头缝里蹦出来的石猴，而是我的可爱的老丈人生的，原型对象相当于爹。

我再给大家介绍另一个我的老婆。

function Girl(name, age, bustSize) {
  this.name = name;
  this.age = age;
  this.bustSize = bustSize;
}
// 1. 这次我在Girl的原型上添加show方法
Girl.prototype.show = function () {
  console.log(`初次见面，我叫${this.name},请多指教！`);
};

// 2. 实例化新老婆
var girlfriend2 = new Girl("新垣结衣", 30, "");

// 3. 老婆的自我介绍
girlfriend2.show();

// 4. 打印老婆
console.log(girlfriend2);

在这里插入图片描述

我们发现，Girl类中并没有show方法，而我在原型（爹）上添加了show方法，于是新垣结衣就问她的爹有没有show方法，哎有！那就用！

关卡 3.1：原型对象 => 构造函数

我们可以通过原型对象（结衣的爸爸），通过constructor知道他们的小孩（构造函数）长什么样（毕竟有一半的染色体呢）

关卡 3.2：构造函数 => 原型对象

我们也可以通过小孩的特点（构造函数），通过 DNA 鉴定（prototype）来找到谁是我的亲生父亲（原型）。

最终关卡：无线循环

不知道您有没有发现，一个神奇的循环

在这里插入图片描述

是不是有点理解了，又有点不理解了，~~发出猪叫~~ ，回过头看看我的第一张图~

隐藏关卡

原型链的机制

举个栗子：为什么数组的方法那么多呢？我们不妨打印一下：

1 2	var arr = ["苍井玛丽亚", "小原好美", "雪之下雪乃"]; console.log(arr);

在这里插入图片描述

我们可以看到，数组的原型上有好多好多的方法，数组没有这种方法的话，就会找原型！
我在数组的原型上添加个新的方法

var arr = ["苍井玛丽亚", "小原好美", "雪之下雪乃"];
Array.prototype.show = function () {
  console.log(1);
};
arr.show(); // 1
console.log(arr);

在这里插入图片描述

那我在Object上添加这个方法，数组还能使用吗？？？
总结一下：对象本身没有这个方法的话，就去像他爹要，如果爹也没有的话，就去找爷爷。
新垣结衣本身没有show方法，就去找他的爹要show方法，爹要是没有，就去找爷爷。
其实通过实践，你也可以知道最大的爹是谁：Object，也就是说，如果Object也没有这个方法了，那么就 GG 了。输出Uncaught TypeError: arr.show is not a function。也就是找不到，抛出错误。

各种等式

我们还是以这个为基础

function Girl(name, age, bustSize) {
  this.name = name;
  this.age = age;
  this.bustSize = bustSize;
}
Girl.prototype.show = function () {
  console.log(`初次见面，我叫${this.name},请多指教！`);
};
var girlfriend2 = new Girl("新垣结衣", 30, "");

这里仅仅是举几个例子抛砖引玉

// 新垣结衣的爸爸 == 新垣结衣兄弟的爸爸
console.log(girlfriend2.__proto__ == Girl.prototype); // true

// 新垣结衣的爸爸的孩子 == 新垣结衣的兄弟s
console.log(girlfriend2.__proto__.constructor == Girl); // true