function foo的原型与prototype属性解惑


Posted in Javascript onNovember 19, 2010

疑惑出自于:

function foo { 
this.name = 'foo'; 
} 
alert(foo.prototype === Function.prototype ); //false。 当时一直没想明白为啥foo的原型不是Function.prototype。

下面例子让我想当然的认为o.prototype === Function.prototype 应该为true的:

function foo() { 
this.name = 'foo'; 
} 
Function.prototype.sayHello = function (parent) { 

alert('hello'); 
}; 
foo.sayHello(); //alert 'hello'

当我给Function.prototype增加了一个sayHello的方法后,foo也从原型身上得到了sayHello。用调试器观察了一下,查了一下资料(包括ECMA-262 http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/ 以及 《JavaScript the good parts》第五章5.1 Pseudoclassical) ,发现foo.prototype的定义如下:
this.prototype = {constructor: this}; //这里是foo.prototype = {constructor: foo};
顺便做了以下测试
alert(foo === foo.prototype.constructor); //true

那foo.prototype到底是什么?这跟new关键字有密切的关系。说一下new foo()干了些什么就知道了。
var obj = {}; //定义一个新的Object
obj.[[prototype]] == this.prototype;
//注意1:此处的this为foo,foo.prototype此时有用武之地了,给obj的原型赋值,在此用[[prototype]]表示其原型
//注意2:obj是没有prototype属性的,估计是没用吧
var other = this.apply(obj, arguments); //这部让obj.name = 'foo',即obj作为this跑了一遍foo函数
return (typeof other === 'object' && other) || that; //如果foo函数返回了一个对象,则返回该对象,否则返回obj。

这样就很清楚了,new foo()的时候,foo创建了一个对象,并作为其构造函数,而foo.prototype则作为新对象的原型来使用。
foo.prototype可以添加任意方法,或改为任意的对象,而不怕修改了Function.prototype(Function.prototype是所有函数的原型);
this.prototype = {constructor: this};的意义就在于,在没有手动指定foo.prototype的情况下,js指定了一个默认的原型给new出来的新对象。

Javascript 相关文章推荐
js面向对象 多种创建对象方法小结
May 21 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
高亮显示web页表格行的javascript代码
Nov 19 #Javascript
javascript tips提示框组件实现代码
Nov 19 #Javascript
突发奇想的一个jquery插件
Nov 19 #Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 #Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 #Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 #Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 #Javascript
You might like
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php rsa加密解密使用详解
2015/01/14 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
python 回调函数和回调方法的实现分析
2016/03/23 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
蒂娜商店:Tiina the Store
2019/12/07 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
学校课外活动总结
2014/05/08 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB