原来JS可以这么实现继承
当我们在编写代码的时候,有一些对象内部会有一些方法(函数),如果将这些函数在构造函数内部声明会导致内存的浪费,因为实例化构造函数得到不同的实例对象,其内部都有同一个方法,但是占据了不同的内存,就存在内存浪费问题。于是乎我们就需要用到继承。
什么是继承?
通过某种方式让一个对象可以访问到另一个对象中属性和方法,我们将这种方法称之为继承(inheritance)
。
如果一个类B继承
自另一个类A,就把B称之为A的子类
,A称之为B的父类
或者超类
。
如何实现继承?
1、原型链继承
// 原型链的继承
SuperType.prototype.getSuperValue = function () {
return this.property;
}
function SuperType() {
this.property = true
}
Type.prototype = new SuperType();
function Type() {
this.typeproperty = false
}
console.log(Type.prototype);
var instance = new Type()
console.log(instance.getSuperValue()); // true
让SuperType的实例对象赋给Type的原型,Type就能继承到SuperType的属性和方法
优点:原型链继承容易上手,书写简单,父类可以复用,被多个子类继承。
缺点:会在子类实例对象上共享父类所有的引用类型实例属性,(子类改不动父类的原始类型),更改一个子类的引用属性,其他子类均受影响;子类不能改父类传参。
2、经典继承(伪造对象)
// 经典继承
SuperType.prototype.name = '寒月十九'
function SuperType(age) {
this.color = ['red', 'green', 'blue'],
this.age = age
}
function Type(age) {
SuperType.call(this,age)
}
var instance = new Type(18)
console.log(instance);
console.log(instance.color);
经典继承就是借助this的显示绑定,将SuperType的指向绑定到Type身上,使得我们可以直接访问到SuperType身上的属性。
优点:解决了原型链继承子类不能向父类传参的问题和原型共享的问题。
缺点:方法不能复用;子类继承不到父类原型上的属性,只能继承到父类实例对象上的属性。
3、组合继承(原型链继承 + 经典继承)
// 组合继承 (伪经典继承)
SuperType.prototype.sayName =function() {
console.log(this.name);
}
function SuperType(name) {
this.name = name,
this.color = ['red', 'green', 'blue']
}
function Type(age,name) {
this.age = age
SuperType.call(this,name)
}
Type.prototype = new SuperType()
Type.prototype.constructor = Type
//Type.prototype被替换了,所以要补充一个constructor属性,指向自身,这样new Type得到的实例对象就有constructor属性
Type.prototype.sayAge = function() {
console.log(this.age)
}
var instance = new Type(20,'寒月十九');
instance.sayAge();
组合继承就是将上面两种继承方式结合起来,先将SuperType的this指向显示绑定到Type,然后再替换Type的原型,再添加上构造器属性指向自身,使得new Type()得到的实例对象就具备构造属性,并且可以继承到SuperType的属性。
优点:解决了原型链继承和经典继承的缺点造成的影响。
缺点:每一次都会调用两次父类的构造函数,一次是在创建子类原型上,另一次是在子类构造函数内部。
4、原型式继承
(1)借助构造函数实现对象的继承
// 原型式继承
function object(obj) {
function newFn() {}
newFn.prototype = obj;
return new newFn();
};
var person = {
name: '寒月十九',
age: 20,
like: {
sport: 'coding'
}
};
let newObj = object(person);
(2)Object.create()
var person = {
name: '寒月十九',
age: 20,
like: {
sport: 'coding'
}
};
let newPerson = Object.create(person,{sex: 'boy'});
优点:不需要单独构建构造函数。
缺点:属性中的引用地址会在相关对象中共享。
5、寄生式继承
function createPerson(original) {
var clone = Object.create(original)
clone.say = function() { // 增强这个对像
console.log('hello');
}
return clone;
};
var person = {
name: '寒月十九',
age: 20,
like: {
sport: 'coding'
}
};
let newPerson =createPerson(person);
寄生式继承是原型式继承的加强版,它结合原型式继承和工厂模式,创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回对象。
优点:上手简单,不用单独创建构造函数。
缺点:寄生式继承给对象添加函数会导致函数难以重用,因此不能做到函数复用而效率降低;引用类型的属性始终都会被继承所共享。
寄生组合式继承
// 寄生组合式继承
SuperType.prototype.sayName = function() {
console.log(this.name);
};
SuperType.prototype.like = {
a: 1,
b: 2
};
function SuperType(name) {
this.name = name;
this.colors = ['red', 'blue', 'green']
};
function Type(name, age) {
this.age = age;
SuperType.call(this, name);
}
var anotherPrototype = Object.assign(Type.prototype, SuperType.prototype);
// anotherPrototype.constructor = Type
Type.prototype = anotherPrototype; // new SuperType()
寄生组合继承是为降低父类构造函数的开销。通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。
优点:高效,只调用一个次父构造函数,不会在原型上添加多余的属性,原型链还能保持不变;开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
缺点:代码较复杂。
class类继承
class Parent{
constructor(name) {
this.name = name;
this.hobbies = ["running", "basketball", "writting"];
}
getHobbies() {
return this.hobbies;
}
static getCurrent() { // 静态方法,只能类本身调用
console.log(this);
}
}
class Child extends Parent {
constructor(name) {
super(name);
}
}
var c1 = new Child('寒月十九');
var c2 = new Child('十九');
来源:juejin.cn/post/7173708454975471646