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获得地址栏参数的两种方法
Nov 08 Javascript
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
JavaScript函数详解
Nov 17 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
select标签设置默认选中的选项方法
Mar 02 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
一个程序下载的管理程序(二)
2006/10/09 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
怎么清空javascript数组
2013/05/11 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
户外拓展活动方案
2014/02/11 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL