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 相关文章推荐
onpropertypchange
Jul 01 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
Vue使用NProgress进度条的方法
Sep 21 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
用Javascript实现发送短信验证码间隔功能
Feb 08 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
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
PDO实现学生管理系统
2020/03/21 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
js闭包用法实例详解
2016/12/13 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
python关键字and和or用法实例
2015/05/28 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
新学期班主任寄语
2014/01/18 职场文书
教师节横幅标语
2014/10/08 职场文书
党员个人年度总结
2015/02/14 职场文书
离婚纠纷代理词
2015/05/23 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
Python+pyaudio实现音频控制示例详解
2022/07/23 Python