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 文件夹选择框的两种解决方案
Jul 01 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
React.js入门学习第一篇
Mar 30 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
ionic2.0双击返回键退出应用
Sep 17 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
调频问题解答
2021/03/01 无线电
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
PHP echo()函数讲解
2019/02/15 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
treepanel动态加载数据实现代码
2012/12/15 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
对python字典过滤条件的实例详解
2019/01/22 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
如何通过python实现全排列
2020/02/11 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
Python 实现简单的客户端认证
2020/07/29 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
手机业务员岗位职责
2013/12/13 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
实习协议书范本
2014/04/22 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014年图书室工作总结
2014/12/09 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
vue中div禁止点击事件的实现
2022/04/02 Vue.js
Python绘制散乱的点构成的图的方法
2022/04/21 Python
MySQL 字符集 character
2022/05/04 MySQL
Python面试不修改数组找出重复的数字
2022/05/20 Python