JS的6种 继承方式
面向对象编程 3 大特性:
封装、继承、多态
继承属于其中一种,继承 又分为 6种 方式:
- 类式继承
- 构造函数继承
- 组合继承
- 原型式继承
- 寄生式继承
- 寄生组合式继承
一、类式继承
// 父类
function Fth() {
this.name = ['shimh']
}
Fth.prototype.getName = function() {
return this.name
}
// 子类
function Son() {}
// 子类继承父类实例子
Son.prototype = new Fth()
/*--------------------使用继承-------------------------*/
_son1 = new Son()
_son2 = new Son()
console.log(_son1.getName()) // ["shimh"]
_son1.name.push('zhangdan')
console.log(_son1.getName()) // ["shimh", "zhangdan"]
console.log(_son2.getName()) // ["shimh", "zhangdan"]
子类成功继承了父类的属性,但是给_son1的name数组添加值,_son2也被添加了
二、构造函数继承
// 构造函数继承
// ---声明父类---
function Super (id) {
// 引用类型共有属性
this.me = ['shimh','web','beijing']
// 值类型共有属性
this.id = id
}
// 父类声明原型方法
Super.prototype.showBooks = function () {
console.log(this.me)
}
// ---声明子类---
function Foo (id) {
// 继承父类
Super.call(this, id)
}
// 创建第一个子类的实例
var inst1 = new Foo(1)
// 创建第二个子类的实例
var inst2 = new Foo(2)
// ---测试---
inst1.me.push('构造函数')
console.log(inst1.me) // ['shimh','web','beijing','构造函数']
console.log(inst1.id) // 1
console.log(inst2.me) // ['shimh','web','beijing']
console.log(inst2.id) // 2
Super.call(this, id) 这条 语句 是构造函数继承的精华
以上命名标准及编程思路源自《JavaScript 设计模式》
后面会继续更新,敬请期待!