說(shuō)起這三個(gè)屬性，肯定有一些同學(xué)和我一樣逻卖，初學(xué)js時(shí)非常困惑，頭大昭抒，一臉的迷茫评也。今天就來(lái)給大家徹底解決這些擔(dān)心受怕的問(wèn)題炼杖。
先看this
this定義：
this就是函數(shù)賴以執(zhí)行的對(duì)象。
分析這句話：
1. this是對(duì)象盗迟。
2. this依賴函數(shù)執(zhí)行的上下文環(huán)境坤邪。
3. this存在函數(shù)中。
直接看例子：
alert(this); //在全局環(huán)境調(diào)用this, this指向window,? 輸出[Object window]
function Person(){
? ? ?alert(this);
}
方式一:
Person(); // 全局環(huán)境用Person函數(shù), this指向window,? 輸出[Object window]
方式二:
var obj = new Person(); //把Person當(dāng)做構(gòu)造函數(shù), 實(shí)例化一個(gè)對(duì)象
//此時(shí)this指向了obj, 不再指向window,? 輸出[Object object]
function Person(){
? ? ?alert(this.name); //此時(shí)無(wú)法判斷this的身份
}
Person(); //this在全局環(huán)境中被調(diào)用, this.name == window.name, 輸出了窗口的名字
var obj = new Person(); //this在obj環(huán)境下被調(diào)用, this.name == obj.name, 由于name沒(méi)被賦值, 所以輸出undefined
由此可以看出, 我們?cè)陂喿x代碼或者寫(xiě)代碼時(shí)诈乒，看到某個(gè)函數(shù)中定義的this時(shí), 還無(wú)法去判斷那個(gè)this身份罩扇，必須找到它依賴執(zhí)行的環(huán)境(對(duì)象)婆芦。
再回頭看看this的定義怕磨，大家就清楚自然了。
再看constructor和prototype
constructor和prototype的關(guān)系非常密切消约。
constructor是一個(gè)對(duì)象的屬性肠鲫，這個(gè)屬性存在在此對(duì)象的prototype中, 指向此對(duì)象的構(gòu)造函數(shù)。
分析這句話：
1.constructor是一個(gè)對(duì)象屬性或粮。
2.constructor在prototype中
3.constructor指向構(gòu)造函數(shù)
例子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是隱藏的, 默認(rèn)指向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重寫(xiě)了, 覆蓋了默認(rèn)的constructor导饲。
換句話說(shuō), 其實(shí)這種方式就是給屬性重新賦值了, 所以導(dǎo)致默認(rèn)的constructor被覆蓋。
此時(shí)的obj.constructor將指向的是Object氯材。
改寫(xiě)一下上面的：
Person.prototype = {
? ? ? constructor: Person, //強(qiáng)制指向Person
? ? ? ?getName: function(){
? ? ? ? ? ? alert(this.name);
? ? ? },
? ? getAge: function(){
? ? ? ? alert(this.age);
? ? }
}
此時(shí)constructor就指向Person了渣锦。
prototype是一個(gè)函數(shù)屬性, 此屬性同時(shí)也是一個(gè)對(duì)象, 保存著對(duì)象實(shí)例所共有的屬性和方法。
分析這句話:
1.prototype是函數(shù)屬性, 只要是函數(shù), 就有prototype屬性. 而不管是構(gòu)造函數(shù)還是普通函數(shù).
2.prototype同時(shí)也是對(duì)象.
2.prototype放的是公共的東西, 包括屬性和方法.
例子1.
function Person(name, age){
? ? ? this.name = name;
? ? ? this.age = age;
}
//是函數(shù)就有prototype屬性, 這個(gè)屬性也是一個(gè)對(duì)象
Person.prototype = {
? ? ?getName: function(){ //所有對(duì)象實(shí)例都共享
? ? ?return this.name;
? },
? getAge: function(){//所有對(duì)象實(shí)例都共享
? ? ? 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, 所有實(shí)例共享
Person.prototype.getName(); //當(dāng)做普通函數(shù)屬性, 根據(jù)this定義, 此時(shí)this指向的是Person.prototype, 所以返回undefined
以上就是this, constructor, prototype的定義和他們之間的關(guān)系. 可能還有些粗糙, 歡迎大家補(bǔ)充.
綜合例子:
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;//此處若看明白了, 那么前面的就理解了
? ?}
});
這個(gè)例子其實(shí)很簡(jiǎn)單, 就是向一個(gè)對(duì)象原型添加方法.一個(gè)方法是get, 用于查找頁(yè)面id. 一個(gè)是each, 用于對(duì)找到的id元素執(zhí)行一個(gè)方法
//假設(shè)有id = 'data', id = 'message'
var obj = new Tinker();
obj.get('data', 'message').each(function(i, item){
? ? ?this.style.cssText = 'height:20px; background:#ff0000';
})
