JS继承-ES6-基于 class 实现继承
mdn 类
阮一峰 ES6-class
mdn-super
ES6中推出了class
类,是用来创建对象的模板。
class
可以看作是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
class
核心语法:
MDN-类
// 定义类
class Person {// 实例属性namefood// 构造方法,类似于构造函数,new的时候会调用,内部的this就是实例化的对象constructor(name, food) {this.name = namethis.food = food}// 实例方法sayHi() {console.log(`你好,我叫${this.name},我喜欢吃${this.food}`)}
}
const p = new Person('小黑', '西蓝花')
p.sayHi()
总结:
class核心语法:
- 通过
class 类名{}
的形式来定义类 - 内部直接写实例属性,可以设置默认值
- 实例方法的添加方式为
方法名(){}
- 构造函数通过
constructor
进行添加 - 通过
new 类名()
创建实例,会调用构造函数constructor
class Person{namefood='西兰花炒蛋'constructor(name){this.name=name}sayHi(){console.log('你好,我叫:',this.name)}
}
class 实现继承
- 子类通过 extends 继承父类
- 子类构造函数中通过 super 调用父类构造函数
// 在上一份代码的基础上继续编写下面代码
class Student extends Person {songconstructor(name, food, song) {// 子类构造函数使用this以前必须调用supersuper(name, food)this.song = song}// 添加方法sing() {console.log(`我叫${this.name},我喜欢唱${this.song}`)}
}
const s = new Student('李雷', '花菜', '孤勇者')
s.sayHi()
s.sing()
总结:
class实现继承
- 子类通过
extends
继承继承父类 - 子类如果需要重新定义构造函数,必须在内部通过
super
关键字调用父类的构造函数
class 私有属性,静态属性和方法
- 私有属性 / 方法
- 静态属性 / 方法
class Person {constructor(name) {this.name = name}// 通过#作为前缀添加的属性会变为私有// 私有属性#secret = '我有一个小秘密,就不告诉你'// 私有方法#say() {// 私有属性可以在console.log('私有的say方法')}info() {// 在类的内部可以访问私有属性调用私有方法console.log(this.#secret)this.#say()}// 通过 static定义静态属性/方法static staticMethod() {console.log('这是一个静态方法')console.log(this)}static info = '直立行走,双手双脚'
}const p = new Person('jack')
console.log(p)
// 外部无法访问 点语法访问直接报错,通过[]无法动态获取
console.log(p['#secret'])
p.info()
// 通过类访问静态属性/方法
Person.staticMethod()
console.log(Person.info)
总结:
class 语法补充
- class中私有属性/方法
- 定义和使用时需要使用关键字
#
- 私有属性只能在类的内部使用,外部无法使用(代码中)
- Chrome的控制台中为了方便调试,可以直接访问
- 定义和使用时需要使用关键字
- class中静态属性/方法
- 定义和使用时需要使用关键字
static
- 通过类访问
- 静态方法中的
this
是类
- 定义和使用时需要使用关键字
JS继承-ES5-基于原型和构造函数实现继承
ES5-寄生组合式继承
所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。
- 组合式继承:借用构造函数,原型链
- 寄生:父类的原型中,有子类的构造函数
其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。
核心步骤:
- 通过构造函数来继承属性
- 通过原型链来继承方法
// 继承原型函数
function inheritPrototype(son, parent){const prototype = object.create(parent.prototype)prototype.constructor = sonson.prototype = prototype
}// 父类构造函数
function Parent(name) {this.name = namethis.foods = ['西蓝花', '西葫芦', '西红柿']
}Parent.prototype.sayHi = function () {console.log(this.name, `我喜欢吃,${this.foods}`)
}// 子类借用父类的构造函数,将 this,name 参数传递给父类
function Son(name, age) {Parent.call(this, name)this.age = age
}
// 完成原型继承
inheritPrototype(Son,Parent)
// 可以继续在原型上添加属性/方法
Son.prototype.sayAge = function () {console.log('我的年龄是', this.age)
}const son1 = new Son('jack', 18)
const son2 = new Son('rose', 16)
总结:
ES5-寄生组合式继承
- 寄生组合式继承的核心步骤是:通过构造函数来继承属性,通过原型链来继承方法
- 寄生组合式继承和组合式继承的区别是:原型链的继承并没有调用父类的构造函数,而是直接基于父类的原型创建一个新副本实现继承