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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 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中加session验证)
2012/08/22 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
Python set集合类型操作总结
2014/11/07 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python卸载模块的方法汇总
2016/06/07 Python
python实现微信打飞机游戏
2020/03/24 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
会计学自荐信
2014/06/03 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python