重温JS基础--继承

摘要：继承了如上，我们通过方法借调了超类的构造函数，实际上是在新创建的实力环境下调用了构造函数。组合继承组合继承的基本思想将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。继承方法在上面这个例子中，构造函数定义了两个属性和。

在ECMAScript中只支持实现继承，而且实现继承主要是依靠原型链来实现的。

1. 什么是原型链

继承基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。
构造函数，原型对象和实例对象的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，实例对象包含一个指向原型对象的内部指针。
假如我们让原型对象等于另外一个构造函数的实例，那么此时的原型对象将包含一个指向另外一个原型对象的指针，且该被指向的原型对象包含一个指向另一个构造函数的指针。假如另一个原型对象又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条，这就是原型链的基本概念。用代码描述如下：

function Super() {
    this.property = true
}
Super.prototype.getSuperValue = function() {
    return this.property
}

function Sub() {
    this.subproperty = false


//继承Super
Sub.prototype = new Super()
Sub.prototype.getSubValue = function() {
    return this.subproperty
}
var instance = new Sub()
console.log(instance.getSuperValue()) //true

如上代码，很好的描述了利用原型链进行继承。Super和Sub两个构造函数。每个类型分别有一个属性和一个方法。Sub继承了Spuer,而继承时通过创建了Super的实例，并将该实例赋给Sub.prototype实现。这实现的本质是重写了原型对象。在确立继承关系后我们又给Sub.prototype上面加了一个新方法。注意现在instance.constructor现在指向的值Super,因为Sub.prototype中的constructor被重写了。

2. 别忘记默认的原型

我们知道，所有引用类型默认都继承Object, 而这个继承也是通过原型链实现的。所有函数的默认原型对象都是Object的实例。因此默认原型都会包含一个指向内部的指针，指向Object.prototype。

3. 确定原型和实例的关系

可以通过两种方式来确定原型和实例之间的关系。第一种是通过instanceof操作符，只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回true。

instance instanceof Object //true
instance instanceof Super // true
instance instanceof Sub //true

由于原型链的关系，我们可以说instance是Object, Super, Sub中任何一个类型的实例。
第二种方式是使用isPrototypeOf()方法。同样，只要是原型链中出现过得原型，都可以说是该原型链所派生的实例的原型。

Object.prototype.isPrototypeOf(instance) //true
Super.prototype.isPrototypeOf(instance) //true
Sub.prototype.isPrototypeOf(instance) //true

4. 谨慎的定义方法

子类型有时需要重写超类中的某个方法，或者需要添加超类中不存在的某个方法。给原型添加方法的代码一定要放在替换原型的语句之后.

function Super() {
    this.property = true
}
Super.prototype.getSuperValue = function() {
    return this.property
}
function Sub() {
    this.subproperty = false
}
//继承Super
Sub.prototype = new Super()
//添加新方法
Sub.prototype.getSubValue = function() {
    return this.subproperty
}
//重写超类中的方法
Sub.prototype.getSuperValue = function() {
    return false
}

var instance = new Sub()
console.log(instance.getSuperValue()) //false

还有一点需要注意的是，通过原型链继承的时候，不能使用对象字面量的形式创建原型方法。这是因为会重写原型链。

function Super() {
    this.property = true
}
Super.prototype.getSuperValue = function() {
    return this.property
}

function Sub() {
    this.subproperty = false
}
//继承Super
Sub.prototype = new Super()

//使用字面量添加新方法，会导致上一行代码无效

Sub.prototype = {
    getSubValue: function() {
        return this.subproperty
    }
}

var instance = new Sub()
alert(instance.getSuperValue()) //error

如上，Sub继承了Super，紧接着又将原型替换成了一个对象字面量而导致问题。由于现在的原型包含的是一个Object的实例，而非SuperType的实例，因此我们设想的原型链已经被切断。

5. 原型链的问题

使用原型链继承的主要问题还是来自于包含引用类型值得原型。通过原型来实现继承时，原型实际上会变成另一个类型的实例。于是，原先的实例属性也就成了现在的原型属性了。因为原型属性上是实例共享的，那么就会出现问题。

function Super() {
    this.colors = ["red", "blue", "green"]
}
function Sub() {}

//继承Super
Sub.prototype = new Super()

var p1 = new Sub()
p1.colors.push("black")

var p2 = new Sub()
console.log(p2.colors) //["red", "blue", "green", "black"]

原型链的第二个问题就是，创建子类型实例时，不能向超类型的构造函数传递参数。实际上，应该说是没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数。

6. 借用构造函数

在解决原型对象中包含引用类型值所带来问题得过程中，使用一种叫做借用构造函数的技术。
基本思想：在子类型构造函数的内部调用超类型构造函数。（函数只不过是在特定环境下执行代码的对象）因此，可以通过使用apply()和call()方法可以在新创建的对象上执行构造函数。

function Super() {
    this.colors = ["red", "blue", "green"]
}

function Sub() {
    //继承了Super
    Super.call(this)
}

var p = new Sub()
p.colors.push("black")
console.log(p.colors) //"red, blud, green, black"

var p2 = new Sub()
console.log(p2.colors) //"red, blue, green, black"

如上，我们通过call()方法借调了超类的构造函数，实际上是在新创建的Sub实力环境下调用了Super构造函数。这样，就会在新Sub对象上执行Super()函数中定义的所有对象初始化代码，结果Sub的每个实例都会有自己的colors属性的副本。

相对于原型链而言，借用构造函数有一个很大的优势，可以在子类型构造函数中向超类型构造函数传递参数。

function Super(name) {
    this.name = name
}
function Sub() {
    Super.call(this, "Nicholas")
    this.age = 29
}

var p = new Sub()
console.log(p.name) //"Nicholas"
console.log(p.age) // 29

以上代码中的Super只接受一个参数name，该参数会直接赋给一个属性。在Sub构造函数内部调用Super构造函数时，实际上是为Sub的实例设置了name属性。为了确保Super构造函数不会重写子类型的属性，可以在调用超类型构造函数后，再添加应该在子类型中定义的属性。

问题：利用借用构造函数也会有一些问题，方法都在构造函数中定义，因此函数服用就无从谈起。而且超类型原型对象中定义的方法，对子类型而言也是不可见的。

7. 组合继承

组合继承的基本思想：将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。
思路：使用原型链实现对原型属性和方法的继承，通过借用构造函数是实现对实例属性的继承。

function Super(name) {
    this.name = name
    this.colors = ["red", "blue", "yellow"]
}

Super.prototype.sayName = function() {
    console.log(this.name)
}

function Sub(name, age) {
    Super.call(this, name)
    this.age = age
} 

//继承方法
Sub.prototype = new Super()
Sub.prototype.constructor = Sub
Sub.prototype.sayAge = function() {
    console.log(this.age)
}

var p1 = new Sub("Nicholas", 29)
p1.colors.push("black")
console.log(p1.colors) //"red, blue, green, black"
p1.sayName() //"Nicholas"
p1.sayAge() //29

var p2 = new Sub("Greg", 27)
console.log(p2.colors) //"red, blue, green"
p2.sayName() //"Greg"
p2.sayAge() //27

在上面这个例子中，Super构造函数定义了两个属性：name和colors。Super的原型定义了一个方法sayName()。Sub构造函数在调用Super构造函数时传入了name参数，紧接着又定义了它自己的属性age。然后将Super的实例赋值给Sub的原型对象，然后又在该新原型上定义了方法sayAge()。这样Sub构造函数不同的实例分别拥有自己的属性，又可以使用相同的方法了。

8. 原型式继承

原型式继承的想法时借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。

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

如上，在object()函数内部，先创建一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型, 最后返回了这个临时类型的一个新实例。本质上，object()对传入其中的对象执行了一次浅复制。

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
}

var p1 = object(person)
p1.name = "Greg"
p1.friends.push("Rob")

var p2 = object(person)
p2.name = "Linda"
p2.friends.push("Barbie")

console.log(person.friends) //"Shelby, Court, Van, Rob, Barbie"

以上这种继承方式要求你必须有一个对象作为另一个对象的基础。如果有这么一个对象的话，可以把它传给object()函数，然后再根据具体需求对得到的对象加以修改即可。在上面例子中，person对象作为基础对象，然后传入到object()，然后该函数就会返回一个新对象。这个新对象将person作为原型，所以它的原型中就包含一个基本类型值属性和一个引用类型值属性。这意味着person.friends不仅属于person所有，而且也会被p1和p2共享。实际上相当于创建了person对象的两个副本。

ECMAScript5通过新增object.create()方法规范化了原型式继承。这个方法接受两个参数：一个用作新对象原型的对象和一个为新对象定义额外属性的对象。在传入一个参数的情况下，Object.create()与object()方法行为相同。

后面还有寄生式继承和寄生组合继承....表示看不下去了，前面这几个已经够用, 有时间再学习下~