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 相关文章推荐
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
深入理解js数组的sort排序
May 28 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
vue递归实现树形组件
Jul 15 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
php生成WAP页面
2006/10/09 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
JS之相等操作符详解
2016/09/13 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python zip文件 压缩
2008/12/24 Python
Python中关键字is与==的区别简述
2014/07/31 Python
python中对list去重的多种方法
2014/09/18 Python
常见python正则用法的简单实例
2016/06/21 Python
Python读写docx文件的方法
2018/05/08 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
采购主管岗位职责
2014/02/01 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
七年级思品教学反思
2016/02/20 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
Python图像处理之图像拼接
2021/04/28 Python