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设计模式之工厂模式和构造器模式
Feb 11 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
Aug 14 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
详解 javascript对象创建模式
Oct 30 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
域名查询代码公布
2006/10/09 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
js实现秒表计时器
2019/12/16 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
django实现模型字段动态choice的操作
2020/04/01 Python
python线程池如何使用
2020/05/28 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
迟到检讨书400字
2014/01/13 职场文书
简历上的自我评价
2014/02/03 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
公司周年庆活动方案
2014/08/25 职场文书
员工工作及收入证明
2014/10/28 职场文书
政审证明材料
2015/06/19 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server