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静态的动态
Sep 18 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
vue如何从接口请求数据
Jun 22 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
SSI指令
2006/11/25 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
XML的代替者----JSON
2007/07/21 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
Python的词法分析与语法分析
2013/05/18 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python安装与使用redis的方法
2016/04/19 Python
Python实现的计数排序算法示例
2017/11/29 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
python属于跨平台语言码
2020/06/09 Python
竞争上岗演讲稿
2014/01/05 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2015年女工委工作总结
2015/07/27 职场文书
入党申请书怎么写?
2019/06/21 职场文书