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 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
js实现图片上传到服务器和回显
Jan 19 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实现多图片上传类实例
2014/07/26 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
搭建vue开发环境
2018/07/19 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python注释详解
2016/06/01 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
高中毕业自我鉴定范文
2013/10/02 职场文书
在校实习生求职信
2014/06/18 职场文书
欢迎领导标语
2014/06/27 职场文书
教师党员个人总结
2015/02/10 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
运动会报道稿大全
2015/07/23 职场文书
自信主题班会
2015/08/14 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android