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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
实现无刷新联动例子汇总
May 20 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
JS中判断null的方法分析
Nov 21 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP实现递归无限级分类
2015/10/22 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
拖动时防止选中
2017/02/03 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
关于python中的xpath解析定位
2020/03/06 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
手机业务员岗位职责
2013/12/13 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
质量承诺书格式
2014/05/20 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
MySQL创建表操作命令分享
2022/03/25 MySQL
海弦WR-800F
2022/04/05 无线电
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server