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使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
javascript中的this详解
Dec 08 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
vue中SPA单页面应用程序详解
Nov 07 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP常用的小程序代码段
2015/11/14 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python 序列的方法总结
2016/10/18 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python微信操控itchat的方法
2019/05/31 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
详解django中Template语言
2020/02/22 Python
python关于变量名的基础知识点
2020/03/03 Python
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
小学生节约用水倡议书
2014/05/15 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
2015元旦节寄语
2014/12/08 职场文书
幼师自荐信范文
2015/03/06 职场文书
入党介绍人意见范文
2015/06/01 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang