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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
JS定时器实例
Apr 17 Javascript
js简单实现交换Li的值
May 22 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
$.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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python isinstance函数介绍
2015/04/14 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
类如何去实现接口
2013/12/19 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
给领导的检讨书
2014/02/16 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
致青春观后感
2015/06/09 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
JavaScript实现优先级队列
2021/12/06 Javascript
Python requests用法和django后台处理详解
2022/03/19 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android