JavaScript类和继承 prototype属性


Posted in Javascript onSeptember 03, 2010

我们已经在第一章中使用prototype属性模拟类和继承的实现。 prototype属性本质上还是一个JavaScript对象。 并且每个函数都有一个默认的prototype属性。
如果这个函数被用在创建自定义对象的场景中,我们称这个函数为构造函数。 比如下面一个简单的场景:

// 构造函数 
function Person(name) { 
this.name = name; 
} 
// 定义Person的原型,原型中的属性可以被自定义对象引用 
Person.prototype = { 
getName: function() { 
return this.name; 
} 
} 
var zhang = new Person("ZhangSan"); 
console.log(zhang.getName()); // "ZhangSan"

作为类比,我们考虑下JavaScript中的数据类型 - 字符串(String)、数字(Number)、数组(Array)、对象(Object)、日期(Date)等。 我们有理由相信,在JavaScript内部这些类型都是作为构造函数来实现的,比如:
// 定义数组的构造函数,作为JavaScript的一种预定义类型 
function Array() { 
// ... 
} 
// 初始化数组的实例 
var arr1 = new Array(1, 56, 34, 12); 
// 但是,我们更倾向于如下的语法定义: 
var arr2 = [1, 56, 34, 12];

同时对数组操作的很多方法(比如concat、join、push)应该也是在prototype属性中定义的。
实际上,JavaScript所有的固有数据类型都具有只读的prototype属性(这是可以理解的:因为如果修改了这些类型的prototype属性,则哪些预定义的方法就消失了), 但是我们可以向其中添加自己的扩展方法。
// 向JavaScript固有类型Array扩展一个获取最小值的方法 
Array.prototype.min = function() { 
var min = this[0]; 
for (var i = 1; i < this.length; i++) { 
if (this[i] < min) { 
min = this[i]; 
} 
} 
return min; 
}; 
// 在任意Array的实例上调用min方法 
console.log([1, 56, 34, 12].min()); // 1

注意:这里有一个陷阱,向Array的原型中添加扩展方法后,当使用for-in循环数组时,这个扩展方法也会被循环出来。
下面的代码说明这一点(假设已经向Array的原型中扩展了min方法):
var arr = [1, 56, 34, 12]; 
var total = 0; 
for (var i in arr) { 
total += parseInt(arr[i], 10); 
} 
console.log(total); // NaN

解决方法也很简单:
var arr = [1, 56, 34, 12]; 
var total = 0; 
for (var i in arr) { 
if (arr.hasOwnProperty(i)) { 
total += parseInt(arr[i], 10); 
} 
} 
console.log(total); // 103
Javascript 相关文章推荐
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
关于JS中prototype的理解
Sep 07 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
js实现倒计时关键代码
May 05 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 #Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 #Javascript
原生javascript实现图片轮播效果代码
Sep 03 #Javascript
IE6不能修改NAME问题的解决方法
Sep 03 #Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 #Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 #Javascript
Dojo 学习要点
Sep 03 #Javascript
You might like
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
信息技术培训感言
2014/03/06 职场文书
给校长的一封建议书
2014/03/12 职场文书
委托书如何写
2014/08/30 职场文书
2014离婚协议书范文
2014/09/10 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
教师求职信怎么写
2015/03/20 职场文书
十月围城观后感
2015/06/08 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书