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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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完整的日历类(CLASS)
2006/11/27 PHP
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP数组函数知识汇总
2016/05/12 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
nodejs微信开发之接入指南
2019/03/17 NodeJs
js实现特别简单的钟表效果
2020/09/14 Javascript
python实现中文输出的两种方法
2015/05/09 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
python pillow库的基础使用教程
2021/01/13 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
农业开发项目建议书
2014/05/16 职场文书
低碳环保口号
2014/06/12 职场文书
民事授权委托书范文
2014/08/02 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技