function foo的原型與prototype屬性解惑

2019-11-21 00:07:04

字體：大中小

來源：轉載

供稿：網友

疑惑出自于：

 
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出來的新對象。

上一篇：JS運行耗時操作的延時顯示方法

下一篇：高亮顯示web頁表格行的javascript代碼