Javascript中函數this指向問題

函數中的this指向問題一直是js中的重點也是一個難點,下面就讓咱們一塊兒來總結一下吧!

1.普通函數

// 普通函數
    function fn() {
      console.log(this);
    }
    fn();   // 打印結果爲: window{...}
複製代碼

結論: 普通函數內部this指向Window

特別提醒:

‘use strict’嚴格模式下this指向undefined

2.對象的方法

// 對象的方法
    var obj = {
        age: 20,
        sayHi: function() {
            console.log(this);
        }
    }
    obj.sayHi();  // 打印結果爲: {age: 20, say: ƒ}
複製代碼

結論: 對象的方法的this指向obj對象

3.構造函數

// 構造函數
    function Star() {
        console.log(this);  // Star {}
    };
    var andy = new Star();
複製代碼

結論: 構造函數this指向andy這個實例對象

特別提醒:

嚴格模式下,若是 構造函數不加new調用, this 指向的是undefined,若是給他賦值則會報錯!

4.綁定事件函數

// 綁定事件函數
    var btn = document.querySelector('button');
    btn.onclick = function() {
        console.dir(this);
    };  // 打印結果: button
複製代碼

結論: 綁定事件函數this指向的是函數的調用者 也就是btn這個按鈕對象

5.定時器函數

// 定時器函數
    window.setTimeout(function() {
        console.log(this);
    }, 1000);  // 打印結果: window
複製代碼

結論: 定時器函數中this指向也是window

6.當即執行函數

// 當即執行函數
    (function() {
        console.log(this);
    })();  // 打印結果: window
複製代碼

結論: 當即執行函數中的this也是指向window

7.箭頭函數

// 箭頭函數
    var obj = {
        sayHi: () => {
	    console.log(this.age);
        }
    }
    obj.sayHi();  // window
複製代碼

結論: 箭頭函數沒有本身的this，看其外層的是否有函數，若是有，外層函數的this就是內部箭頭函數的this，若是沒有，則this是window.

8.如何尋找函數中的this

關於如何尋找函數中的this,我用一張圖來講明!

本文完!