详解js中的继承（一）

前言

最近在学vue，到周末终于有空写一些东西了（想一想又能骗赞，就有点小激动！）。在javascript基础中，除了闭包以外，继承也是一个难点。由于考虑到篇幅较长，因此打算分红两个部分来写。一样基于《javascript高级程序设计》，作一个详细的讲解，若是有不对的地方欢迎指正。

准备知识

为了更好的讲解继承，先把一些准备知识放在前面。

1.构造函数，实例

构造函数，是用来建立对象的函数，本质上也是函数。与其余函数的区别在于调用方式不一样：

• 若是经过new操做符来调用的，就是构造函数

• 若是没有经过new操做符来调用的，就是普通函数
  例子：

  function Person(name, age) {
     this.name = name;
     this.age = age;
   }
   //当作构造函数调用
   var person1 = new Person('Mike',10);
   
   //当作普通函数调用，这里至关于给window对象添加了name和age属性,这个不是重点，只要注意调用方式
   Person('Bob',12);
   
   console.log(person1)//Person {name: "Mike", age: 10}
   console.log(name)//Bob
   console.log(age)//12

在var person1 = new Person('Mike',10);中，经过new操做符调用了函数Person，而且生成了person1,
这里的Person就称为构造函数，person1称为Person函数对象的一个实例。实能够经过实例的constructor访问对应的构造函数（可是其实上这个constructor不是实例的属性，后面会解释为何），看下面的例子：

function Person(name, age) {
    this.name = name;
    this.age = age;
  }
 var person1 = new Person('Mike',10);
 var person2 = new Person('Alice',20);
 console.log(person1.constructor)//function Person(){省略内容...}
 console.log(person2.constructor)//function Person(){省略内容...}

2.原型对象

当咱们每次建立一个函数的时候，函数对象都会有一个prototype属性，这个属性是一个指针,指向它的原型对象。原型对象的本质也是一个对象。初次看这句话可能有点难以理解，举个例子，仍是刚刚那个函数：

function Person(name, age) {
        this.name = name;
        this.age = age;
     }
     console.log(Person.prototype)//object{constructor:Person}

能够看到Person.prototype指向了一个对象，即Person的原型对象，而且这个对象有一个constructor属性，又指向了Person函数对象。是否是有点晕？不要紧，接下来咱们就上比举例子更好的手段--画图。

3.构造函数，原型对象和实例的关系

在前面，咱们刚刚介绍过了构造函数，实例和原型对象，接下来咱们用一张图来表示这三者之间的关系（用ps画这种图真是麻烦的要死，你们有好的工具推荐一下）：

从图上咱们能够看到：

• 函数对象的prototype指向原型对象，原型对象的constructor指向函数对象

• 实例对象的[Protoptype]属性指向原型对象，这里的[Protoptype]是内部属性，能够先理解为它是存在的，可是不容许咱们访问（虽然在有些浏览器是容许访问这个属性的，可是咱们先这样理解），这个属性的做用是：容许实例经过该属性访问原型对象中的属性和方法。好比说：

function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      //在原型对象中添加属性或者方法
     Person.prototype.sex = '男'; 
     var person1 = new Person('Mike',10);
     var person2 = new Person('Alice',20);
     //只给person2设置性别
     person2.sex = '女';
     console.log(person1.sex)//'男'
     console.log(person2.sex)//'女'

这里咱们没有给person1实例设置sex属性，可是由于[Protoptype]的存在，会访问原型对象中对应的属性；
同时咱们给person2设置sex属性后输出的是'女',说明只有当实例自己不存在对应的属性或方法时，才会去找原型对象上的对应属性或方法

• 补充一下：ECMA-262第五版的时候这个内部属性叫[Prototype],而_proto_是Firefox，Chrome和Safari浏览器提供的一个属性，在其余的实现里面，这个内部属性是无法访问的。因此咱们能从控制台看到的是_proto_属性，可是我在文中用的仍是[Prototype]，我的认为这样较符合它的本质。

