普通函數的this指向和箭頭函數的this指向小總結

普通函數：

1. 函數調用模式: fn() this ------> window

2. 方法調用模式: obj.fn() this ------> 指向調用者

3. 構造函數調用模式 this--------> 實例對象

4. 上下文調用模式, 想讓this指向誰, this就指向誰

​ call apply bind

​ fn.call(this指向, 參數1, 參數2, 參數3); 調用函數, 並且指定 this 的指向

​ fn.apply(this指向, [參數1, 參數2, 參數3]); 如果參數很多, 可以放在一個數組中, 此時用 apply 比較方便

​ var newFn = fn.bind(this指向); 作用: 復制一個新函數, 並且綁定死 新函數的 this指向

5.看不見的調用:

(1) 定時器里面的 this, 指向 window

(2) 事件處理函數的 this, 指向事件源

箭頭函數：

• 箭頭函數:this指向定義時的對象,也就是說箭頭函數一旦定義完成,它的指向是固定的，沒法改變，

  它的指向是定義時所在的作用域，而不是執行時的作用域

• 個人總結:

  1.箭頭函數的this指向是定義(聲明)時就綁定的，和執行無關

  2.箭頭函數沒有自己的this,繼承了當前所在環境執行時的this指向

• 遇到箭頭函數解題:

​ 1.看當前箭頭函數定義的環境是什么?(  小技巧：找上一個{}  )

​ 2.遇到箭頭函數的執行或調用,忽略,不看,對箭頭函數this指向沒有影響

​ 3.判斷當前環境執行時this指向誰,箭頭函數的this就指向誰

栗子：

var url = "window";
function Antzone() {
let func = () => {
console.log(this.url);
}
func();
}
Antzone();

解析：箭頭沒有自己的this指向，它是定義在Antzone()函數中，當Antzone()調用的時候，this指向window，所以打印是window

 

栗子：

var name = 'window';
var obj = {
name: 'obj',
say: function () {
setTimeout(function () {
var b2 = () => this.name;
console.log(b2());
}, 100);
}
}
obj.say();

解析：b2()調用這個的時候，由於是箭頭函數，沒有自己的this，所以往上找，看他定義的環境，他是定義在延時器中，延時器中的this指向window，所以打印是window