一:原型链继承
JavaScript的原型继承实现方式就是:
1.定义新的构造函数,并在内部用call()调用希望“继承”的构造函数,并绑定this;
2.借助中间函数F实现原型链继承,最好通过封装的inherits函数完成;
3.继续在新的构造函数的原型上定义新方法。
function Student (props) {
this.name = props.name || 'unnamed';
}
Student.prototype.hi = function () {
alert(`hi ${this.name}~`);
}
function PrimaryStudent (props) {
Student.call(this, props):
this.grade = props.grade || 1
}
// 实现继承的函数inherits
function inherits (Child, Parent) {
var F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
// 实现原型继承链:
inherits (PrimaryStudent, Student);
// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
return this.grade;
}
其实就是修改原型链为:
new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null
二: ES6 class继承
新的关键字class从ES6开始正式被引入到JavaScript中。class的目的就是让定义类更简单
class Student {
constructor (name) {
this.name = name;
}
hi () {
alert(`hi ${this.name}~`)
}
}
// 用class来定义对象的一个好处是继承方便,直接使用关键字extends
class PrimaryStudent extends Student {
constructor (name, grade) {
super(name); // 使用super调用父类的构造函数
this.grade = grade;
}
myGrade () {
alert('I am at grade ' + this.grade);
}
}
// 注意: 不是所有的主流浏览器都支持ES6的class 一定要现在就用上,就需要Babel工具把class代码转换为传统的prototype代码