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 布尔型分析
Dec 22 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
AngularJs表单验证实例详解
May 30 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
了解javascript中的Dom操作
May 27 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 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
聊天室php&amp;mysql(一)
2006/10/09 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
深入理解python函数递归和生成器
2016/06/06 Python
python的unittest测试类代码实例
2017/12/07 Python
在python中实现对list求和及求积
2018/11/14 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
研修心得体会
2014/09/04 职场文书
工程部文员岗位职责
2015/02/04 职场文书
保卫工作个人总结
2015/03/03 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
Python 阶乘详解
2021/10/05 Python
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js