DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> function foo的原型與prototype屬性解惑
function foo的原型與prototype屬性解惑
編輯:關於JavaScript     
疑惑出自於:
復制代碼 代碼如下:
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出來的新對象。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved