JavaScript 的继承


Posted in Javascript onOctober 01, 2011

【废话】

面试时被经理问到其中一个问题让我印象很深刻,因为我想了很久没能答上来。题目是 JavaScript是怎样实现继承的? 面向对象是在开发过程中一直使用的,因此,继承也是最基础的一部分,自己开始接触JS到现在差不多两年多了,这个基础我竟然都没过关,看来我的理论功还要加大力度提升啊!!!我重新查了资料,终于深刻理解下来了。废话就这么多了,Coding Action...
【正文】

大家都知道,C#中使用的是传统的类继承是很简单,但在JS中,可就没这么简单了,因为它使用的是原型(prototype )继承,实现起来相对复杂了一点。

//定义 People 对象 
var People = function () { }; 
People.prototype = { 
Height: 175, 
Walk: function () { 
alert("People are walking..."); 
} 
} 
//定义 Me 对象 
var Me = function () { }; 
//设置 Me 的 prototype 属性为 People 对象 
Me.prototype = new People(); 
//将创建 Me 对象的引用指回给 Me 
Me.prototype.constructor = Me; 
//修改 Height 属性 
Me.prototype.SetHeight = function (v) { 
Me.prototype.Height = v; 
} 
//新增 Stop 动作 
Me.prototype.Stop = function () { 
alert("I'm Stop."); 
} 
var m = new Me(); 
//结果为 People are 175cm tall. 
alert("People are " + m.Height + "cm tall."); 
m.SetHeight(185); 
//结果为 I'm 185cm tall. 
alert("I'm " + m.Height + "cm tall."); 
//结果为 People are walking... 
m.Walk(); 
//结果为 I'm Stop. 
m.Stop(); 
var y = new Me(); 
//结果为 You're 185cm tall. 
alert("You're " + y.Height + "cm tall.");

从上面例子可以看出,Me对象即继承了People对象,可以访问People原型的属性和动作,又可以有Me自己的动作和属性。需特别注意的是,上面例子中实例化了一个y=new Me(),但显示它的Height属性时,并不是原始是175,而是被m实例修改后的185, 因此,new Me() 并不会创建一个新的People实现,而是重复使用它原型上的实例。因此上面例子,所有的Me对象都会共享相同的Height属性,这一点在继承使用中要特别留意。
Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
Jquery 的扩展方法总结
Oct 01 #Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 #Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 #Javascript
JQuery获取文本框中字符长度的代码
Sep 29 #Javascript
Jquery Change与bind事件代码
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 #Javascript
You might like
图形数字验证代码
2006/10/09 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python语言中with as的用法使用详解
2018/02/23 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
社区端午节活动总结
2015/02/11 职场文书
比赛主持人开场白
2015/05/29 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
如何正确理解python装饰器
2021/06/15 Python