JS继承 笔记


Posted in Javascript onJuly 13, 2011

JS继承
JavaScript中没有类的概念,与类相关的继承的概念更是无从谈起,但是我们可以通过特殊的语法来

模拟面向对象语言中的继承。
在JS中模拟继承有多种方式,其中寄生组合模式是一种比较容易简单的模拟继承模式,下面我们就来

介绍一下用寄生组合模式模拟继承。
JS的继承包括属性的继承和方法的继承,他们分别通过不同的方法来实现。
1属性的继承
属性的继承通过改变函数的执行环境来实现的。而改变函数的执行环境可以使用call()和apply()两种

方法来实现。
我们首先创建一个Animal“类”(因为JS中没有类的概念,这里只是一个模拟,它实际上只是一个

Function函数对象)。

function Animal(name){ 

 this.name=name; 

}

再创建一个Lion“类”,“继承”于Animal
function Lion(){ 

 Animal.apply(this, ["狮子"]); 

 }

这里使用了Animal的apply方法,把Animal的执行环境改成Lion被调用时的执行环境。
这里要解释一下,我们要想使用Lion这个“类”,通常需要new一个Lion。如:

var l = new Lion();
而new关键字是十分伟大的,在上段代码中,new关键字完成了以下几项工作:

1)开辟堆空间,以准备存储Lion对象

2)修改Lion对象本身的执行环境,使得Lion函数的this指向了Lion函数对象本身。

3)调用Lion“类”的“构造函数”,创建Lion对象

4)将Lion函数对象的堆地址赋值给变量l,这个时候l就指向了这个Lion函数对象
所以经过new关键字以后Animal.apply(this, ["狮子"])中的this已经指向了Lion函数对象本身了,所

以这段代码就将Animal函数的执行环境改变成了Lion函数中,相当于以下代码:

function Lion(){ 

function Animal(name){ 

this.name=name; 

 } 

}

而此时的this已经是Lion函数对象了所以上段代码进一步相当于:
function Lion(){ 

 this.name=name; 

}

这样就给Lion函数对象添加了name属性,也模拟了Lion函数继承于Animal函数的效果。
2方法的继承
在JS中每一个“类”(即函数,注意不是函数对象)都有一个prototype属性,prototype表示该函数

的原型,也表示一个类的成员的集合(通常是方法的集合)。我们可以通过函数的prototype属性来实现方

法的继承。
我们同样首先创建一个Animal“类”:

function Animal(name){ 

this.name=name; 

}

给Animal的原型中加入一个eat方法:
Animal.prototype.eat=function(){ 

 alter("我能吃!~"); 

}

创建一个Lion“类”,同时完成对Animal“类”的属性的继承
function Lion(){ 
Animal.apply(this, ["狮子"]); 

}

注意下面的代码,我们马上要完成方法的继承了
Lion.prototype=new Animal();
这样就把一个Animal函数对象储存在了Lion的原型中了,Lion也就包含了Animal中的方法了(其实也

包含了属性)。这样就模拟了Lion函数对Animal的继承。

Javascript 相关文章推荐
基于JS实现的倒计时程序实例
Jul 24 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
微信小程序实现上传图片功能
May 28 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
$.format,jquery.format 使用说明
Jul 13 #Javascript
jquery中:input和input的区别分析
Jul 13 #Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 #Javascript
js 判断脚本加载完毕的代码
Jul 13 #Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 #Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 #Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 #Javascript
You might like
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
迟到检讨书5000字
2014/01/31 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript