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二维数组的定义说明
Mar 03 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
在vue中使用Base64转码的案例
Aug 07 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
Views rows style模板重写代码
2011/05/16 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
JavaScript如何操作css
2020/10/24 Javascript
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python Socket编程详细介绍
2017/03/23 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
学习python分支结构
2019/05/17 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
初中科学教学反思
2014/01/21 职场文书
淘宝好评语大全
2014/05/05 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
新员工入职感言范文!
2019/07/04 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
Python实现信息管理系统
2022/06/05 Python