JavaScript设计模式学习心得三

继承
所谓继承，涉及的肯定不仅仅是一个对象，子类会继承父类的特点，但又不完全一样，会有自己的特点。可是JavaScript并没有继承这一现有的机制，也正是因为JavaScript少了这些显性的限制才使得其具有了一定的灵活性，所以我们可以根据不同的需求实现多样式的继承。
类式继承

//声明父类
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;
}

//测试代码
var instance = new SubClass();
console.log(instance.getSuperValue());  //true
console.log(instance.getSubValue());    //false

这种继承方式，就是将父类的实例赋值给了子类的原型prototype，那么有同学肯定会问了，为什么不是直接赋值给子类呢？
类的原型对象prototype的作用就是为类的原型添加共有属性和方法，但是类不能直接访问这些属性和方法，必须通过原型prototype来访问。我们实例化一个父类的时候，新创建的对象复制了父类的构造函数内的属性与方法并且将原型 __proto__指向了父类的原型对象，这样就拥有了父类原型对象上的属性与方法，同理如果将这个新创建的对象赋值给子类的原型，那么子类的原型、子类实例的对象也可以访问到父类的原型属性和方法，当然也包括父类构造器函数中复制的属性和方法。
上面说了这么多，有的同学可能一脸懵逼，结合上面的例子，我们简单分析一下：

但是这种类式继承有2个缺点。第一由于子类通过其原型prototype对父类实例化，继承了父类。所以说父类中的共有属性要是引用类型（Object，Function），就会在子类中被所有实例共用。比如说：

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

可以看到instance1的修改，改变了instance2的books属性，这个很容易埋坑。
第二个缺点，由于子类实现的继承是靠其原型prototype对父类的实例化实现的，因此在创建父类的时候，是无法向父类传递参数，因而在实例化父类的时候也无法对父类构造函数内的属性进行初始化。
为了解决类式继承的缺点，于是有了下面这个。
构造函数继承

//声明父类
function SuperClass(id){
    //引用类型共有属性
    this.books = ['JavaScript','html','css'];
    //值类型共有属性
    this.id = id;
}
//父类声明原型方法
SuperClass.prototype.showBooks = function(){
    console.log(this.books);
}
//声明子类
function SubClass(id){
    //继承父类
    SuperClass.call(this,id);
}

//测试代码
var instance1 = new SubClass(10);
var instance2 = new SubClass(11);

instance1.books.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

看了上面代码不难看出，关键就在于SuperClass.call(this,id)，这条语句是构造函数式继承的精华，由于call这个方法可以更改函数的作用环境，因此在子类中，对superClass调用这个方法，就是将子类中的变量在父类中执行一遍，由于父类中是给this绑定属性，因此子类自然也就继承了父类的共有属性。但是问题来了，这种类型的继承并没有涉及到原型prototype，所以上面代码instance1.showBooks()报错也就不奇怪了。
为了综合上面两种继承的优点，就有了下面的方式。
组合继承

//声明父类
function SuperClass(name){
    //值类型共有属性
    this.name = name;
    //引用型共有属性
    this.books = ['JavaScript','html','css'];
}
//父类原型方法
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);
}

//测试代码
var instance1 = new SubClass('CSDN',2013);
var instance2 = new SubClass('PHP',2008);
instance1.books.push('设计模式');
console.log(instance1.books);   //["JavaScript","html","css","设计模式"]
instance1.getName();    //CSDN
instance1.getTime();    //2013
console.log(instance2.books);   //["JavaScript","html","css"]
instance2.getName();    //PHP
instance2.getTime();    //2008

组合继承，顾名思义是将类式继承和构造函数继承组合在了一起，取其精华去其糟泊，一切看着都很完美。但是有一个问题存在，因为我们在使用构造函数继承时执行了一遍父类的构造函数，而在实现子类原型的类式继承时又调用了一遍父类构造函数。因此父类构造函数被调用了两遍。
那么还有更好的方式吗？答案是肯定的。