完全搞清javascript中this, constructor, prototype

提及這三個屬性，確定有一些同窗和我同樣，初學js時很是困惑，頭大，一臉的迷茫。今天就來給你們完全解決這些擔憂受怕的問題。

先看this

this定義： this就是函數賴以執行的對象。 分析這句話： 　　1. this是對象。 2. this依賴函數執行的上下文環境。 3. this存在函數中。 直接看例子： alert(this); //在全局環境調用this, this指向window, 輸出[Object window]
   
     function Person(){ alert(this); } 方式一: Person(); // 全局環境用Person函數, this指向window, 輸出[Object window]
 方式二: var obj = new Person(); //把Person當作構造函數, 實例化一個對象
                             //此時this指向了obj, 再也不指向window, 輸出[Object object]
     
     function Person(){ alert(this.name); //此時沒法判斷this的身份
 } Person(); //this在全局環境中被調用, this.name == window.name, 輸出了窗口的名字
     var obj = new Person(); //this在obj環境下被調用, this.name == obj.name, 因爲name沒被賦值, 因此輸出undefined
 由此能夠看出, 咱們在閱讀代碼或者寫代碼時，看到某個函數中定義的this時, 還沒法去判斷那個this身份，必須找到它依賴執行的環境(對象)。 再回頭看看this的定義，你們就清楚天然了。

 再看constructor和prototype

constructor和prototype的關係很是密切。 constructor是一個對象的屬性，這個屬性存在在此對象的prototype中, 指向此對象的構造函數。 分析這句話： 1.constructor是一個對象屬性。 2.constructor在prototype中 3.constructor指向構造函數 例子1： function Person(name, age){ this.name = name; this.age = age; } Person.prototype.getName = function(){ alert(this.name); } Person.prototype.getAge = function(){ alert(this.age); } var obj = new Person(); alert(obj.constructor == Person);// true
 此種方式定義的prototype, constructor是隱藏的, 默認指向Person 例子2： function Person(name, age){ this.name = name; this.age = age; } Person.prototype = { getName: function(){ alert(this.name); }, getAge: function(){ alert(this.age); } } var obj = new Person(); alert(obj.constructor == Person);// false
 爲何是false? 這種定義prototype, 是把prototype重寫了, 覆蓋了默認的constructor。 換句話說, 其實這種方式就是給屬性從新賦值了, 因此致使默認的constructor被覆蓋。 此時的obj.constructor將指向的是Object。 改寫一下上面的： Person.prototype = { constructor: Person, //強制指向Person
        getName: function(){ alert(this.name); }, getAge: function(){ alert(this.age); } } 此時constructor就指向Person了。 prototype是一個函數屬性, 此屬性同時也是一個對象, 保存着對象實例所共有的屬性和方法。 分析這句話: 1.prototype是函數屬性, 只要是函數, 就有prototype屬性. 而無論是構造函數仍是普通函數. 2.prototype同時也是對象. 2.prototype放的是公共的東西, 包括屬性和方法. 例子1. function Person(name, age){ this.name = name; this.age = age; } //是函數就有prototype屬性, 這個屬性也是一個對象
        Person.prototype = { getName: function(){ //全部對象實例都共享
                return this.name; }, getAge: function(){//全部對象實例都共享
                return this.age; } } var obj = new Person('tom', 23); obj.getName(); //'tom'
        var obj2 = new Person('jack', 23); obj2.getName(); //'jack'
        obj.getName == obj2.getName; //true, 全部實例共享
        Person.prototype.getName(); //當作普通函數屬性, 根據this定義, 此時this指向的是Person.prototype, 因此返回undefined
 以上就是this, constructor, prototype的定義和他們之間的關係. 可能還有些粗糙, 歡迎你們補充. 綜合例子: var Tinker = function(){ this.elements = []; }; Tinker.fn = Tinker.prototype = { constructor: Tinker, extend: function(obj){ var p; for(p in obj){ this.constructor.prototype[p] = obj[p];//此處若看明白了, 那麼前面的就理解了
 } } } Tinker.fn.extend({ get: function(){ var length = arguments.length, i = 0; for(; i < length; i++){ this.elements.push(document.getElementById(arguments[i])); //此處若看明白了, 那麼前面的就理解了
 } return this;//此處若看明白了, 那麼前面的就理解了
 }, each: function(fn){ var i = 0, length = this.elements.length; for(; i < length; i++){ fn.call(this.elements[i], i, this.elements[i]); } return this;//此處若看明白了, 那麼前面的就理解了
 } }); 這個例子其實很簡單, 就是向一個對象原型添加方法.一個方法是get, 用於查找頁面id. 一個是each, 用於對找到的id元素執行一個方法
 //假設有id = 'data', id = 'message'
   var obj = new Tinker(); obj.get('data', 'message').each(function(i, item){　　　　this.style.cssText = 'height:20px; background:#ff0000';　　})