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不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
详解Angular-Cli中引用第三方库
May 21 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
Vue 请求传公共参数的操作
Jul 31 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 采集程序 常用函数
2008/12/18 PHP
PHP新手入门学习方法
2011/05/08 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
Python实现对字符串的加密解密方法示例
2017/04/29 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
学生会竞选自荐信
2013/10/12 职场文书
中专自我鉴定范文
2013/10/16 职场文书
买房协议书
2014/04/11 职场文书
消防安全承诺书
2014/05/22 职场文书
mysql脏页是什么
2021/07/26 MySQL