聊聊JavaScript如何实现继承及特点

站长资源 2024/11/26 佚名

2 0 1

“继承”是面向对象编程里面经常提及到的概念，它的目的是实现代码复用。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]")"借用方法"模式复用父类函数
如果不想实现父子之间的完全继承，仅仅期望子类实现父类中一个或多个方法，那么可以利用apply, call, bind来调用父类函数，实现复用。


代码如下：


parent.say.call(child, "hello, child!");



小结
推荐采用“临时构造函数”模式实现继承。以上所述是小编给大家介绍的JavaScript如何实现继承，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

javascript,实现继承,javascript继承方式

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“聊聊JavaScript如何实现继承及特点”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

聊聊JavaScript如何实现继承及特点

js时间查询插件使用详解

js简单实现网页换肤功能

评论“聊聊JavaScript如何实现继承及特点”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接