JS实现面向对象继承的5种方式分析


Posted in Javascript onJuly 21, 2018

本文实例讲述了JS实现面向对象继承的5种方式。分享给大家供大家参考,具体如下:

js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式

1. 使用对象冒充实现继承(该种实现方式可以实现多继承)

实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

function Parent(firstname)
{
  this.fname=firstname;
  this.age=40;
  this.sayAge=function()
  {
    console.log(this.age);
  }
}
function Child(firstname)
{
  this.parent=Parent;
  this.parent(firstname);
  delete this.parent;
  this.saySomeThing=function()
  {
    console.log(this.fname);
    this.sayAge();
  }
}
var mychild=new Child("李");
mychild.saySomeThing();

2. 采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)

实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

function Parent(firstname)
{
  this.fname=firstname;
  this.age=40;
  this.sayAge=function()
  {
    console.log(this.age);
  }
}
function Child(firstname)
{
  this.saySomeThing=function()
  {
    console.log(this.fname);
    this.sayAge();
  }
  this.getName=function()
  {
    return firstname;
  }
}
var child=new Child("张");
Parent.call(child,child.getName());
child.saySomeThing();

3. 采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)

实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

function Parent(firstname)
{
  this.fname=firstname;
  this.age=40;
  this.sayAge=function()
  {
    console.log(this.age);
  }
}
function Child(firstname)
{
  this.saySomeThing=function()
  {
    console.log(this.fname);
    this.sayAge();
  }
  this.getName=function()
  {
    return firstname;
  }
}
var child=new Child("张");
Parent.apply(child,[child.getName()]);
child.saySomeThing();

4. 采用原型链的方式实现继承

实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承

function Parent()
{
  this.sayAge=function()
  {
    console.log(this.age);
  }
}
function Child(firstname)
{
  this.fname=firstname;
  this.age=40;
  this.saySomeThing=function()
  {
    console.log(this.fname);
    this.sayAge();
  }
}
Child.prototype=new Parent();
var child=new Child("张");
child.saySomeThing();

5. 采用混合模式实现继承

function Parent()
{
  this.sayAge=function()
  {
    console.log(this.age);
  }
}
Parent.prototype.sayParent=function()
{
  alert("this is parentmethod!!!");
}
function Child(firstname)
{
  Parent.call(this);
  this.fname=firstname;
  this.age=40;
  this.saySomeThing=function()
  {
    console.log(this.fname);
    this.sayAge();
  }
}
Child.prototype=new Parent();
var child=new Child("张");
child.saySomeThing();
child.sayParent();

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
Vue+Django项目部署详解
May 30 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 #Javascript
vue项目中添加单元测试的方法
Jul 21 #Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 #Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
浅谈vue父子组件怎么传值
Jul 21 #Javascript
You might like
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
在线游戏大家来找茬II
2006/09/30 Javascript
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
小时代观后感
2015/06/10 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
JavaScript文档对象模型DOM
2021/11/20 Javascript
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript