JS继承方式
原型链继承
//定义一个父类
function Father(name) {
this.name = name;
this.age = 20;
}
Father.prototype.say = function () {
console.log(this.name);
}
//定义一个子类
function Child(name,age) {
this.name = name;
this.age = age
}
//最重要的一步,将父类的实例为子类的原型
Child.prototype = new Father();
let child1 = new Child('Marry',10);
let child2 = new Child('luccy',17);
缺点:
- 子类毕竟公用的是同一个父类,容易造成如果其中一个子类修改了原型上的内容,则其它的也会跟着一起更改
- 继承单一
- 新实例无法向父类实例,传参
特点: 继承了父类的构造函数当中的属性,也继承了父类原型上的属性
构造函数继承
//定义一个父类
function Father(name) {
this.name = name;
this.age = 20;
}
Father.prototype.say = function () {
console.log(this.name);
}
//定义一个子类
function Child(name,age) {
Father.call(this,'father');
this.name = name;
this.age = age
}
let child1 = new Child('Marry',10);
let child2 = new Child('luccy',17);
缺点:
- 没有办法继承父类原型上的内容
- 无法实现构造函数复用
- 每个新实例否有父类构造函数的副本
优点:
- 可以向父级构造函数进行传参
- 可以继承多个构造函数属性
组合继承(构造函数继承 + 原型链继承)
//定义一个父类
function Father(name) {
this.name = name;
this.age = 20;
}
Father.prototype.say = function () {
console.log(this.name);
}
//定义一个子类
function Child(name,age) {
Father.call(this,'father');
this.name = name;
this.age = age
}
Child.prototype = new Father();
let child1 = new Child('Marry',10);
let child2 = new Child('luccy',17);
特点:
- 既可以继承父类的原型上的属性,又可以继承父类构造函数当中的属性
- 可继承,可复用
缺点: 毕竟调用了两次父类的构造函数,会有性能上的影响
原型式继承
//定义一个父类
function Father(name) {
this.name = name;
this.age = 20;
}
Father.prototype.say = function () {
console.log(this.name);
}
//这里是核心步骤
function content(obj) {
function F() {};
F.prototype = obj;
return new F();
}
var sup = content(new Father())
缺点:
- 所有实例都会继承原型上的属性
- 无法实现复用(新实例属性都是后添加的)
寄生式继承
//定义一个父类
function Father(name) {
this.name = name;
this.age = 20;
}
Father.prototype.say = function () {
console.log(this.name);
}
function content(obj) {
function F() {};
F.prototype = obj;
return new F();
}
function a() {
var sup = content(new Father());
sup.name = 'Tom'
return sup;
}
var child1 = a();
缺点: 没有用到原型,无法复用
寄生组合式
函数的原型等于另一个实例
在函数中用apply或者call引入另一个构造函数
//定义一个父类
function Father(name) {
this.name = name;
this.age = 20;
}
Father.prototype.say = function () {
console.log(this.name);
}
function content(obj) {
function F() {};
F.prototype = obj;
return new F();
}
function Child(name) {
Father.call(this,'father');
this.name = name;
}
var sup = new Father();
Child.prototype = content(sup);
sup.constructor = Child;
var child1 = new Child('Marry')