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 前的按键判断代码
Mar 19 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
javascript实现完美拖拽效果
May 06 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 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父类调用子类方法的代码例子
2014/04/09 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
Javascript之文件操作
2007/03/07 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
关于Python的一些学习总结
2018/05/25 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
股权转让协议书范本
2014/04/12 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
宣传活动总结范文
2014/07/01 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
Python基础之tkinter图形化界面学习
2021/04/29 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers