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中检测变量的类型的代码
Dec 28 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
js编写的treeview使用方法
Nov 11 Javascript
基于vue实现分页效果
Nov 06 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
JavaScript实现tab栏切换效果
Mar 16 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伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
js 动态选中下拉框
2009/11/26 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
vue按需加载实例详解
2019/09/06 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
使用Python实现画一个中国地图
2019/11/23 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
分享一个python的aes加密代码
2020/12/22 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
自我介绍演讲稿范文
2014/08/21 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
欢迎词怎么写
2015/01/23 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
项目投资意向书范本
2015/05/09 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL