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 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
Vue.directive()的用法和实例详解
Mar 04 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 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
php中explode与split的区别介绍
2012/10/03 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php引用传值实例详解学习
2013/11/06 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php 数组元素快速去重
2017/05/05 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
javascript每日必学之封装
2016/02/23 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
js实现二级导航功能
2017/03/03 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
深入理解python函数递归和生成器
2016/06/06 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
基于opencv实现简单画板功能
2020/08/02 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
初三开学计划书
2014/04/27 职场文书
环保倡议书范文
2014/05/12 职场文书
中秋客户感谢信
2015/01/22 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
统招统分证明
2015/06/23 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
JS封装cavans多种滤镜组件
2022/02/15 Javascript
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python