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 来操作字符串(一些字符串函数)
Feb 15 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
详解如何修改 node_modules 里的文件
May 22 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自动加载的两种实现方法
2010/06/21 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
javascript学习之json入门
2016/12/22 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
在Mac OS上搭建Python的开发环境
2015/12/24 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
自我介绍演讲稿
2014/01/15 职场文书
学校安全生产承诺书
2014/05/23 职场文书
追悼会答谢词
2015/01/05 职场文书
法院执行局工作总结
2015/08/11 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS