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 相关文章推荐
原创javascript小游戏实现代码
Aug 19 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
vue-test-utils初使用详解
May 23 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
浅谈JS的二进制家族
May 09 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
聊天室php&mysql(五)
2006/10/09 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python中的urllib模块使用详解
2015/07/07 Python
Python入门教程之运算符与控制流
2016/08/17 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
《口技》教学反思
2014/02/21 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
采购部长岗位职责
2014/06/13 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
小学生法制教育心得体会
2016/01/14 职场文书