關於javascript中this的那點事

this可謂是JavaScript中的開發神器，使用得當的話不只有事半功倍的效果，並且代碼的逼格也更高。可是既然是神器，若是你沒有足夠的功力的話，那麼就不要使用它，不然就有可能自毀身亡。曾幾什麼時候，我偶然獲得這個神器，以後，，，自殘，，，自殘，，，再自殘...再自殘了那麼屢次後，終於能夠擁有強大功力持此神器行走江湖了。接下來，我就爲你們來傳授傳說中神器的使用祕訣。

咳咳。。

入正題。

this是什麼？this表示當前運行方法的主體。

注意：函數中的this指向和當前函數在哪定義的話或者在哪執行都沒有任何的關係。爲啥這樣說，請仔細閱讀下面的祕籍大全。

神器祕籍大全：

祕籍一：自制行函數裏面的this永遠都是window

var inner = "window";
var obj = {inner : "obj",
          fn : (function () {console.log(this.inner)})()
}

上面瀏覽器在運行該程序時，會自動運行obj.fn裏面的方法，由於obj.fn是一個自制行函數，當執行該函數時，程序會輸出window。

額，爲何輸出不是obj？

由於人家規定自制行函數裏面的this是window,因此其實this.inner就是window.inner，所以這個inner是定義在全局變量的，它的值是"window"。

 

祕籍二：元素綁定事件驅動方法運行，方法裏的this表示當前綁定的元素

var oDiv = document.getElementsByTagName("div")[0];
oDiv.onclick=function(){
    console.log(this);   //當用鼠標點擊該元素，則輸出oDiv元素的集合
 };

這個好理解，元素綁定某個行爲執行的方法，就至關於把這個方法也綁定在這個元素上，因此this也就指向元素自己。

 

祕籍三：方法執行，看方法名前面是否有"."，有的話"."前面是誰this就是誰，沒有的話this就是window

var obj={fn:fn};
function fn(){console.log(this)}
fn.prototype.aa=function(){console.log(this)};
var f=new fn;
fn();  //window..
obj.fn(); //Object..
fn.prototype.aa(); //fn.prototype
f.aa(); //f

記住此祕籍！！！

 

祕籍四：在構造函數模式中,函數體中的this是當前類的一個實例

function Fn(){
    this.x = 100;
    console.log(this);  // 實例 f
}
var f = new Fn;

構造函數生成的實例，故構造函數裏的this固然是指向當前這個實例了。

 

祕籍五（大招）：call/apply來改變this的指向

var oDiv = document.getElementsByTagName("div")[0];
function fn() {
    console.log(this);
}
fn.call(oDiv);

fn.call(oDiv); //執行這個語句後，fn裏面的this指向oDiv元素，applay用法與call相似。

此大招一出來，上面四個祕籍都無效了。

 

祕籍分享完畢，若是有不當心看得看得走火入魔，歡迎出來指正修改此祕籍~