Javascript 原型链的理解：封装、继承、多态

原型链有三个特点：封装、继承、多态；接下来是我的一些理解。

1. 对象的丰富性

在 Js 中，对象是包含信息最丰富、同时最富有语义的一种数据格式；基本类型能承载一个值；数组能承载一组无内在联系的值；而对象可以是一组属性，和相关操作函数的集合，于是它方便用于模拟现实世界。这也是面向对象思想的体现。

 // 基本类型
 let type = 'cat'
 // 数组类型
 let types = ['cat', 'dog', 'cow']
 // 对象， \可以非常直观地模拟一只能跑的猫、它的名字叫汤姆
 let Tom = {
     // 这被称为属性
     type: 'cat',
     name: 'Tom',
     // 这被称为方法
     run: () => {
         console.log('running)
     }
 }

2. 封装

可是，当我通过手动写对象的方式、创造很多只名字不同的猫时，麻烦随之而来：需要写非常多的重复代码。自然而然的，我们想到可以通过函数来解决这个问题：

    function Cat(name) {
        return {
             type: 'cat',
             name: name,
             run: () => {
                 console.log('running')
             }
        }
    }
    // 生成不同名字， 但其他属性和方法相同的猫， 非常轻松而直观
    let Tom = Cat('Tom')
    let Jamie = Cat('Jamie')

3. 继承

新的问题又来了，创建的过程轻松了，但内存上却仍有浪费的成分：不同的猫尽管 type 属性和 run 方法完全相同，但创造一个猫时，却被重复创建了，验证如下：

// 修改了 Tom 的 type 时；Jamie 却没有改变；
 Tom.type = 'baby cat'
 console.log(Jamie.type) // cat

于是，js 引入了原型的概念；通过构造函数产生差异性的属性值；通过原型保存公用的属性和方法。而不同的实例（比如 Tom）本身只需要生成差异性的部分，并不需要真的拥有共有部分；而是通过继承关系、调用原型上存有的。如此，重复的内容仅产生一次。具体操作如下

// 构造函数仅产生不同的 name 属性
function Cat(name) {
    // this 指当前产生实例
    this.name = name
}

// 实例 Tom 和 Jamie 并不真正拥有 type 属性和 run 方法； 可以通过 hasOwnProperty 方法验证；
// 公用的属性和方法， 仅存在于原型上
Cat.prototype.type = 'cat' 
Cat.prototype.run = function() {
    console.log('running')
}

let Tom = new Cat('Tom')
let Jamie = new Cat('Jamie')

// 当实例读取、调用自身不存在的属性或方法时
Tom.run() // running
// 通过隐形的属性 __proto__ 指向原型 Cat.prototype 进行调用， 验证如下
console.log( Tom.__proto__ === Cat.prototype ) // true

可以发现，构造函数 + new 方法做了如下的事情：

3-1 创建一个空对象，将 this 指向这个空对象；

3-2 执行了构造函数，让该空对象拥有非公有的属性（上例中的 name 属性）；

3-3 隐形创造了一个 __proto__属性，指向原型；使实例可以调用公用的方法和属性（）；

4. 原型链

同样的道理，当一个原型（比如 Cat）和另一个原型（比如 Dog）拥有相同的属性的方法时（比如 Dog 也有相同的 run 方法），可以让原型(比如 Pet）产生 run 方法，然后让 Cat 和 Dog 都继承 Pet 即可。

原型链的继承

function Pet(type) {
   this.type = type;
}
Pet.prototype.run = function(){
    console.log(`${this.type} ${this.name} running`);
}

function Cat(name) {
  this.name = name;
}
// 将 Cat 的原型指向 Pet 的实例 __proto__ ;  指向 Pet.prototype;
  Cat.prototype = new Pet('cat');
// 此时原型上的构造函数也改成 Pet 了
// 重新指回构造函数 Cat
  Cat.prototype.constructor = Cat;


function Dog(name) {
  this.name = name;
}
  Dog.prototype = new Pet('dog', name);
  Dog.prototype.constructor = Dog;

const Tom = new Cat('tom');
Tom.run(); // cat tom running

const John= new Dog('john');
John.run(); // dog john running

5. 多态

仍有一个问题：当部分原型或实例需要针对原型链上的公有属性、方法进行修改时，如何操作呢，是否因此不得不、把共有的部分，放到构造函数中？这里就需要用到多态，即原型链下游，可以通过复写的方式，覆盖掉继承的共有属性和方法。
原理是，当调用某一个属性和方法时，会优先查找自身，当自身不存在时，才会向原型链上游追溯，直至查到 Object 再到 null (null 往上再无原型) ；如果仍查不到，即为 undefined。

// 在上面的基础上， 仅在 Cat 原型上重写 run 方法； 再调用时；
Cat.prototype.run = function() {
  console.log(`${this.name} running on trees`)
}
// Cat 实例： 会调用自身原型链 Cat.prototype.run 方法
Tom.run(); // tom running on trees
// Dog 实例， 在Dog.prototype 上找不到 run 方法； 向原型链上游追溯； 最终调用 Pet.prototype.run 方法
John.run(); // dog john running

Javascript 原型链的理解： 封装、继承、多态