高級之路篇二十三：this總結

總之一句話：誰調用，this就指向誰。

1. 普通函數中
2. 構造函數中
3. 箭頭函數中
4. 原型鏈上的this
5. getter、setter中
6. 定時器回調函數中
7. 作爲對象方法中
8. dom事件處理函數中
9. 內聯事件函數中
10. 在Function構造器中

1、普通函數中：

• 非嚴格模式下指向全局window
• 嚴格模式下undefined

 

2、構造函數中：

• 指向實例對象

 

3、箭頭函數中：

• 箭頭函數本身沒有this，函數體中的this繼承於所在作用域的this

 

4、原型鏈上的this：

• 指向調用該方法的對象

 

5、getter、setter中：

• 指向被設置或獲取的目標對象

 

6、定時器的回調函數中：

• 無論是否嚴格模式，任何作用域下，都指向全局window

方式一：
setTimeout(function(){console.log(this)}, 0);


方式二：
var a = {
    b(){
        setTimeout(function(){console.log(this)}, 0)
    }
}
a.b();


方式三：
var q = {q : function(){console.log(this)}};
var a = {b: function(){
	setTimeout(q.q, 0);
}}
a.b();

運行結果：

 

7、作爲對象方法中：

• 指向調用該方法的對象  

var a = {
    b(){
        console.log(this)
    }
}

a.b()

運行結果：

 

8、dom事件處理函數中：

• 指向觸發事件的元素

//html
<div id="test"></div>

//js:
var fun = function(){
    console.log(this)
}

var elm = document.getElementById("test");

elm.addEventListener('click', fun, false);

 

9、內聯事件函數中：

• 外層指向當前dom節點
• 函數中的函數指向全局window 

//html
<div onclick="console.log(this)"></div>



//html
<div onclick="console.log(this); var a = function(){console.log(this); a(); }"></div>

   

10、在function構造器中：

• 無論是否嚴格模式，任何作用域下，都指向全局window

  var a = {
  	b: function(){
          var f = new Function('console.log(this)');
          f();
      }
  }
  
  a.b();

  運行結果：