• tips：这里恰好解释一下console.log(person1.constructor)时，说到的，能够经过实例的constructor访问构造函数，可是constructor本质上是原型对象的属性。

继承

原型链

在js中，继承的主要思路就是利用原型链，所以若是理解了原型链，继承问题就理解了一半。在这里能够稍微休息一下，若是对前面的准备知识已经理解差很少了，就开始讲原型链了。

原型链的原理是：让一个引用类型继承另外一个引用类型的属性和方法。
先回顾一下刚刚讲过的知识：

• 原型对象经过constructor属性指向构造函数

• 实例经过[Prototype]属性指向原型对象

那如今咱们来思考一个问题：若是让原型对象等于另外一个构造函数的实例会怎么样？
例如：

function A() {
     
    }
    //在A的原型上绑定sayA()方法
    A.prototype.sayA = function(){
            console.log("from A")
    }
    function B(){

    }
    
     //让B的原型对象指向A的一个实例
     B.prototype = new A();
     
     //在B的原型上绑定sayB()方法
     B.prototype.sayB = function(){
            console.log("from B")
     }
     //生成一个B的实例
     var a1 = new A();
     var b1 = new B();
     
     //b1能够调用sayB和sayA
     b1.sayB();//'from B'
     b1.sayA();//'from A'

为了方便理解刚刚发生了什么，咱们再上一张图：

如今结合图片来看代码：

• 首先，咱们建立了A和B两个函数对象，同时也就生成了它们的原型对象

• 接着，咱们给A的原型对象添加了sayA()方法
  *　而后是关键性的一步B.prototype = new A();，咱们让函数对象B的protytype指针指向了一个A的实例,请注意个人描述：是让函数对象B的protytype指针指向了一个A的实例，这也是为何最后,B的原型对象里面再也不有constructor属性，其实B原本有一个真正的原型对象，本来能够经过B.prototype访问，可是咱们如今改写了这个指针，使它指向了另外一个对象，因此B真正的原型对象如今无法被访问了，取而代之的这个新的原型对象是A的一个实例，天然就没有constructor属性了

• 接下来咱们给这个B.prototype指向的对象，增长一个sayB方法

• 而后,咱们生成了一个实例b1

• 最后咱们调用了b1的sayB方法，能够执行，为何？
  由于b1有[Prototype]属性能够访问B prototype里面的方法；

• 咱们调用了b1的sayA方法，能够执行，为何？
  由于b1沿着[Prototype]属性能够访问B prototype，B prototype继续沿着[Prototype]属性访问A prototype，最终在A.prototype上找到了sayA()方法，因此能够执行

因此，如今的结果就至关于，b1继承了A的属性和方法，这种由[Prototype]不断把实例和原型对象联系起来的结构就是原型链。也是js中，继承主要的实现方式。

小结

由于这部分知识理解起来比较难，因此第一部分先写到这里（固然不是由于我想多写一篇来骗赞和关注啦），你们读到这里也能够歇口气了，若是这一块理解深入，下一部分就会很轻松。
为了测试一下你们对于本文的理解程度，问一下几个问题：

1. 在最后一个例子里，console.log(b1.constructor)，结果是什么？

2. B.prototype = new A();和 B.prototype.sayB = function(){ console.log("from B") }这两句的执行顺序能不能交换

3. 最后再思考一下. 在最后一个例子里，A看似已是原型链的最顶层，那A还能再往上吗？

以上答案在下篇中解答，读者能够本身先试试，思考一下，有疑问也能够在评论中提出。最后，若是这篇文章对你有帮助，请大方的点收藏和推荐吧（每次都是收藏比推荐多!，组织语言，画图和排版都很辛苦的），大家的支持会给我更大的动力~以上内容属于我的看法，若是有不一样意见，欢迎指出和探讨。请尊重做者的版权，转载请注明出处，如做商用，请与做者联系，感谢！