javascript知識整理之this

標籤：方法調用   tle   變數   菜鳥   idt   wrap   節點   js函數   對象   

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

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

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

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

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就指向那;

javascript知識整理之this