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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
简单了解JavaScript异步
May 23 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
js实现简易计算器功能
2019/10/18 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
旷课检讨书1000字
2014/02/14 职场文书
职务聘任书范文
2014/03/29 职场文书
房展策划方案
2014/06/07 职场文书
司机岗位职责说明书
2014/07/29 职场文书
毕业生对母校寄语
2015/02/26 职场文书
复试通知单模板
2015/04/24 职场文书
春晚观后感
2015/06/11 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android