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 相关文章推荐
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
javascript实现简易聊天室
Jul 12 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
原生JS中应该禁止出现的写法
May 05 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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
mongodb和php的用法详解
2019/03/25 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
pygame学习笔记(4):声音控制
2015/04/15 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Linux下python3.7.0安装教程
2018/07/30 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python编写猜数字小游戏
2019/10/06 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Footshop法国:购买运动鞋
2020/01/19 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
万年牢教学反思
2014/02/15 职场文书
2014年司法局工作总结
2014/12/11 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技