JS中的继承 —— 简单理解

回想起刚入门JS的时候，初次接触JS原型继承，令我头大，心想啊，为什么要把继承搞得这么复杂。随着时间推移，学习源码，渐渐的对JS继承有了理解。 以下内容，如有错误，请指正。（因为全是自己的理解）

---

1. 为什么JS继承是基于原型继承？

要解答这个问题，首先我们要了解JS的历史。随便学什么语言知识，我个人觉得都要去了解它的历史，通过历史总结经验。我简单说一些，想详细了解可自行google。
JS的出现，是为了解决浏览器无法交互的缺陷。它的初衷就是就是满足用户交互，所以把这个语言设计成了脚本语言（想想为什么ES6以前都是用var来声明变量）。JavaScript跟Java完全是两门语言（虽然实现JS时抄了一些Java的思想），JS根本就不是一门面向对象的语言，所以在JS中没有类的概念（ES6中实现了类，也只是原型继承的语法糖）。所以JS的作者Brendan Eich使用了原型继承，来弥补类的缺陷，并且让JS看起来好像是一门面向对象编程的语言。

2. 什么是继承

继承是面向对象语言的特性之一，子类能获得基类中的一些方法 （儿子继承爸爸的基因）。JS中，基类能被继承的方法都在基类（构造函数）的prototype原型中。

3. JS如何实现原型继承的？

首先你得知道JS的构造函数，比如常用的 Array(), Date(), Number()， 它们都是构造函数，其实就是普通的一个函数，大家为了区分构造函数和普通函数， 使用了命名的方式 —— 构造函数使用大写字母开头命名， 普通函数用小写字母开头。构造函数在JS中就相当于 类， 但切记，JS中没有类这个概念。我们先写一个构造函数，看看它的结构是怎样的

  function Parent(name) {
    this.name = name
    this.say = function () {  // 相当于private方法
      console.log('这是构造函数的方法')
    }

  }
  Parent.prototype.move = function () {  // 相当于public方法
    console.log('这是构造函数的原型上的方法')
  }
  var parent = new Parent('lion')
  console.dir(parent)

打印Parent的实例看看

parent实例

可以看到，move方法在实例的__proto__中，我们要实现继承， 那就要把这个__proto__中的方法赋给子类，但是不能直接使用__proto__变量，因为它是浏览器实现的方便程序员查看继承的一个变量，官方建议不要直接使用这个变量，更不要去更改它的值，会造成原型链上问题。那我们可以这样来实现： 👇

  function Son() {}
  var temp = Object.create(Parent.prototype)
  temp.constructor = Son
  Son.prototype = temp
  var son = new Son()

  console.dir(son)

打印子类实例看看

son实例

这样便实现了继承。

4. 思路

• 1.已知需要继承的方法在构造函数的prototype属性中，我们就把这些方法取出来，通过Object.create(parentProto) -》用基类的原型创建一个实例，这个实例对象上有个__proto__属性，里面是基类的prototype中的方法
• 2. 需要继承的方法取出来之后，要放入子类的prototype属性中，并且函数的prototype.constructor指向函数本身，所以还需要在基类原型构造出的实例上添加子类的构造函数，即上面代码的temp.constructor = Son

这两步就实现了继承。看到这里可能还有点懵，我非常能理解，但是当你明白__proto__和prototype的作用之后，你回头看看这个思路以及上面的代码， 就恍然大悟了。

5. 解释prototype ，__proto__

prototype对象属性是JS为了模仿面向对象编程而实现的。每个函数都有prototype属性。默认的prototype对象是这样子的

prototype对象包含了两个属性：constructor 和 __proto__。 其中constructor指向函数本身，可以看到constructor中还有prototype属性，这个prototype 中的constructor又指向函数本身， 所以有的同学纳闷儿为什么这个属性点不完，原因就在这里，循环引用。
还有个__proto__对象，它就是原型的基类，每个对象都有__proto__属性，MDN上是这样子解释的：

Object.prototype 的 __proto__ 属性是一个访问器属性（一个getter函数和一个setter函数）, 暴露了通过它访问的对象的内部[[Prototype]] (一个对象或 null)。
使用__proto__是有争议的，也不鼓励使用它。因为它从来没有被包括在EcmaScript语言规范中，但是现代浏览器都实现了它。__proto__属性已在ECMAScript 6语言规范中标准化，用于确保Web浏览器的兼容性，因此它未来将被支持。它已被不推荐使用, 现在更推荐使用Object.getPrototypeOf/Reflect.getPrototypeOf 和Object.setPrototypeOf/Reflect.setPrototypeOf（尽管如此，设置对象的[[Prototype]]是一个缓慢的操作，如果性能是一个问题，应该避免）。

通俗的说，__proto__并不是JS规定实现的，而是浏览器为了方便开发人员调试而实现的。除了Object.create(null)创建的实例对象没有__proto__属性外，其他所有对象都有这个属性，包括构造函数（函数是对象的子类），这个属性指向了对象的基类。

6. 总结原型继承

从构造函数实例化出一个对象后，这个对象的__proto__属性指向了构造函数的prototype属性， 构造函数的prototype属性中也有个__proto__属性（因为prototype是对象，每个对象都有__proto__属性），这个__proto__属性又指向了基类的prototype属性（因为这个__proto__相当于基类的实例对象），如此循环，直到最后__proto__指向Object类。
所以我们把需要继承的方法放在基类的prototype原型中，子类的实例使用基类的方法时，就会顺着__proto__查找，就能拿到这个方法了。

7. 延伸 —— ES6中的class

简单提一下class， 这是ES6中实现的新语法，其实就是上文所说的原型继承的语法糖。class的使用方法：

  class Parent {
    constructor(name) {
      this.name = name
    }
    move() {
      console.log('这个方法写在了原型中')
    }
  }
  class Son extends Parent {
    say() {
      console.log('这个方法写在了原型中')
    }
  }
  var son = new Son('xxx')

打印son实例对象看看

可以看到，结果跟之间使用原型继承打印出来的结果是一样的

8. 问题 🧐

截图中 为什么实例的__proto__显示的是 __proto__: Parent ？
如果你理解了原型继承，我相信这个问题难不倒你

---

以上纯属个人理解，若有错误，请指正。
路漫漫其修远兮，吾将上下而求索。共勉 🤜