function foo的原型與prototype屬性解惑
更新時間：2010年11月19日 20:04:53 作者：
最近在研究js，疑惑也比較多。主要是被原型這個東西給弄迷糊了。
疑惑出自于：
function foo {
this.name = 'foo';
}
alert(foo.prototype === Function.prototype ); //false。 當(dāng)時一直沒想明白為啥foo的原型不是Function.prototype。
下面例子讓我想當(dāng)然的認(rèn)為o.prototype === Function.prototype 應(yīng)該為true的：
function foo() {
this.name = 'foo';
}
Function.prototype.sayHello = function (parent) {
alert('hello');
};
foo.sayHello(); //alert 'hello'
當(dāng)我給Function.prototype增加了一個sayHello的方法后，foo也從原型身上得到了sayHello。用調(diào)試器觀察了一下，查了一下資料（包括ECMA-262 http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/ 以及 《JavaScript the good parts》第五章5.1 Pseudoclassical） ，發(fā)現(xiàn)foo.prototype的定義如下：
this.prototype = {constructor: this}; //這里是foo.prototype = {constructor: foo};
順便做了以下測試
alert(foo === foo.prototype.constructor); //true
那foo.prototype到底是什么？這跟new關(guān)鍵字有密切的關(guān)系。說一下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函數(shù)
return (typeof other === 'object' && other) || that; //如果foo函數(shù)返回了一個對象，則返回該對象，否則返回obj。
這樣就很清楚了，new foo()的時候，foo創(chuàng)建了一個對象，并作為其構(gòu)造函數(shù)，而foo.prototype則作為新對象的原型來使用。
foo.prototype可以添加任意方法，或改為任意的對象，而不怕修改了Function.prototype（Function.prototype是所有函數(shù)的原型）;
this.prototype = {constructor: this};的意義就在于，在沒有手動指定foo.prototype的情況下，js指定了一個默認(rèn)的原型給new出來的新對象。
復(fù)制代碼 代碼如下:
function foo {
this.name = 'foo';
}
alert(foo.prototype === Function.prototype ); //false。 當(dāng)時一直沒想明白為啥foo的原型不是Function.prototype。
下面例子讓我想當(dāng)然的認(rèn)為o.prototype === Function.prototype 應(yīng)該為true的：
復(fù)制代碼 代碼如下:
function foo() {
this.name = 'foo';
}
Function.prototype.sayHello = function (parent) {
alert('hello');
};
foo.sayHello(); //alert 'hello'
當(dāng)我給Function.prototype增加了一個sayHello的方法后，foo也從原型身上得到了sayHello。用調(diào)試器觀察了一下，查了一下資料（包括ECMA-262 http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/ 以及 《JavaScript the good parts》第五章5.1 Pseudoclassical） ，發(fā)現(xiàn)foo.prototype的定義如下：
this.prototype = {constructor: this}; //這里是foo.prototype = {constructor: foo};
順便做了以下測試
alert(foo === foo.prototype.constructor); //true
那foo.prototype到底是什么？這跟new關(guān)鍵字有密切的關(guān)系。說一下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函數(shù)
return (typeof other === 'object' && other) || that; //如果foo函數(shù)返回了一個對象，則返回該對象，否則返回obj。
這樣就很清楚了，new foo()的時候，foo創(chuàng)建了一個對象，并作為其構(gòu)造函數(shù)，而foo.prototype則作為新對象的原型來使用。
foo.prototype可以添加任意方法，或改為任意的對象，而不怕修改了Function.prototype（Function.prototype是所有函數(shù)的原型）;
this.prototype = {constructor: this};的意義就在于，在沒有手動指定foo.prototype的情況下，js指定了一個默認(rèn)的原型給new出來的新對象。
相關(guān)文章
使用javascript實(shí)現(xiàn)簡單的選項卡切換
本文主要介紹了使用javascript實(shí)現(xiàn)簡單的選項卡切換的效果，代碼非常的簡單，兼容性十分棒，這里推薦給小伙伴們。2015-01-01
微信小程序 動態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解
這篇文章主要介紹了微信小程序 動態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了Bootstrap如何激活導(dǎo)航狀態(tài)，包括膠囊式導(dǎo)航中的激活狀態(tài)和列表導(dǎo)航中的激活狀態(tài)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本文主要給大家詳細(xì)總結(jié)了下javascript中的運(yùn)算符，包括常見的算數(shù)運(yùn)算符、比較運(yùn)算符和邏輯運(yùn)算符。十分的清晰，有需要的小伙伴可以參考下。2015-06-06
Bootstrap fileinput文件上傳預(yù)覽插件使用詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap fileinput文件上傳預(yù)覽插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Proxy代理是JavaScript中一項強(qiáng)大而靈活的功能，它可以用于攔截、修改和自定義對象的底層操作，這篇文章主要介紹了JavaScript中的Proxy代理的各種用法和功能,需要的朋友可以參考下2023-06-06
JavaScript中判斷頁面關(guān)閉、頁面刷新的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript中判斷頁面關(guān)閉、頁面刷新的實(shí)現(xiàn)代碼,在一些特殊的場合中會用到這個技術(shù),需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)li標(biāo)簽的刪除，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04
ES6中export?default和export之間的區(qū)別詳解
export和export?default都是es6語法中用來導(dǎo)出組件的,可以導(dǎo)出的文檔類型有(?數(shù)據(jù)、常量、函數(shù)、js文件、模塊等),下面這篇文章主要給大家介紹了關(guān)于ES6中export?default和export之間的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04
javascript模擬評分控件實(shí)現(xiàn)方法
這篇文章主要介紹了javascript模擬評分控件實(shí)現(xiàn)方法,涉及javascript操作頁面元素與樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05