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

面向对象(四)

继承

4. 多继承——老师不止一位

• 首先，JavaScript实现多继承是有一些局限性的，因为JavaScript中继承时依赖于prototype链实现的，只有一条原型链，所以理论上不能继承多个父类的
• 通过一些技巧和方法可以继承多个对象的属性来实现类似的多继承

  // 继承单对象属性的方法extend方法
  
  // 单继承属性复制
  let extend = (target, source)=> {
    // 遍历元对象中的属性
    for(let property in target) {
      // 将源对象中的属性复制到目标对象中
      target[property] = source[property]
    }
    // 返回目标对象
    return target
  }

测试代码

 let book = {
    name: 'JavaScript 设计模式',
    alike: ['css', 'html', 'JavaScript']
 }
 
 let anotherBook = {
   color: 'blue'
 }
 
 extend(anotherBook, book)
 
 console.log(anotherBook.name)  // 'JavaScript 设计模式'
 console.log(anotherBook.alike) // ['css', 'html', 'JavaScript']
 
 anotherBook.alike.push('ajax')
 anotherBook.name = '设计模式'
 
 console.log(anotherBook.name)  // 设计模式
 console.log(anotherBook.alike) // ['css', 'html', 'JavaScript', 'ajax']
 
 console.log(book.name)         // JavaScript 设计模式
 console.log(book.alike)        // ['css', 'html', 'JavaScript', 'ajax']
 

传递多对象进行继承

 // 多继承 属性复制
 const mix= () =>{
    let i = 1;                    // 从第二个参数起为被继承的对象
    let len = arguments.length    // 获取参数的长度
    let target = arguments[0]     // 第一个参数为目标对象
    let arg                       // 缓存参数对象
    
    // 遍历被继承的对象
    for(;i<len;i++){
      // 缓存当前对象
      arg = arguments[i]
      // 遍历被继承对象中的属性
      for(let property in arg){
         // 将被继承的对象的属性复制到目标对象中
         target['property'] = arg['property']
      }
    }
    // 返回目标对象
    return target
 }

• 这个函数有个缺点，需要传入目标对象（第一个参数）
• 如果将它绑定到原生对象Object上的话，所有对象都可以拥有这个方法 如下

  Object.prototype.mix =()=> {
     let i = 0                    // 从第一个参数起为被继承的对象
     let len = arguments.length   // 获取参数的长度
     let arg                      // 缓存参数对象
     for(; i<len; i++) {
        // 缓存当前对象
        arg = arguments[i]
        // 遍历被继承对象的属性
        for(let property in arg) {
          // 将被继承对象中的属性复制到目标对象中
          this[property] = arg[property]
        }
     }
  }

测试代码

  let book1 = {
    name: 'JavaScript 设计模式',
    alike: ['css', 'html', 'js']
  }
  
  let book2 = {
    color: 'blue'
  }
  
  let otherBook = {}
  
  otherBook.mix(book1, book2)
  console.log(otherBook)        // Object { name:'JavaScript 设计模式', alike: Array(3), color: 'blue', mix: function }
  

明天继续多态，还可能总结得到一设计模式了