继承

引言

继承是OO语言中一个最为人津津乐道的概念。大部分的OO语言中都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。在ECMAScript中实现继承的方式主要依靠原型链来实现的。

原型链

基本思想: 利用原型让一个引用类型继承另一个引用类的属性和方法。

    function SuperType(){
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function(){
        return this.property;
    }
    function SubType(){
        this.subproperty = false;
    }
    SubType.prototype = new SuperType();
    SubType.prototype.getSubValue = function(){
        return this.subproperty;
    }
    var instance = new SubType();
    alert(instance.getSuperValue())

如何确定原型和实例的关系?

有两种方式去确定原型和实例之间的关系。
1.使用instanceof操作符。
instanceof 的作用是用来测试实例与原型中出现过的,他的结果会返回 true。接着上面的例子继续

    console.log(instance instanceof Object)      //true
    console.log(instance instanceof SuperType)   //true
    console.log(instance instanceof SubType)     //true
  1. 使用 isPrototypeof() 方法。
    只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型。也会返回true
   console.log(Object.prototype.isPrototypeOf(instance))          //true
   console.log(SuperType.prototype.isPrototypeOf(instance))       //true
   console.log(SubType.prototype.isPrototypeOf(instance))         //true

原型链的问题

1.包含引用类型值的问题。在通过原型来实现继承是,原型实际上会变成另一个类型的实例,达到共享。
2.没有办法在不影响所有对象实例的情况下,向上给构造函数传递参数。

构造函数继承

为了解决上述原型链问题1,我们可以借用构造函数解决问题并且使用call()applay() 可以在新创建的对象上执行构造函数。

    function SuperType(){
        this.colors = ['red','green','blue']
    }
    function Subtype(){
        SuperType.call(this)
    }
    var instance = new Subtype()
    instance.colors.push('yellow')
    console.log(instance.colors)    // ["red", "green", "blue", "yellow"]

    var instance2 = new Subtype()
    console.log(instance2.colors)  // ["red", "green", "blue"]

为了解决上述问题2,如何向上传构造函数传递参数呢?如下:

    function SuperType(name) {
        this.name = name;
    }
    function SubType(){
        SuperType.call(this,'ymiandi')
        this.age = 25
    }
    var instance = new SubType()
    console.log(instance.name)   // ymianid
    console.log(instance.age)    // 25

借用构造函数的问题

使用构造函数存在方法都在构造函数中定义,这样会增加函数复用。

组合继承

    function SuperType(name) {
        this.name = name
        this.colors = ['red','green','blue']
    }
    SuperType.prototype.sayName = function(){
        console.log(this.name)
    }
    function SubType(name,age){
        SuperType.call(this,name)
        this.age = age
    }
    //继承方法
    SubType.prototype = new SuperType()
    SubType.prototype.constructor = SubType
    SubType.prototype.sayAge = function(){
        console.log(this.age)
    }

    var instance1 = new SubType('ershuai',24)
    instance1.colors.push('yellow')
    console.log(instance1.colors)  //["red", "green", "blue", "yellow"]
    instance1.sayName()//ershuai
    instance1.sayAge() //24

    var instance2 = new SubType('ymd',25)
    console.log(instance2.colors)  //["red", "green", "blue"]
    instance2.sayName()  // 'ymd
    instance2.sayAge()   // 25

原型式继承

道格拉斯·克罗克福德采用的一种方法。借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。给下如下函数:

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

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

    var person = {
        name : 'ymiand',
        friends: ['qqqq','wwwww','oooo']
    }
    var anotherPerson = Object.create(person,{
        name: {
            value: 'Greg'
        }
    })
    var anotherPerson = object(person);
    anotherPerson.name = 'Greg'
    anotherPerson.friends.push('ttttt')

    var yerAnotherPerson = object(person)
    yerAnotherPerson.name = 'Linda'
    yerAnotherPerson.friends.push('Bar')

    console.log(person.friends)

在ECMAScript5 中通过新增Object.create() 方法规范了原型式继承。

    var person = {
        name : 'ymiand',
        friends: ['qqqq','wwwww','oooo']
    }
    var anotherPerson = Object.create(person,{
        name: {
            value: 'Greg'
        }
    })
        console.log(anotherPerson.name)

寄生式继承

寄生式继承是与原型式继承紧密相关的一种思路。
寄生式继承的思路与寄生构造函数和工厂模式类似。即创建一个仅用封装继承过程的函数,该函数在内容以某种方式增强对象,最后再返回对象

    function createAnother(original){
        var clone = object(original);//通过调用函数创建一个新对象
        clone.sayHi = function(){//以某种方式来增强这个对象
            console.log('hi')
        }
        return clone//返回这个对象
    }

寄生组合式继承

通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。
寄生组合式继承模式基本模式如下:

function inheritPrototype(subType,SuperType){
    var prototype = object(SuperType.prototype) //创建对象
    prototype.constructor = subType;//增强对象
    subType.prototype = prototype;//指定对象
}

ES6 class 继承

    class Parent {
        constructor(){
            this.x = 'aaa'
        }
    }

    class Son extends Parent{
        constructor(){
            super()
        }
    }
    
     console.log(new Son())

你可能感兴趣的:(继承)