輕松了解JS中this的指向

       JS中的this指向一直是個讓人頭疼的問題，想當初我學的是天昏地暗，查了好多資料，看的頭都大了，跟他大戰了那么多回合，終於把它搞定個七八分，其實往往都是我們復雜化了，現在就讓大家輕松看懂this的指向，我會分以下幾種情況來說。

this的指向：

 1 this 指的是直接調用當前方法（函數）的那個對象，也就是說函數在誰那被調用，this就指的是誰。

  來看兩個栗子：

   oBtn.onclick = function(){ 
        alert(this);   //oBtn
  }

 

 oBtn.onclick = fn1;

   function fn1(){ 

    alert(this); //oBtn
  }

很容易看出，函數是在按鈕對象被點擊的時候調用，所以this指的是obtn，這兩種情況是等同的是，只是調用函數的寫法不同。

 2 當函數里面嵌套函數的時候，嵌套的那個函數里面的this指的是window,不要過分深究這個原因，因為這是JS的一個特性。

  來看個栗子：

oBtn.onclick = function(){

     alert(this); //oBtn(記得這里還是oBtn)

     fn1(); 
   }

  function fn1(){ 
   alert(this);  // window
   }

   對於上述情況，當我們需要fn1里面的this指向按鈕的時候怎么辦呢，這個時候有兩種方法。

1 將this作為參數傳函數去

2 將this保存起來賦給另一個變量

來看兩個栗子：

1

oBtn.onclick = function(){

     alert(this); //oBtn

     fn1(this); 1 將上面的this作為參數傳函數去
   }

  function fn1(obj){ 
    alert(obj);  // oBtn
  }

2

var that = null;
oBtn[i].onclick = function(){

   alert(this); //oBtn
   that = this ;// 將上面的this保存起來賦給另一個變量
   fn1();
}

function fn1(){ 
   alert(that);  // 指向oBtn
}

 后續補充：

3  如果有new關鍵字，this指向new出來的那個對象；

  當用new去調用一個函數：這個時候this指的就是創建出來的對象 而且函數的默認返回值就是this 即這個對象（隱式返回 不用自己再寫返回值）

function CreatePerson(name){   //函數名首字母大寫
      //var this=new Object(); 系統會偷偷在這里聲明一個對象賦給this替咱們做，不用寫
     this.name = name; 
     this.showName = function(){ 
        alert(this.name); 
     } 
     //return this;  函數的默認返回值就是this即這個對象（隱式返回 不用自己再寫返回值）

} 
var p1 =new CreatePerson('haha'); 
//當用new去調用一個函數：這個時候this指的就是創建出來的對象 而且函數的默認返回值就是this即這個對象（隱式返回 不用自己再寫返回值）
 p1.showName();

 new操作符具體干了什么呢?

（1）創建一個空對象，並且 this 變量引用該對象，同時還繼承了該函數的原型。
（2）屬性和方法被加入到 this 引用的對象中。
（3）新創建的對象由 this 所引用，並且最后隱式的返回 this 。

 4  在IE下，事件的綁定的第二種形式中，obj.attachEvent(事件名稱,事件函數)，里面的this指的是window。

  當然這不是我們想要的，所以讓this指向觸發事件的對象呢？這就需要提到一個方法call()；它可以改變this的指向

call(this的指向，原來函數的參數列表)：它有兩個參數，第一個指的是改變的this的指向，也就是你想要this指向誰就寫誰，如果寫的是null,this的指向就不會改變，還是指向原來的。從第二個參數開始，就代表的是函數里面的具體傳入的參數了。具體用法我們來看個栗子：

 //有一個函數，兩個參數。

function fn1(a,b){ 
    alert(this); //   本來默認是window,改變后為1
    alert(a+b);// 30
}

//三種調用方法
fn1(); //正常調用。彈出 this指向window, a+b為 undefined
fn1.call(); // 等同於上面 ,這兩種調用是一樣的
fn1.call(1,10,20);  //  彈出this指向 1，同時傳入兩個數，彈出30

改變this指向是不是也很簡單呢。。。。。。

說點題外話，今天是我的第一篇博客，我平常呢，是個特別喜歡做筆記，也經常總結的人，只是寫博客比較少，因為說不出來太多有文筆的東西，喜歡簡單利索，邏輯分明的東西，希望以后我能更簡單的將復雜的東西分享給你們，我們也一起學習，有什么不正確的，歡迎指正。