關於javascript中this的那點事

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

咳咳。。java

入正題。瀏覽器

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

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

神器祕籍大全:this

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

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

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

額,爲何輸出不是obj?.net

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

 

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

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

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

 

祕籍三:方法執行,看方法名前面是否有".",有的話"."前面是誰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相似。

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

 

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

相關文章
相關標籤/搜索