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 相关文章推荐
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
常规表格多表头查询示例
Feb 21 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
收集前端面试题之url、href、src
Mar 22 Javascript
js实现每日签到功能
Nov 29 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP和XSS跨站攻击的防范
2007/04/17 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP可变函数学习小结
2015/11/29 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
js中document.write的那点事
2014/12/12 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
python-str,list,set间的转换实例
2018/06/27 Python
Django中create和save方法的不同
2019/08/13 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
函授自我鉴定
2013/11/06 职场文书
班长岗位职责
2013/11/10 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
教师节商场活动方案
2014/02/13 职场文书
向女朋友道歉的话
2015/01/20 职场文书
Redis如何实现分布式锁
2021/08/23 Redis
Elasticsearch 基本查询和组合查询
2022/04/19 Python