javascript知識整理之this

js中的this是一個頭疼的問題，尤其對於筆者這種初級的菜鳥來講，下麵梳理下this的知識，可以當做是初級進階也好入門也罷，總歸輸出的才是自己掌握的:

Js中this不是由詞法作用域決定的 而是調用時動態指定，這就有點麻煩了，如果不能明確知道函數調用時的詞法作用域this的指向也就只能靠猜了，算一卦這種模式不是不推薦而是根本不能用，要是真的不能確定this指向 可以查一下調用棧 或是上個斷點之類的，當然alert這種較為原始的方法也是有效的不過確實有點low;

Js函數調用方式大致可以歸為四類(此處是阮一峰大神總結的)即a.直接調用(預設指向)b.當方法調用(隱式指向)c.用new調用d.是特殊的調用方式(bind,call..)(顯示指向);

當然了這裡是有優先順序的就像css的class一樣 即: c > d > b > a;下麵也說以便這四種當用方式(非嚴格模式):

A.直接調用

function fn(){

console.log(this)

}

fn();

這裡的this是window 這個是比較簡單基礎，像是這樣：

var n = 7;

function fn(){

   this.n = 8;

   function fn1(){

      console.log(this.n)

   }

   return fn1();

}

var test = new fn();

這裡this也是指向window的所以this.n==window.n 也就是7.這裡也可以看出this不是基於詞法作用域的 而是調用時指定的，怎麼回事呢，有句話大概意思就是只要是函數聲明其this都指向window ,與聲明的位置無關;

B.當方法調用：

var name = "a";

var obj = {

      name: "b",

      sayname: function(){

      console.log(this.name);

   }

}

obj.sayname();

這個也是一個典型的基礎的案例，輸出 b ；this指向obj;這段代碼其實就是這樣的:

var name = "a";

var obj = new Object();

obj.name = "b";

obj.sayname = function(){

   console.log(this.name);

}

obj.sayname();

這裡有個小坑，像是這樣:

var name = "a";

var obj = {

   name: "b",

   obj2: {

      name: "c",

      sayname: function(){

         console.log(this.name);

      }

   }

}

obj.obj2.sayname();

Var test = obj.obj2.sayname;

Test();

第一個congsole是 c ；原因也是一直提的this不是取決於詞法作用域的而是動態綁定的 obj.obj2.sayname 這裡sayname是作為obj.obj2對象的函數調用的 所以this指向obj.obj2;

第二個console也好理解,當sayname賦值給變數test時當前執行上下文就變了。指向window了。所以第二個是c; 簡單講當方法調用時 this指向調用方法的那個對象;換言之誰調用了這個方法this指向誰;

C.由new調用:

先上代碼:

var name = "b";

function fn(){

   this.name = "a";

   this.sayname = function(){

      console.log(this.name)
   }
}
var obj = new fn();

obj.sayname();

在看這段代碼前應該瞭解下 new的時候到底發生了些什麼事..，調用的時候由new調用的函數就是構造函數了.為什麼用構造函數呢，這個也好理解，總不能相似的功能都要複製粘貼吧.以上邊代碼為例 當執行new fn()時 在fn函數第一行隱式的創建了一個對象即 var o = new Object();下麵的this全部替換成了o，也就是o.name = “a”;... 最後把這個對象o return了。而又把這個返回值賦給了變數obj，obj的引用地址也是指向這個對象（複合類型）;所以結果是a；

D.特殊的調用方式（有時候也叫硬性綁定或顯示綁定）:

Call與applay用法一樣唯一區別在意一個傳遞的參數是集合(applay)另一個是用幾個參數寫幾個參數(call)：

var name = "a";

var obj = {

   name: "b",

   obj2: {

      name: "c",

      sayname: function(){

         console.log(this.name);

      }

   }

}

obj.obj2.sayname.call(obj);

沒錯用了B 的例子，這下輸出b ，我們給他硬性的綁定到了obj上，用apply與bind也是一樣的; 還有像是eval setInterval等這種奇葩其作用域是全局的 要是在這裡邊用this不做處理的話都會指向window...

雖然this有點詭異卻不是飄忽不定，哦對了 作為一個前端怎麼不接觸dom呢 dom事件也會改變this指向的比如:

document.onclick = function(){

   console.log(this)

}

這裡會列印document這個節點，簡而言之事件在哪this就指向那;