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 window对象属性整理
Oct 24 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
react如何快速设置文件路径别名
Apr 28 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
Home Coffee Roasting
2021/03/03 咖啡文化
php实现文件下载代码分享
2014/08/19 PHP
php实现短信发送代码
2015/07/05 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
axios基本入门用法教程
2017/03/25 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python 实现生成均匀分布的点
2019/12/05 Python
python入门之井字棋小游戏
2020/03/05 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
python打开文件的方式有哪些
2020/06/29 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
应聘收银员个人的求职信
2013/11/30 职场文书
美化环境标语
2014/06/20 职场文书
后备干部推荐材料
2014/12/24 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
车间统计员岗位职责
2015/04/14 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
公司处罚决定书
2015/06/24 职场文书