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中的public和private对象,即static修饰符
Jan 18 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
JavaScript实现旋转轮播图
Aug 18 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
跟我学Laravel之路由
2014/10/15 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
Js自定义多选框效果的实例代码
2017/07/05 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
python 消费 kafka 数据教程
2019/12/21 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
英语翻译系毕业生求职信
2013/09/29 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
集中整治工作方案
2014/05/01 职场文书
法律顾问服务方案
2014/05/15 职场文书
财务管理专业求职信
2014/06/11 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers