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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
javascript中layim之查找好友查找群组
Feb 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
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
php输出图像的方法实例分析
2017/02/16 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
react-router中的属性详解
2017/06/01 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python中的CSV文件使用"with"语句的方式详解
2018/10/16 Python
python 切换root 执行命令的方法
2019/01/19 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
万里长城导游词
2015/01/30 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Python中的tkinter库简单案例详解
2022/01/22 Python