【呆萌の研究】JavaScript常见的继承方式

摘要：构造函数构造操作符调用的函数就是构造函数。其和其构造函数的指向相同。而构造函数属性指向的对象带有属性，指向函数自身。，回归构造函数继承，仔细看看诞生的嘻嘻和哈哈两位同学可以看到两个实例都拥有了和两个属性，因为方法的运行类似于执行了和。

最近在看《JavaScript设计模式》，然后开篇复习了JavaScript中的几种继承方式，自己似乎也没有怎么仔细探究过，目前自己没怎么碰到过应用的场景（噗），所以借这次机会好好来屡屡思路。

例子

function Person() {
    this.telephone = ["000-0000-0000"];
}

function Student(className) {
    this.className = className;
}

Student.prototype = new Person();
var Haha = new Student(1);
var Xixi = new Student(2);

创建好父类和子类。联系他们的方式是把学生的prototype指向一个人的实例。

问：prototype是什么？
几乎任何对象有一个[[prototype]]属性，在标准中，[[prototype]]一个隐藏属性，指向的是这个对象的原型。而它的指向是由构造该对象的方法决定的：
1.对象字面量构造：其[[prototype]]指向Object.prototype。

var person = {};

2.构造函数构造：new操作符调用的函数就是构造函数。其[[prototype]]和其构造函数的prototype指向相同。而构造函数prototype属性指向的对象带有constructor属性，指向函数自身。

function Person(){}
var person = new Person();

此图为Person的prototype内容，可以看到constructor属性实际指向的就是Person()函数。（小绿色框框内和外面绿色框框其实是同一个内容）。

3.Object.create构造的。

var person = {};
var Haha = Object.create(person);

这里对象Haha的[[prototype]]指向对象person。也可以写null，此时对象Haha就没有原型。

首先要分清楚类和实例，在控制台显示中，只有类才会有prototype属性，而实例是拥有一个名为_proto_的属性，它会指向构造它函数的原型，两者本质都是一个指针。

function Person() {
   this.telephone = ["000-0000-0000"];
}
var Hehe = new Person(); 
console.log(Person.prototype);
console.log(Hehe);

以上代码运行结果：

可以瞧见，这里Hehe的_proto_是指向了Person.prototype。

问：new关键字的作用是什么？
new关键字运作的过程如下，引用自《JavaScript》高级程序设计：

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。  2、属性和方法被加入到 this 引用的对象中。 
3、新创建的对象由 this 所引用，并且最后隐式的返回 this。

简单来说，它创建了一个空对象，指定了原型，把属性方法进行拷贝，并把this指向进行了改变。假如我们把上面的代码改成：

function Person() {
 this.telephone = ["000-0000-0000"];
}
        
var Hehe = Person();
console.log(Hehe.telephone);

去掉new关键词赋予Person()，会报错，而输出window.telphone得到的就是["000-0000-0000"]。因为函数的返回值（没有返回值所以是undefined）赋予给了Hehe，尝试去读取undefined的属性，报错了。而此时函数运行中的this是全局变量window。

So，回归类式继承，仔细看看诞生的嘻嘻和哈哈两位同学

会发现，各自都有自己的班级名属性，但是原型指向的是同一个Person实例，所以如果嘻嘻有两个号码，或者他要更改自己的号码，那哈哈的电话号码也会发生变化，他们只能共享这个电话号码。

例子

function Person(name) {
    this.name = name;
}

Person.prototype.showName = function() {
    console.log(this.name);
}

function Student(name, className) {
    this.className = className;
    Person.call(this, name);
}
var Haha = new Student("Haha", 1);
var Xixi = new Student("Xixi", 2);

问：call函数的运作过程？
call函数和apply函数的作用相同，不同之处就是apply函数只能传入2个参数，而call函数可以有多个。F.call(thisArg,[arg1……]) 函数的运作过程如下（来源网络）：

1.先判断F是否为一个函数，如果不是一个函数，那么将抛出TypeError异常。 
2.创建一个内部类型空列表list 
3.然后如果参数除去thisArg外还有其他参数的话，就将这些值添加到list中 
4.thisArg和list作为F内部属性[[Call]]的参数传入调用进行函数的执行操作

简而言之就是它把一个函数的对象上下文改成了由 thisArg指定的新对象。

So，回归构造函数继承，仔细看看诞生的嘻嘻和哈哈两位同学

可以看到两个实例都拥有了className和name两个属性，因为call方法的运行类似于执行了Haha.name="Haha"和Xixi.name="Xixi"。
但是因为没有与父类的原型相联系，所以父类原型中的方法，不能得到继承。运行Haha.showName()会得到报错。

例子

function Person(name) {
    this.name = name;
}

Person.prototype.showName = function() {
    console.log(this.name);
}

function Student(name, className) {
    this.className = className;
    Person.call(this, name);
}
Student.prototype = new Person();
Student.prototype.showClassName = function() {
     console.log(this.className);
}

var Haha = new Student("Haha", 1);
var Xixi = new Student("Xixi", 2);

组合继承综合了类式继承和构造函数继承，在把父类的属性继承后，把子类的原型指向了父类实例，这样就可以继承父类原型的方法了。
但是这里相当于使用了两次父类函数，并且子类不是父类的实例，子类的原型是父类的实例，所以还会有更好的方法。

function inheritObject(o) {
 function F() {}
 F.prototype = o;
 return new F();
}

var person = {
 name: "unknown",
 telephone: ["000-0000-0000"]
}

var Xixi = inheritObject(person);
Xixi.name = "Xixi";
Xixi.telephone.push("111-1111-1111");

var Haha = inheritObject(person);
Haha.name = "Haha";

仔细看看诞生的嘻嘻和哈哈两位同学

这里.name给Xixi实例添加了一个自己的name属性，而push操作是直接影响原型中引用变量，所以改进之后又有了下面这种方式。
在这里我产生了一个疑问，为什么name属性是自己添加新的，而telephone是采用原来的。于是添加了一个age属性，执行Xixi.age++操作。

这里可以看到实例重新添加了一个age属性，所以我们可以说只要是改变原型属性的值，就会把新的属性加在实例上，引用不改变是因为引用的地址还没有改变。

寄生式继承是在原型继承的基础之上，我们需要再添加一下代码：

function createPerson(obj) {
 var o = inheritObject(obj);
 o.getName = function(){
  console.log(name);
 }
 return o;
}

这样就给得到的对象添加了公共方法。

寄生组合式继承是为了弥补组合式继承的缺点，是在寄生式继承+构造函数继承组合而成的：

function inheritObject(o) {
 function F() {}
 F.prototype = o;
 return new F();
}
function inheritPrototype(subClass, superClass) {
 //复制一份父类原型
 var p = inheritObject(superClass.prototype);
 //修正重写子类原型导致constructor属性被修改
 p.constructor = subClass;
 //设置子类原型
 subClass.prototype = p;
}

function Person(name) {
    this.name = name;
}

Person.prototype.showName = function() {
    console.log(this.name);
}

function Student(name, className) {
    this.className = className;
    Person.call(this, name);
}

inheritPrototype(Student, Person);

Student.prototype.showClassName = function() {
     console.log(this.className);
}

var Xixi = new Student("Xixi",2);
var Haha = new Student("Haha",1);

以下为嘻嘻和哈哈的内容：

可以对比一下组合式继承的结果：

不同的地方在于把子类原型的构造函数改成了实例对应的构造函数，在组合继承中子类原型直属并没有constructor属性。