学习JavaScript设计模式——面向对象(三)

面向对象(三)

继承

3. 原型式继承——洁净的继承者

• 借助原型prototype可以根据已有的对象创建一个新的对象
• 同事不必创建新的自定义对象类型

// 原型是继承
function inheritObject(o){
    // 声明一个过度函数对象
    function F(){}
    // 过度原型对象的原型继承父对象
    F.prototype = o;
    // 返回过度对象的一个实例，该实例的原型继承了父对象
    return new F()
}

• 这个是对象类式继承的一个封装
• 其中的过渡对象就相当于类式继承中的子类
• 为了创建要返回的新的实例化对象，所以子类在原型式中所谓一个过渡对象出现

但是他们引用的父对象是一样的，所以如果有对属性修改还是会影响到父对象

例

 let book = {
  name: 'js book',
  alikeBook: ['css book', 'html book']
 }
 
 let newBook = inheritObject(book)
 newBook.name = 'ajax book'
 newBook.alikeBook.push('xml book')
 
 let otherBook = inheritObject(book)
 otherBook.name = 'flash book'
 otherBook.alikeBook.push('as book')

 console.log(newBook.name)        // ajax book
 console.log(newBook.alikeBook)   // ['css book', 'html book', 'xml book', 'as book']
 
 console.log(other.name)          // flash book
 console.log(other.alikeBook)     // ['css book', 'html book', 'xml book', 'as book']
 
 console.log(book.name)           // js book
 console.log(book.alikeBook)      // ['css book', 'html book', 'xml book', 'as book']
  

• 跟类式继承一样，父类对象book中的值类型属性被复制，引用类型的属性被共用

4. 寄生式继承——如虎添翼

// 寄生式继承
// 声明基对象
let book = {
    name: 'js book',
    alikeBook: ['css book', 'html book']
}

function createBook(obj){
    // 通过原型继承方式创建新对象
    let o = new inheritObject(obj)
    // 拓展新对象
    o.getName = function() {
        console.log(name)
    }
    // 返回拓展新对象
    return o
}

• 寄生式继承是对原型式继承的第二次封装
• 并且在第二次封装过程中对继承的对象进行了扩展
• 这样新创建的对象不仅仅有父类中的属性和方法而且还添加新的属性和方法
• o.getName 那里，属性名没有声明过，可能是作者忘了声明还是什么，应该是对象o独有的属性

5. 寄生组合式继承——终极继承者 寄生模式继承 和 构造函数式继承

 /**
  * 寄生式继承 继承原型
  * 传递参数 subClass 子类
  * 传递参数 superClass 父类
  **/
  
  function inheritPrototype(subClass, superClass){
   // 复制一份父类的原型副本保存在变量中
   var p = inheritObject(superClass.prototype)
   // 修正因为重写子类原型导致子类的constructor属性被修改
   p.constructor = subClass
   // 设置子类的原型
   subClass.prototype = p
  }
  

• 通过寄生式继承重新继承父类的原型，但是不需要父类的构造函数
• 因为在构造函数继承中我们已经调用了父类的构造函数，我们继承来的是父类原型的一个副本，通过原型继承得来
• 但是对父类原型对象复制得到的复制对象p 的constructor 指向的不是子类的subClass子类对象
• 所以需要在寄生式继承中对复制对象p修改，对p的constructor的指向修改
• 最后将得到的复制对象p赋值给子类的原型
• 这样子类的原型就继承了父类的原型并且没有执行父类的构造函数

P.S 确实有点绕，需要多仔细看看理解

测试代码

 // 定义父类
 function SuperClass(name){
   this.name = name
   this.colors = ['red', 'blue', 'green']
 }
 // 定义父类原型方法
 SuperClass.prototype.getName = function() {
    console.log(this.name)
 }
 
 // 定义子类
 function SubClass(name, time) {
    // 构造函数式继承
    SuperClass.call(this, name)
    // 子类新增属性
    this.time = time
 }
 
 // 寄生式继承父类原型
 inheritPrototype(subClass, superClass);
 // 子类新增原型方法
 subClass.prototype.getTime = function(){
    console.log(this.time)
 }
 
 // 创建两个测试方法
 let instance1 = new SubClass('js book', 2014)
 let instance2 = new SubClass('css book', 2013)
 
 instance1.colors.push('black')
 console.log(instance1.colors) // 
 console.log(instance2.colors) //
 instance2.getName()           // css book
 instance2.getTime()           // 2013

周末愉快，明天写多继承和多态，如果在家想写的话=-=

补一张继承原理图

继承原理.jpeg