面向对象的JavaScript之继承(一) 类式继承

引言

面向对象的编程语言都具继承这一机制,而 JavaScript 是基于原型(Prototype)面向对象程序设计,所以它的实现方式也是基于原型(Prototype)实现的.

继承的方式

• 类式继承

• 构造函数继承

• 组合继承

• 原型式继承

• 寄生式继承

• 寄生组合式继承

1.类式继承

---

//声明父类
function SuperClass(){
    //值类型
    this.superValue = true;
    //引用类型
    this.book = ['c','java','htnl']
}

//为父类添加方法
SuperClass.prototype.getSuperValue =function(){
    return this.superValue;
}

//声明子类
function SubClass(){
    this.subValue = false;
}
//继承父类
SubClass.prototype = new SuperClass();

//为子类添加方法
SubClass.prototype.getSubValue = function(){
    return this.subValue;
}

//测试
var a = new SubClass(); 
var b = new SubClass(); 
console.log(a.getSubValue()); //false
console.log(a.getSuperValue());  //true

console.log(a.book);//["c", "java", "htnl"]
console.log(b.book);//["c", "java", "htnl"]
a.book.push('css');
console.log(a.book);//["c", "java", "htnl", "css"]
console.log(b.book);//["c", "java", "htnl", "css"]

console.log(a.getSuperValue())//true
console.log(b.getSuperValue())//true
a.superValue = 'a';

console.log(a.getSuperValue())//a
console.log(b.getSuperValue())//true

console.log(a.getSubValue())//false
console.log(b.getSubValue())//false
a.subValue = 'sub';

console.log(a.getSubValue())//sub
console.log(b.getSubValue())//false

通过测试可以得知类式继承有如下特点:

1. 通过子类原型继承父类的实例 实现继承.

   子类实例的原型都是父类实例,所以 a b 都是用的是 父类的实例.所以它的属性共用(值类型,引用类型)。那你们肯定会问：为什么book 共用，而 subValue 没有共用呢，下面就给你解释，请看2
   

2. 引用类型是共用的,值类型是私用的。

   其实：值类型按理说应该和值类型一样，都是共用的，但是因为 this 的原因，this.superValue寻值时由近到远，先寻找 a，若 a 没有则寻找 a 的原型`prototype`,一直往上,若没有则返回`"undefined"`,这样你就知道为什么给a.book.push('css'); 之后 b.book 也发生了改变,因为它是寻找到原型上的 book 值,而a.superValue = 'a'; 则直接给 a 添加了个 superValue 属性,而没有去 原型`prototype`的superValue赋值,则输出的时候也是就近.
   

---

下一节讲解 面向对象的JavaScript之继承(二) 构造函数继承

参考

• 个人博客

• JavaScript 设计模式 --- 张容铭 著

注

本人对类式继承的一点点理解,若是那里解释的有问题,请多指教,谢谢!