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 相关文章推荐
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
用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
一段好玩的JavaScript代码
2006/12/01 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
写好求职信第一句话的技巧
2013/10/26 职场文书
教学改革实施方案
2014/03/31 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
灵魂歌王观后感
2015/06/17 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
Redis入门基础常用操作命令整理
2022/06/01 Redis