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中数据结构与算法(四):串(BF)
Jun 19 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php 强制下载文件实现代码
2013/10/28 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
python 实现视频 图像帧提取
2019/12/10 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
Python页面加载的等待方式总结
2021/02/28 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
法雷奥SQA(electric)面试问题
2016/01/23 面试题
团支书的期末学习总结自我评价
2013/11/01 职场文书
cf搞笑广告词
2014/03/14 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
超市督导岗位职责
2015/04/10 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang