聊聊JavaScript如何实现继承
聊聊JavaScript如何实现继承
娜姐
发布于 2022-05-13 06:29:01
发布于 2022-05-13 06:29:01
代码可运行
运行总次数：0
代码可运行
“继承”是面向对象编程里面经常提及到的概念，它的目的是实现代码复用。JavaScript并没有“类”的概念，那么，它如何实现继承呢？ （ES6有关键字class和extend，继承的语法与Java等面向对象语言类似，但是，ES6 class，只是JavaScript原型继承的语法糖而已）
1. 类式继承
关键点：通过构造函数实现继承。 父类：
function Parent(name) {
this.name = name || "parent";
}
Parent.prototype.say = function() {
return this.name;
}子类：
function Child() {}(1) 父类对象继承
Child.prototype = new Parent("child");
var child = new Child();
child.say(); // "child"特点：使用这种继承模式，子类不仅仅会继承父类原型上的方法/属性，还会继承父类自身的属性。
这种模式的缺点是，在初始化父类对象指向给子类原型时，并不确定父类构造函数的初始化参数（Child.prototype = new Parent("child");），而且，往往这些参数并不是子类需要的。
(2) 借用构造函数
改造子类：
function Child(){
Parent.apply(this, arguments);
}特点：使用这种继承模式，子类只会继承父类自身的属性。 缺点很明显，它无法从原型链中继承任何方法/属性。
(3) 共享原型
Child.prototype = Parent.prototype;这种方式的缺点是，子类原型和父类原型共享一个对象，那么，子类如果修改原型，必然会影响父类。
(4) 临时构造函数
function inherit(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
}特点：利用一个空函数F()充当子类和父类之间的代理，既可以实现父类原型方法/属性的继承，又可以在子类原型上继续扩展方法/属性。
一般，我们可以利用ES5提供的新方法Object.create()来实现此类继承。
Child.prototype = Object.create(Parent.prototype);2. 通过复制属性实现继承
复制属性分为浅拷贝和深拷贝。
浅拷贝不会复制对象类型，只会简单的将对象引用指向子类，代码如下：
function extend(parent, child) {
var key;
for(key in parent) {
if (parent.hasOwnProperty(key)){
child[key] = parent[key];
}
}
return child;
}深拷贝会做深度复制，如果某个属性为对象类型，那么，它会复制出该对象的属性，再拷贝给子类。代码如下：
function extendDeep(parent, child) {
var key;
for(key in parent) {
if (parent.hasOwnProperty(key)){
if (typeof parent[key] === 'object') {
child[key] = (parent[key].toString() === "[object Array]")? []:{};
extendDeep(parent[key], child[key]);
} else {
child[key] = parent[key];
}
}
}
return child;
}3. "借用方法"模式复用父类函数
如果不想实现父子之间的完全继承，仅仅期望子类实现父类中一个或多个方法，那么可以利用apply, call, bind来调用父类函数，实现复用。
代码如下：
parent.say.call(child, "hello, child!");小结
推荐采用“临时构造函数”模式实现继承。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-05-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
深入理解javascript中的继承机制 之 12种继承模式总结原型链法仅从原型继承临时构造器原型属性拷贝所有属性拷贝(浅拷贝)深拷贝原型继承法扩展与增强模式多重继承法寄生式继承借用构造函数：构造器于
推荐阅读
相关推荐
js继承
更多 >
腾讯云开发者
