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同步Import,同步调用外部js的方法
Jul 08 Javascript
五段实用的js高级技巧
Dec 20 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
用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
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
村容村貌整治方案
2014/05/21 职场文书
商场消防安全责任书
2014/07/29 职场文书
领导班子对照检查材料
2014/09/22 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
python基于opencv批量生成验证码的示例
2021/04/28 Python