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 相关文章推荐
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
详解Document.Cookie
Dec 25 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
JS如何判断json是否为空
Jul 06 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
vue高德地图之玩转周边
Jun 16 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
如何使用php实现评委评分器
2015/07/31 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
flexigrid 参数说明
2010/11/23 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
JS实现上传图片实时预览功能
2017/05/22 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python实现kmp算法的实例代码
2019/04/03 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python基于template实现字符串替换
2020/11/27 Python
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
机电一体化自荐信
2013/12/10 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
教育教学工作反思
2016/02/24 职场文书
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL