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 loading加载效果实现代码
Nov 24 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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 日志缩略名的创建函数代码
2010/05/26 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
基于Python __dict__与dir()的区别详解
2017/10/30 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
策划创业计划书
2014/02/06 职场文书
2014年三万活动总结
2014/04/26 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
安全生产专项整治方案
2014/05/06 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android