JS的6种 继承方式

面向对象编程 3 大特性:

封装、继承、多态

继承属于其中一种,继承 又分为 6种 方式:

1. 类式继承
2. 构造函数继承
3. 组合继承
4. 原型式继承
5. 寄生式继承
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 设计模式》

后面会继续更新,敬请期待!