JavaScript 实现继承的几种方式

更新时间：2021年02月19日 09:28:14 作者：him8

这篇文章主要介绍了JavaScript 实现继承的几种方式，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下

构造继承 (借助call实现)

实现

function Super(age){
 this.age = age;
 this.say = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
var child = new Child("min",23)
console.log(child instanceof Super); // false
console.log(child instanceof Child); // true

优点

(1) 可以实现多继承(call多个父类对象)
(2) 构造函数中可向父级传递参数

缺点

(1) 只能继承父类实例的属性和方法，不能继承原型上的属性和方法
(2) 实例并不是父类的实例，只是子类的实例

原型链继承 (借助原型链实现)

实现

function Super(){
 this.getName = function(){
 console.log(this.name)
 }
}
function Child(name){
	this.name = name;
}
Child.prototype = new Super(); // 这里可以传构造参数
Child.prototype.constructor = Child;
var child = new Child("min");
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

优点
(1) 父类原型属性与方法，子类都能访问到
(2) 实例是子类的实例，也是父类的实例

缺点
(1) 无法实现多继承 (2) 创建子类实例时，无法向父类构造函数传参

组合继承 (构造继承+原型链继承)

实现

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age);
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
Child.prototype = new Super(1); 
Child.prototype.constructor = Child;
var child = new Child("min",23);
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

优点
(1) 结合了构造+原型链继承的优点

缺点
(1) Child.prototype = new Super(); 多调用了一次，使得原型对象中存在一些不必要属性，如上面例子中age属性

寄生组合继承

实现

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
(function(){
 function Copy(){}
 Copy.prototype = Super.prototype;
 Child.prototype = new Copy();
})()
Child.prototype.constructor = Child;
var child = new Child("min",23);

备注
问：为什么没有直接使用 Child.prototype = Super.prototype;
答：Child.prototype.constructor = Child;关键代码，上面写Super.prototype 也会变(引用类型，指向同一地址)

优点
(1) 这应该是实现继承最完美的方案了，es6的extends关键字，在babel转换后代码也是通过这种方式实现的继承。

额外：借助(Object.create)

实现

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
Child.prototype = Object.create(Super.prototype,{
 constructor:{ // 构造函数修复
 value: Child
 }
})
var child = new Child("min",23);
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

以上就是JavaScript 实现继承的几种方式的详细内容，更多关于JavaScript 实现继承的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JS简单限制textarea内输入字符数量的方法
这篇文章主要介绍了JS简单限制textarea内输入字符数量的方法,涉及JavaScript响应鼠标及键盘事件处理textarea输入框字符的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
JavaScript中this的用法及this在不同应用场景的作用解析
由于其运行期绑定的特性，JavaScript 中的 this 含义要丰富得多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式，这篇文章主要给大家介绍了JavaScript中this的用法及this在不同应用场景的作用解析，一起看看吧
2017-04-04
$如何用JS获取带“\”字符串的中间值？$
如何用JS获取带“\”字符串的中间值？
如何用JS获取带“\”字符串的中间值？...
2007-02-02
JS中生成随机数的用法及相关函数
这篇文章主要为大家介绍了JS中生成随机数的用法，为大家提供了相关函数的使用方法，感兴趣的朋友可以参考一下
2016-01-01
JavaScript数组push方法使用注意事项
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。这篇文章主要介绍了JavaScript数组push方法使用注意,需要的朋友可以参考下
2017-10-10
Javascript如何实现对象扁平化实例详解
这篇文章主要给大家介绍了关于Javascript如何实现对象扁平化的扁平化处理简而言之就是对对象中的对象提取出来,放在一个对象里面,形象的说就是把儿子的后代当成自己的儿子,下面相关资料,需要的朋友可以参考下
2022-11-11
用JS实现的一个include函数
用JS实现的一个include函数...
2007-07-07
JavaScript绘制游戏地图并且操控人物移动
JavaScript开发小游戏,目标是使用JavaScript绘制简单的二维地图,采用二维数组存储地图信息,使用表格绘制地图,每个td单元格存储数据,使用JavaScript keyPress键盘事件监听WASD键,按键触发时人物做出相应操作,人物下一步碰撞到障碍物,终止人物运动
2023-10-10
仿豆瓣分页原型(Javascript版)
仿豆瓣分页原型(Javascript版)...
2007-04-04
JS中style.display和style.visibility的区别实例说明
下面的例子说明了这种区别：在这个例子中，divContent1和divContent2隐藏的时候用的是style.display=none，这时候，后面的div会向上移动，占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏，但是其隐藏后仍然占据原来的空间
2013-03-03