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 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 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
第十二节--类的自动加载
2006/11/16 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
Python的设计模式编程入门指南
2015/04/02 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
公司业务主管岗位职责
2013/12/07 职场文书
假面舞会策划方案
2014/05/29 职场文书
春秋淹城导游词
2015/02/11 职场文书
公司禁烟通知
2015/04/23 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis