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的遍历同id元素 并响应事件的代码
Jun 14 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
js实现导航跟随效果
Nov 17 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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/11/24 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
php文件系统处理方法小结
2016/05/23 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
js实现日历
2020/11/07 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
python利用微信公众号实现报警功能
2018/06/10 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
django使用JWT保存用户登录信息
2020/04/22 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
python中xlutils库用法浅析
2020/12/29 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
装修设计师求职信
2014/02/26 职场文书
环保建议书作文
2014/03/12 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL