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 相关文章推荐
密码强度检测效果实现原理与代码
Jan 04 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
react路由配置方式详解
Aug 07 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
js replace替换所有匹配的字符串
2014/02/13 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Python实现仿射密码的思路详解
2020/04/23 Python
怎么快速自学python
2020/06/22 Python
python破解同事的压缩包密码
2020/10/14 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
教师师德师风个人整改方案
2014/09/18 职场文书
简易版租房协议书范本
2014/10/13 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
python中filter,map,reduce的作用
2022/06/10 Python