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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
ES6中Array.includes()函数的用法
Sep 20 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
JS实现省市县三级下拉联动
Apr 10 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 mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
验证码按回车不变解决方法
2013/03/29 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
了解前端理论:rscss和rsjs
2019/05/23 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
python利用opencv保存、播放视频
2020/11/02 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
会计专业个人自我鉴定
2014/03/21 职场文书
2014年班组长工作总结
2014/11/20 职场文书
门球健将观后感
2015/06/16 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
python 制作一个gui界面的翻译工具
2021/05/14 Python
Python代码风格与编程习惯重要吗?
2021/06/03 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js