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关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 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+DBM的同学录程序(3)
2006/10/09 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
JS模板实现方法
2013/04/03 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python实现简单名片管理系统
2018/11/30 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
Weblogc domain问题
2014/01/27 面试题
庆祝教师节演讲稿
2014/09/03 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
通报表扬范文
2015/01/17 职场文书
承诺函格式模板
2015/01/21 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书