2022-03-15 [总结]JS继承的常见几种方式和优缺点:原型链继承,构造函数继承,组合继承,原型式继承,寄生式继承,寄生组合式继承,class继承

本文主要是介绍2022-03-15 [总结]JS继承的常见几种方式和优缺点:原型链继承,构造函数继承,组合继承,原型式继承,寄生式继承,寄生组合式继承,class继承，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

0.object.create

2022-03-14 Object.create的定义和用法,Object.create和new的区别

分类一:不使用Object.create的继承

1.原型链继承

原理:给原型对象增加一层指向

优缺点

• 优点:既能继承构造函数又能继承原型对象
• 缺点:消耗性能,增加读取时间;对参数的处理不友好,即不方便传参(若一个实例修改原型属性的值，则所有实例上的值都会改变)

格式和示例

/*目的:让Child的实例获得name属性和say()方法*/
// 构造函数Person
function Person() {this.name = 'zs';}
// 构造函数的原型上的方法
Person.prototype.say = function() { return "hello";};
// 1.原型链继承:将父类型的实例指向子类型的原型
function Child() {}
Child.prototype = new Person();
var c = new Child();
console.log(c.name, c.say());//zs hello

2.构造函数继承

原理:使用bind改变某个功能的this指向从而实现继承

优缺点

• 优点:简单方便,可以实现多继承
• 缺点:只能继承构造函数,不能继承原型

格式和示例

// 构造函数Person
function Person() {this.name = 'zs';}
// 构造函数的原型上的方法
Person.prototype.say = function() { return "hello";};
// 2.构造函数继承:通过将Person的this改成Child的this,来实现继承Person的属性与方法
function Child() {Person.bind(this)();}
var c = new Child();
console.log(c.name, c.say()); //zs 报错:不能继承构造函数的原型上的方法

3.组合继承(原型链+构造函数)

原型链继承和构造函数继承的缺点

• 原型链继承的缺点:引用类型的原型属性会被所有的实例共享
• 构造函数继承的缺点：不能继承原型

组合继承的原理改变this指向+原型对象

即:

• 使用call/apply继承父类构造器上的内容
• 使用原型继承来继承父类的原型

优缺点

• 优点:既能继承构造函数又能继承原型对象,可以实现多继承,传承方便,没有增加原型链
• 缺点:对参数的修改不友好(在继承parent的同时传参)

语法和示例

// 构造函数Person
function Person() {this.name = 'zs';}
// 构造函数的原型上的方法
Person.prototype.say = function() { return "hello";};
// 3.组合继承:使用call/apply继承父类构造器上的内容,使用原型继承来继承父类的原型
function Child() {}
Person.bind(this)();//用于继承构造函数上的属性
Child.prototype = new Person();//用于继承原型上的方法
var c = new Child();
console.log(c.name, c.say()); //zs hello

分类二:使用Object.create的继承

4.原型式继承

定义

原型式继承本质其实就是个浅拷贝，以一个对象为模板复制出新的对象

优缺点

优点：父类方法可以复用。
缺点：父类的引用属性会被所有子类实例共享子类构建实例时不能向父类传递参数

语法和示例:原型式继承是浅拷贝

/*原型式继承*/
function yuanxing(o) { //yuanxing是一个封装原型式继承的函数function G() {} //G是构造函数G.prototype = o; //把o作为构造函数G的原型对象return new G(); //返回一个构造函数new出来的实例对象
}
/*原型对象*/
var obj = { //obj作为原型对象skills: ['html', 'css']
};
/*实例对象*/
var obj1 = yuanxing(obj); //调用封装函数,进行原型式继承,并把G()new出来的实例对象赋给obj1==>如此,obj上的skills方法就被obj1继承
// 证明原型式继承是浅拷贝
var obj2 = yuanxing(obj);
obj2.skills.push("javascript");
console.log(obj1.skills); // ['html', 'css', 'javascript']

使用Object.create进行原型式继承

/*原型式继承*/
function yuanxing(o) { //yuanxing是一个封装原型式继承的函数function G() {} //G是构造函数G.prototype = o; //把o作为构造函数G的原型对象return new G(); //返回一个构造函数new出来的实例对象
}
/*原型对象*/
var obj = { //obj作为原型对象skills: ['html', 'css']
};
/*实例对象*/
var obj1 = yuanxing(obj); //调用封装函数,进行原型式继承,并把G()new出来的实例对象赋给obj1==>如此,obj上的skills方法就被obj1继承
// 证明原型式继承是浅拷贝
var obj2 = yuanxing(obj);
obj2.skills.push("javascript");
console.log(obj1.skills); // ['html', 'css', 'javascript']
//使用ES5新增的Object.create方法进行原型式继承<==不使用封装函数yuanxing
var obj3 = Object.create(obj);
obj3.skills.push("jQuery");
console.log(obj1.skills, obj3.skills); //4) ['html', 'css', 'javascript', 'jQuery']  4) ['html', 'css', 'javascript', 'jQuery']

