• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 聊聊JavaScript如何实现继承及特点

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

作者:娜姐聊前端 字体:[增加 减小] 来源:互联网 时间:2017-05-11

娜姐聊前端通过本文主要向大家介绍了聊聊,吴聊聊,聊聊语音官方下载,股市聊聊吧,廖英强股市聊聊吧等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

“继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。JavaScript并没有“类”的概念,那么,它如何实现继承呢?

(ES6有关键字class和extend,继承的语法与Java等面向对象语言类似,但是,ES6 class,只是JavaScript原型继承的语法糖而已)

1. 类式继承

关键点:通过构造函数实现继承。

父类:

function Parent(name) {
 this.name = name || "parent";
}
Parent.prototype.say = function() {
 return this.name;
}
</div>

子类:

function Child() {}
</div>

(1) 父类对象继承

Child.prototype = new Parent("child");

var child = new Child();
child.say(); // "child"
</div>

特点:使用这种继承模式,子类不仅仅会继承父类原型上的方法/属性,还会继承父类自身的属性。

这种模式的缺点是,在初始化父类对象指向给子类原型时,并不确定父类构造函数的初始化参数(Child.prototype = new Parent("child");),而且,往往这些参数并不是子类需要的。

(2) 借用构造函数

改造子类:

function Child(){
 Parent.apply(this, arguments);
}
</div>

特点:使用这种继承模式,子类只会继承父类自身的属性。

缺点很明显,它无法从原型链中继承任何方法/属性。

(3) 共享原型

Child.prototype = Parent.prototype;
</div>

这种方式的缺点是,子类原型和父类原型共享一个对象,那么,子类如果修改原型,必然会影响父类。

(4) 临时构造函数

function inherit(Child, Parent) {
 var F = function(){};
 F.prototype = Parent.prototype;
 Child.prototype = new F();
}
</div>

特点:利用一个空函数F()充当子类和父类之间的代理,既可以实现父类原型方法/属性的继承,又可以在子类原型上继续扩展方法/属性。

一般,我们可以利用ES5提供的新方法Object.create()来实现此类继承。

Child.prototype = Object.create(Parent.prototype);
</div>

2. 通过复制属性实现继承

复制属性分为浅拷贝和深拷贝。

浅拷贝不会复制对象类型,只会简单的将对象引用指向子类,代码如下:

function extend(parent, child) {
 var key;
 for(key in parent) {
  if (parent.hasOwnProperty(key)){
   child[key] = parent[key];
  }
 }
 return child;
}
</div>

深拷贝会做深度复制,如果某个属性为对象类型,那么,它会复制出该对象的属性,再拷贝给子类。代码如下:

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;
}
</div>

3. "借用方法"模式复用父类函数

如果不想实现父子之间的完全继承,仅仅期望子类实现父类中一个或多个方法,那么可以利用apply, call, bind来调用父类函数,实现复用。

代码如下:

parent.say.call(child, "hello, child!");
</div>

小结

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 聊聊JavaScript如何实现继承及特点
  • 如何解决每次向后台发起请求时判断用户是否处于登录状态?

相关文章

  • 2017-05-11老生常谈angularjs中的$state.go
  • 2017-05-11利用Node.js+Koa框架实现前后端交互的方法
  • 2017-05-11canvas 实现中国象棋
  • 2017-05-11Nodejs实现短信验证码功能
  • 2017-05-11关于angular js_$watch监控属性和对象详解
  • 2017-05-11AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
  • 2017-05-11BootStrap与Select2使用小结
  • 2017-05-11Bootstrap组合上、下拉框简单实现代码
  • 2017-05-11正则验证小数点后面只能有两位数的方法
  • 2017-05-11vue.js实现含搜索的多种复选框(附源码)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 彻底学会Angular.js中的transclusion
    • JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
    • 浅谈Node.js轻量级Web框架Express4.x使用指南
    • Ajax跨域实现代码(后台jsp)
    • Javascript 两种刷新方法以及区别和适用范围
    • easyui-edatagrid.js实现回车键结束编辑功能的实例
    • 写jQuery插件时的注意点
    • 微信小程序登录态控制深入分析
    • 详解vue之页面缓存问题(基于2.0)
    • JavaScript校验Number(4,1)格式的数字实例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有