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 相关文章推荐
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
js分页代码分享
Apr 28 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 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的五种设计模式
2012/09/05 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
python监控文件或目录变化
2016/06/07 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Python中的函数作用域
2018/05/07 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
自荐书模板
2013/12/15 职场文书
百日安全活动总结
2014/05/04 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
活动总结书怎么写
2015/05/11 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js