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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
js微信支付实现代码
2016/12/22 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
js禁止表单重复提交
2017/08/29 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
python读取xml文件方法解析
2020/08/04 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
UNIX文件系统常用命令
2012/05/25 面试题
事业单位竞聘上岗实施方案
2014/03/28 职场文书
《恐龙》教学反思
2014/04/27 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
python blinker 信号库
2022/05/04 Python
Rust中的Struct使用示例详解
2022/08/14 Javascript