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静态的url如何传递
May 03 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
js中的闭包实例展示
Nov 01 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python 网络爬虫初级实现代码
2016/02/27 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
Python3几个常见问题的处理方法
2019/02/26 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Python中如何引入第三方模块
2020/05/27 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
2013年入党人员的自我鉴定
2013/10/25 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
物业管理专业自荐信
2014/07/01 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
2015年信访工作总结
2015/04/07 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL