寒潮ing，你可能在FaceTest中遇到(3)—— what's this

• 系列分享
  寒潮ing，你可能在FaceTest中遇到(1)—— new運算符及手動實現
  寒潮ing，你可能在FaceTest中遇到(2)—— 經常使用的排序算法

this is this

  this是咱們常見的一種關鍵字，在不一樣的場景下this也表明不一樣的含義。通常地，咱們把this分爲5種狀況：1.默認綁定。2.隱式綁定。3.顯式綁定。4.new 關鍵字綁定。5.箭頭函數。下面分別簡單的介紹下各類狀況以及最後的判斷圖。

• 默認綁定

function fn() {
	console.log(this)
}
fn(); // this => window
複製代碼

PS:嚴格模式下

'use strict'
function fn() {
	console.log(this)
}
fn(); // this => undefined
複製代碼

• 隱式綁定

let obj = {
    a:1,
    fn:fn
}
function fn() {
	console.log(this)
}
obj.fn(); // this => obj
複製代碼

PS：有一個坑的狀況

let obj = {
    a:1,
    myfn() {
        return fn()
    }
}
function fn() {
	console.log(this)
}
obj.myfn(); // this => window
複製代碼

  簡單的理解就是由於函數的存儲方式引用所致使的，具體請小夥伴們自信baidu諮詢

• 顯式綁定

let obj1 = {
    a:1,
    fn:fn
}
function fn() {
	console.log(this)
}
let obj2 = {
    b:2
}
obj1.fn.call(obj2); // this => obj2
// apply是同樣的
複製代碼

• new 關鍵字綁定

function Fn() {
	console.log(this)
}
let myfn = new Fn(); // this => Fn {} this指向新建立的對象
複製代碼

• 箭頭函數
  根據當前的詞法做用域來決定this，箭頭函數會繼承外層函數調用的this綁定

下面直接上圖