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

面向对象(二)

继承

1. 类式继承 将父类(第一个类)的实例赋值给第二个类的原型

• 类的原型对象的作用就是为类的原型添加共有方法,但不能直接访问这些属性和方法，必须通过原型prototype来访问
• 我们实例化一个父类的时候，新创建的对象复制了父类的构造函数内的属性与方法，并且将原型_ proto_指向了父类的原型对象，这样就拥有了父类原型对象上的属性与方法,并且这个新创建的对象可直接访问到父类原型对象上的属性与方法
• 如果我们将这个新创建的对象赋值给子类的原型，那么子类的原型就可以访问到父类的属性和方法
• 新创建的对象不仅仅可以访问父类原型上的属性和方法，同样也可以访问从父类构造函数中复制的属性和方法，
• 将这个对象赋值给子类的原型，那么这个子类的原型同样也可以访问父类原型上的属性和方法与从父类构造函数中复制的属性和方法

    // 类式继承
    // 声明父类
    function SuperClass(){
        this.superValue = true;
    }
    // 为父类添加共有方法
    SuperClass.prototype.getSuperValue = function(){
        return this.superValue;
        
    }
    // 声明子类
    function subClass(){
        this.subValue = false
    }
    
    // 继承父类
    SubClass.prototype= new SuperClass();
    // 为子类添加共有方法
    SubClass.prototype.getSubValue = function(){
      return this.subValue;
    }

所有创建的的对象都是原生对象Object的实例

console.log(instance instanceof Object)  // true 

这种继承 如果 多个对象继承，修改父类的属性，会影响别的对象的继承属性！！！因为他们指向同一个父类的属性
如

 function SuperClass(){
  this.books = ['JavaScript', 'html', 'css']
 }
 
 function SubClass() {}
 SubClass.prototype = new SuperClass()
 let instance1 = new SubClass()
 let instance2 = new SubClass()
 console.log(instance2.books) // ['JavaScript', 'html', 'css']
 instance1.books.push('设计模式')
 console.log(instance2.books) // ['JavaScript', 'html', 'css', '设计模式']

2.构造函数继承——创建即继承 call or apply

// 构造函数式继承
// 声明父类
function SuperClass(id){
    // 引用类型共有属性
    this.books = ['JavaScript', 'html', 'css']
    // 值类型共有属性
    this.id = id
}
// 父类声明原型方法
SuperClass.prototype.showBooks = function(){
    console.log(this.books)
}
// 声明子类
function SubClass(id){
    // 继承父类 通过子类this 应用于 父类SuperClass 的属性和方法
    SuperClass.call(this,id)
    
}

// 创建第一个子类的实例
let instance1 = new SubClass(10)
// 创建第二个子类的实例
let instance2 = new SubClass(11)

instance1.push('设计模式')
console.log(instance1.books) // ['JavaScript', 'html', 'css', '设计模式']
console.log(instance1.id)    // 10
console.log(instance2.books) // ['JavaScript', 'html', 'css']
console.log(instance2.id)    // 11

instance1.showBooks()        // TypeError

call 和 apply 都可以继承 A.call(B, arg1,arg2) A.apply(B, argArray), 通过子类B应用于父类 A 的属性和方法

call 如果有多个属性参数,传递形式为多个参数

apply 如果有多个属性参数,传递形式为参数的数组

• SuperClass.call(this, id) 这条语句是构造函数式继承的精华，这个方法可以更改函数的作用环境
• 在子类中 superClass调用这个方法就是将子类中的变量在父类中执行一遍
• 由于父类中是给this绑定属性的，所以继承了父类中的共有属性
• 由于这种类型(apply,call)的继承没有涉及原型prototype,所以父类的原型方法不会被子类继承
• 想被子类继承要放在构造函数中，这样创造出来的每个实例都会单独拥有一份，不能共有，违背了代码复用的原则

3. 组合继承——将优点为我所用

 // 组合式继承
 // 声明父类
 function SuperClass(name){
   // 值类型共有属性
   this.name = name
   // 引用类型共有属性
   this.books = ['html', 'css', 'JavaScript']
 }
 // 父类原型共有方法
 SuperClass.prototype.getName = function() {
    console.log(this.name)
 }
 
 // 声明子类
 function SubClass(name, time){
    // 构造函数式继承父类name属性
    SuperClass.call(this, name)
    // 子类中新增共有属性
    this.time = time 
 }
 
 // 类式继承 子类原型继承父类
 SubClass.prototype = new SuperClass()
 // 子类型原型方法
 SubClass.prototype.getTime = function() {
    console.log(this.time)
 }

测试一下

 let instance1 = new SubClass('js book', 2014)
 instance1.books.push('设计模式')
 console.log(instance1.books)  // ['html', 'css', 'JavaScript', '设计模式']
 instance1.getName()           // js book
 instance1.getTime()           // 2014
 
 let instance2 = new SubClass('css book', 2013)
 console.log(instance2.books)  // ['html', 'css', 'JavaScript']
 instance2.getName()           // css book
 instance2.getTime()           // 2013

• 这种不是完美的继承
• 使用构造函数继承时执行了一遍父类的构造函数
• 实现子类原型的类式继承时又调用了一次父类构造函数

太累了，明天再写……原型式继承