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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
javascript实现五星评分功能
Nov 10 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
php 修改密码实现代码
May 24 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
JS实现分页导航效果
Feb 19 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 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
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python实现的选择排序算法示例
2017/11/29 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
pytorch 常用线性函数详解
2020/01/15 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python画环形图的方法
2020/03/25 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
咖啡蛋糕店创业计划书
2014/01/28 职场文书
2014植树节活动总结
2014/03/11 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Vue监视数据的原理详解
2022/02/24 Vue.js