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中var声明变量作用域的推断
Dec 16 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
React中的refs的使用教程
Feb 13 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
Bootstrap FileInput实现图片上传功能
Jan 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
php 文本文件的读取效率
2012/02/10 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
微信小程序实现图片上传功能
2018/05/28 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
图解JS原型和原型链实现原理
2020/09/15 Javascript
python中的闭包用法实例详解
2015/05/05 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
python连接mongodb集群方法详解
2020/02/13 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
英语自荐信范文
2013/12/11 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
营销学习心得体会
2014/09/12 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
《青山不老》教学反思
2016/02/22 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS