徹底搞清JS中的this,construtor,prototype
this定義
-
this是對象
-
this依賴函數執行的上下文
-
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的定義，大家就清楚自然了。</code></pre>
再看constructor和prototype
constructor是一個對象的屬性，這個屬性存在在此對象的prototype中, 指向此對象的構造函數。分析這句話
-
constructor是一個對象屬性。
-
constructor在prototype中
-
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';
})</code></pre>