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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
JavaScript实现简单图片切换
Apr 29 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
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php格式化json函数示例代码
2016/05/12 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
js函数排序的实例代码
2013/07/01 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python制作小说爬虫实录
2017/08/14 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python pymongo模块常用操作分析
2018/09/01 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
《美丽的小路》教学反思
2014/02/26 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
表扬稿范文
2015/01/17 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
java如何实现socket连接方法封装
2021/09/25 Java/Android
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python