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动态调整TextArea高度的代码
Dec 28 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
jquery map方法使用示例
Apr 23 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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制作静态网站的模板框架(四)
2006/10/09 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python爬取淘宝商品销量信息
2018/11/16 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
详解pandas赋值失败问题解决
2020/11/29 Python
python3中确保枚举值代码分析
2020/12/02 Python
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
中央空调节能方案
2014/06/15 职场文书
理财学专业自荐书
2014/06/28 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
大学生求职信怎么写
2015/03/19 职场文书
中学教师教学工作总结
2015/08/13 职场文书
趣味运动会标语口号
2015/12/26 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
Golang数据类型和相互转换
2022/04/12 Golang