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 数组排序函数
Aug 20 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 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
pdo中使用参数化查询sql
2011/08/11 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
python实现图书借阅系统
2019/02/20 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
详解Django 时间与时区设置问题
2019/07/23 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python多进程编程常用方法解析
2020/03/26 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
网络技术专业推荐信
2014/02/20 职场文书
副总经理岗位职责
2014/03/16 职场文书
小班上学期评语
2014/05/05 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
2014公司年终工作总结
2014/12/19 职场文书
预备党员半年考察意见
2015/06/01 职场文书
感恩教育主题班会
2015/08/12 职场文书
2016年少先队活动总结
2016/04/06 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL