this可謂是JavaScript中的開發神器,使用得當的話不只有事半功倍的效果,並且代碼的逼格也更高。可是既然是神器,若是你沒有足夠的功力的話,那麼就不要使用它,不然就有可能自毀身亡。曾幾什麼時候,我偶然獲得這個神器,以後,,,自殘,,,自殘,,,再自殘...再自殘了那麼屢次後,終於能夠擁有強大功力持此神器行走江湖了。接下來,我就爲你們來傳授傳說中神器的使用祕訣。javascript
咳咳。。java
入正題。瀏覽器
this是什麼?this表示當前運行方法的主體。app
注意:函數中的this指向和當前函數在哪定義的話或者在哪執行都沒有任何的關係。爲啥這樣說,請仔細閱讀下面的祕籍大全。函數
神器祕籍大全:this
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
var oDiv = document.getElementsByTagName("div")[0]; oDiv.onclick=function(){ console.log(this); //當用鼠標點擊該元素,則輸出oDiv元素的集合 };
這個好理解,元素綁定某個行爲執行的方法,就至關於把這個方法也綁定在這個元素上,因此this也就指向元素自己。code
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
記住此祕籍!!!
function Fn(){ this.x = 100; console.log(this); // 實例 f } var f = new Fn;
構造函數生成的實例,故構造函數裏的this固然是指向當前這個實例了。
var oDiv = document.getElementsByTagName("div")[0]; function fn() { console.log(this); } fn.call(oDiv);
fn.call(oDiv); //執行這個語句後,fn裏面的this指向oDiv元素,applay用法與call相似。
此大招一出來,上面四個祕籍都無效了。
祕籍分享完畢,若是有不當心看得看得走火入魔,歡迎出來指正修改此祕籍~