5.寄生式继承

定义

寄生式继承就是将原型式继承再次封装,然后在对象上拓展新的方法,最后再把新对象返回

语法和实例

/*原型式继承*/
function yuanxing(o) { //yuanxing是一个封装原型式继承的函数function G() {} //G是构造函数G.prototype = o; //把o作为构造函数G的原型对象return new G(); //返回一个构造函数new出来的实例对象
}
/*寄生式继承*/
function jisheng(yObj) { //寄生式继承的步骤:var sObj = yuanxing(yObj); //step1:原型式继承:以yObj为原型对象,创建一个实例对象sObjsObj.say = function() { //step2:给这个新对象扩展新方法return `我的前端技能有:${this.skills}`; };return sObj;//step3:返回这个新对象
}
/*原型对象*/
var obj = { //obj作为原型对象skills: ['html', 'css']
};
/*实例对象*/
var obj1 = yuanxing(obj); //调用封装函数,进行原型式继承,并把G()new出来的实例对象赋给obj1==>如此,obj上的skills方法就被obj1继承
// 证明原型式继承是浅拷贝
var obj2 = yuanxing(obj);
obj2.skills.push("javascript");
console.log(obj1.skills); // ['html', 'css', 'javascript']
//使用ES5新增的Object.create方法进行原型式继承<==不使用封装函数yuanxing
var obj3 = Object.create(obj);
obj3.skills.push("jQuery");
console.log(obj1.skills, obj3.skills); //4) ['html', 'css', 'javascript', 'jQuery']  4) ['html', 'css', 'javascript', 'jQuery']
// 调用寄生式继承的封装函数
var obj4 = jisheng(obj);
console.log(obj4.say());//我的前端技能有:html,css,javascript,jQuery

6.寄生组合式继承(原型式+寄生式)

定义

通过借用构造函数来继承属性，
通过原型链的混成形式来继承方法。

基本思路

不必为了指定子类型的原型,而调用超类型的构造函数，我们所需要是超类型原型的一个副本而已。
本质上是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

优缺点:这是一种完美的继承方式。

寄生组合继承:可以解决组合继承会调用两次父类的构造函数,造成浪费的问题
因此避免了在原型上面创建多余的属性。
与此同时，原型链还能保持不变；
因此，还能正常使用instanceof和isPropertyOf()

语法和示例(重要)

// 1.定义父类型
function Person(name) {this.name = name;this.legNum = 2;
}
Person.prototype.sayHello = function() {console.log(`我叫${this.name}`);
};
// 2.定义继承方法
function inherit(subType, superType) {// 在new inheritFn时,将构造函数指向子类function inheritFn() {this.constructor = subType;}inheritFn.prototyp = superType.prototype;// 将子类的原型指向父类原型的一个副本subType.prototype = new inheritFn();
}
// 3.定义子类并实现继承
// 定义子类构造函数Son
function Son(name, age) {Person.call = (this, name); //借用构造函数this.age = age;
}
// 将子类Son的原型指向父类原型的一个副本
inherit(Son, Person); //注意:要执行该动作以后,才能在Son.prototype上定义方法
// Son的Prototype上定义sayAge方法
Son.prototype.sayAge = function() {console.log(`我今年${this.age}岁`);
};
// 定义另一个子类构造函数Daughter
function Daughter(name, sex) {Person.call(this, name); //借用构造函数this.sex = sex;
}
// 将子类Daughter的原型指向父类原型的一个副本
inherit(Daughter, Person);
// Daughter的Prototype上定义saySex方法
Daughter.prototype.saySex = function() {console.log(`我是${this.sex}生`);
};
// 4.输出结果
var s = new Son("李雷", 12);
console.log(s);
s.sayHello();
s.sayAge();
var d = new Daughter("韩梅梅", "女");
console.log(d);
d.sayHello();
d.saySex();

参考文章

https://blog.csdn.net/qq_42451979/article/details/125271820

分类三:class继承

7.ES6的class继承

步骤

• class通过关键字extends实现继承
• 子类在constructor方法中调用super方法

为什么必须要调用super方法？

这是因为这里的继承是先塑造父类，再塑造子类。
也就是先将父类的东西都拿过来之后，再进行子类的添加。
而super负责的就是将父类的东西拿过来。所以必须先调用super。

为什么super函数要放在最上面？

class的继承是先将父类拿过来再进行子类的添加，
如果想要给自身添加属性和方法，需要在调用call或者apply之后添加。
否则如果存在同名属性，后面的会覆盖前面的。

语法与示例

class Person {constructor(name, age) {this.name = namethis.age = age}say() {console.log('你好')}
}
class Son extends Person {
}
const s = new Son()
s.say() // 你好

这篇关于2022-03-15 [总结]JS继承的常见几种方式和优缺点:原型链继承,构造函数继承,组合继承,原型式继承,寄生式继承,寄生组合式继承,class继承的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---