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 动态添加事件代码
Nov 30 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
JavaScript闭包原理与用法学习笔记
May 29 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
django的settings中设置中文支持的实现
2019/04/28 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
微型企业创业投资计划书
2014/01/10 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
法律六进活动方案
2014/03/13 职场文书
质量保证书范本
2014/04/29 职场文书
县级文明单位申报材料
2014/05/23 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android