详解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函数对象。是否是有点晕？没紧要，接下来我们就上比举例子更好的手腕&＃8211;绘图。

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属性后输出的是&＃8217;女&＃8217;,申明只有当实例自身不存在对应的属性或要领时，才会去找原型对象上的对应属性或要领

• 补充一下：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还能再往上吗？

以上答案在下篇中解答，读者能够本身先尝尝，思索一下，有疑问也能够在批评中提出。末了，假如这篇文章对你有协助，请慷慨的点珍藏和引荐吧（每次都是珍藏比引荐多!，构造言语，绘图和排版都很辛劳的），你们的支撑会给我更大的动力~以上内容属于个人见解，假如有差别看法，迎接指出和讨论。请尊敬作者的版权，转载请说明出处，如作商用，请与作者联络，谢谢！