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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
javascript实现日期按月份加减
May 15 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
js事件触发操作实例分析
Jun 21 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
React实现全选功能
Aug 25 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 之Section与Cookie使用总结
2012/09/14 PHP
php获取随机数组列表的方法
2014/11/13 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python正确重载运算符的方法示例详解
2017/08/27 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python读写压缩文件的方法
2020/07/30 Python
python空元组在all中返回结果详解
2020/12/15 Python
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
电气工程和自动化自荐信范文
2013/12/25 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
宣传工作经验材料
2014/06/02 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书