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实时监听文本框状态的方法
Apr 26 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
javascript实现简单页面倒计时
Mar 02 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中基本符号及使用方法
2010/03/23 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
轻松实现python搭建微信公众平台
2016/02/16 Python
python daemon守护进程实现
2016/08/27 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
python实现剪切功能
2019/01/23 Python
面料业务员岗位职责
2013/12/26 职场文书
党员承诺书内容
2014/03/26 职场文书
校园安全主题班会
2015/08/12 职场文书
《去年的树》教学反思
2016/02/18 职场文书
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库