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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
Javascript window对象详解
Nov 12 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
js字符串倒序的实例代码
Nov 30 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
python条件和循环的使用方法
2013/11/01 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
2014年高三毕业生自我评价
2014/01/11 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
出国留学经济担保书
2014/04/01 职场文书
小学生评语集锦
2014/04/18 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
临时租车协议范本
2014/09/23 职场文书
2014年审计工作总结
2014/11/17 职场文书
员工2014年度工作总结
2014/12/09 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript