JS中的对象的继承

目录

构造函数继承

1.构造函数绑定

2.使用prototype

原型链和构造函数绑定的组合继承

3.直接继承父函数的prototype

4.使用空对象作为中介

5.拷贝继承

非构造函数继承

1.object方法

2.浅拷贝

3.深拷贝

---

构造函数继承

假设现在有两个构造函数，Animal和Cat

function Animal(){
    this.species = 'animal'
    this.whoami = function(){
        console.log('i am an animal')
    }
}

function Cat(name, color){
    this.name = name
    this.color = color
}

 现在想让Cat构造函数继承Animal构造函数的属性和方法，可以有以下五种方法

1.构造函数绑定

function Cat1(name, color){
    Animal.apply(this, arguments)
    this.name = name
    this.color = color
}
Animal.prototype.age = '1'
var aCat = new Cat1('喵','white')
console.log(aCat.species) //'animal'
aCat.whoami() //i am an animal
console.log(aCat.age) //undefined

 使用apply函数把Animal绑定到Cat上（把父对象的构造函数绑定到子函数上）。

但是这样做有一个问题，子类不会获取到父类原型对象上的属性和方法。为了解决这一问题，可以考虑使用基于原型的继承

2.使用prototype

Cat.prototype = new Animal()
var aCat = new Cat('喵喵', 'white')
console.log(aCat.species) //animal
Cat.prototype.constructor = Cat //注意把constructor指向正确构造函数
console.log(aCat.constructor) //[Function: Cat]
Animal.prototype.age = '1'
console.log(aCat.age) //1

 把子类的原型指向父类实例，那么所有Cat的实例就可以继承Animal了，子类也可以获取到父类原型上的属性和方法。

但是，如果想往子类的prototype对象中定义属性或方法，必须要在Cat.prototype = new Animal()之后，否则会被覆盖。并且这种方法如果父类构造函数有参数的话，子类在实例化的时候无法向父类构造函数中传参，也无法实现多继承。为了解决这一问题，可以采用原型链和构造函数绑定的组合继承方式。

原型链和构造函数绑定的组合继承

function Cat1(name, color, size){
    Animal.call(this, size)
    this.name = name
    this.color = color
}
Cat1.prototype = new Animal()
var aCat = new Cat1('喵喵', 'white', 'big')
console.log(aCat.species)//animal
Cat1.prototype.constructor = Cat //注意把constructor指向正确构造函数
console.log(aCat.constructor)//[Function: Cat]
Animal.prototype.age = '1'
console.log(aCat.age)//1
console.log(aCat.size)//big

这样子类在实例化的时候也可以向父类构造函数中传参了 

3.直接继承父函数的prototype

由于在Animal对象中，不变的属性和方法都可以写入prototype，所以子类的prototype可以直接继承父类的prototype

Animal.prototype.species = 'this is an animal' //先在Animal的prototype上定义一个species属性，否则会输出undefined，因为aCat.species不会遍历到Animal自有属性
Cat.prototype = Animal.prototype
Cat.prototype.constructor = Cat
var aCat = new Cat('喵喵喵','white')
console.log(aCat.species)
console.log(Animal.prototype.constructor) //Cat,把Animal的constructor改了！

 但是，当把子类的原型指向父类的原型，然后手动更改子类的constructor，这样会把父类的constructor也改了！

为什么呢？可以看一看在内存中都发生了啥

1.Cat.prototype = Animal.prototype

2.Cat.prototype.constructor = Cat

可以看到，此时Animal.prototype.constructot也被修改成Cat了

4.使用空对象作为中介

为了解决以上更改子类constructor会把父类的constructor也改掉的问题，可以使用一个空对象作为中介

function extend(child, parent){
    var f = function(){}
    f.prototype = parent.prototype
    child.prototype = new f()
    child.prototype.constructor = child
}
Animal.prototype.species = 'this is an animal'
extend(Cat, Animal)
var aCat = new Cat('喵喵喵喵','white')
console.log(aCat.species)//this is an animal
console.log(Cat.prototype.constructor)//[Function: Cat]
console.log(Animal.prototype.constructor)//[Function: Animal]

 这种方式可以解决第3中方案里修改子类原型构造函数父类原型构造函数也会变的问题。还是让我们来看看内存中发生了啥

1.var f = function(){}

给f分配一个内存空间

2.f.prototype = parent.prototype

把f的prototype指向parent的prototype

3.child.prototype = new f()

这一句其实是把child.prototype这个对象的__proto__指向了f.prototype（戳我了解new一个实例发生了啥）

4.child.prototype.constructor = child

手动修正child原型的constructor

可见修改child原型的constructor不会影响到parent

5.拷贝继承

以上都是采用prototype的方式实现继承，其实继承就是子类可以使用父类的方法和属性，那么是否可以考虑将父类的方法和属性都拷贝到子类中呢？这样子类在实例化了之后不也可以使用父类的属性和方法了吗？同时也不会改变子类和父类的constructor。这种方式成称为拷贝继承

Animal.prototype.species = "this is an animal!!"
function extendCopy(child, parent){
    for(var i in parent.prototype){
        child.prototype[i] = parent.prototype[i]
    }
}
extendCopy(Cat, Animal)
var aCat = new Cat('喵喵喵喵喵', 'white')
console.log(aCat.species) //this is an animal!!
console.log(Cat.prototype.constructor)//[Function: Cat]
console.log(Animal.prototype.constructor)//[Function: Animal]

非构造函数继承

第一部分都是使用构造函数实现继承，如果现在只有两个对象例如

var human = {
    eyes: 2,
    nose:1,
    mouth:1,
    ears:2
}

var Chinese = {
    nation:'China',
    color:'yellow'
}

 我想让Chinese对象继承human对象，该怎么办呢？这两个对象都是普通对象，他们没有构造函数，无法使用构造函数原型链等方法实现继承。

1.object方法

没有构造函数，就自己造构造函数。采用之前的空对象作为中介的方法

function object(obj){
    function f(){}
    f.prototype = obj
    f.prototype.constructor = f
    var a = new f()
    return a
}

var Chinese = object(human)
Chinese.nation = 'China'
console.log(Chinese.eyes)//2

 将父对象作为中介f的原型对象，然后返回一个实例化的f给子对象，这样子对象显然就会拥有父对象的一切属性和方法，因为子对象其实是f的实例，而f的实例的原型是父对象。

2.浅拷贝

把父对象的属性全部拷贝给子对象（如果父对象中有引用类型属性，其实只是拷贝了地址）

3.深拷贝

如果父对象中有引用类型属性，就进行递归的拷贝。

有关于对象的深浅拷贝问题，戳我了解

 

以下为参考文章：

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html