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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 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
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
2014年最新学习全国两会精神心得
2014/03/17 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
大学生党课感想
2015/08/11 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书