脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 实现继承

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

 更新时间：2017年04月07日 10:06:55   作者：娜姐聊前端  
“继承”是面向对象编程里面经常提及到的概念，它的目的是实现代码复用。这篇文章主要介绍了聊聊JavaScript如何实现继承及特点，有兴趣的可以了解一下。

“继承”是面向对象编程里面经常提及到的概念，它的目的是实现代码复用。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!");

小结

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

您可能感兴趣的文章:

相关文章

  • Javascript es7中比较实用的两个方法示例

    Javascript es7中比较实用的两个方法示例

    这篇文章主要给大家分享了关于Javascript es7中比较实用的两个方法示例，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-07-07
  • 用apply让javascript函数仅执行一次的代码

    用apply让javascript函数仅执行一次的代码

    有时候我们只想要让某些脚步函数执行一次就算完成任务了。如何实现这种功能呢？简单模仿下面这段就可以轻松搞定了
    2010-06-06
  • js监听input输入框值的实时变化实例

    js监听input输入框值的实时变化实例

    下面小编就为大家带来一篇js监听input输入框值的实时变化实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Javascript(es2016) import和require用法和区别详解

    Javascript(es2016) import和require用法和区别详解

    本篇文章主要介绍了Javascript(es2016) import和require用法和区别详解，具有一定的参考价值，有兴趣的可以了解下
    2017-08-08
  • 详解JavaScript原生封装ajax请求和Jquery中的ajax请求

    详解JavaScript原生封装ajax请求和Jquery中的ajax请求

    在本篇文章中我们总结了关于JavaScript原生封装ajax请求和Jquery中的ajax请求的知识点内容，需要的朋友们学习参考下。
    2019-02-02
  • js编写选项卡效果

    js编写选项卡效果

    这篇文章主要为大家详细介绍了js编写选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 前端页面在移动设备上显示不正常的原因及解决方案

    前端页面在移动设备上显示不正常的原因及解决方案

    当页面在移动设备上显示不正常时,通常是由于布局、样式或响应式设计设置不当所引起的,移动设备的屏幕尺寸、分辨率和交互方式与桌面设备有很大的不同,本文将详细介绍常见的导致页面在移动设备上显示不正常的原因,以及如何解决这些问题,需要的朋友可以参考下
    2024-09-09
  • JavaScript下一版本标准ES6的Set集合使用详解

    JavaScript下一版本标准ES6的Set集合使用详解

    ES6：全称ECMAScript 6.0，是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。今天我们就来学习一下ES6的Set集合的使用
    2023-02-02
  • 图片上传之FileAPI与NodeJs

    图片上传之FileAPI与NodeJs

    本文主要介绍了使得我们处理图片上传更加简单的方法FileAPI。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • js实现圆形显示鼠标单击位置

    js实现圆形显示鼠标单击位置

    这篇文章主要为大家详细介绍了js实现圆形显示鼠标单击位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论