從一道面試題中總結JS做用域，this 指向和箭頭函數

最近小弟在網上看到一道面試題，題目雖然簡單，但包含的知識點較多，有利於對 JavaScript 做用域，this 指向，call/apply，箭頭函數的理解。在這裏跟你們分享總結一下。 題目先睹爲快

var a = 10
var obj = {
  a: 20,
  say: function() {
    console.log(this.a)
  }
}
obj.say()
複製代碼

很明顯答案是輸出 20，這裏的 this 指向的是 obj。obj.a=20。

可是如何才能打印出 10 呢？有以下方法

1.箭頭函數

箭頭函數不綁定 this，會捕獲其所在的上下文的 this 值，做爲本身的 this 值。咱們能夠利用這一點進行修改。這樣 this 的指向就是 window。

var a = 10
var obj = {
  a: 20,
  say: () => {
    console.log(this.a)
  }
}
obj.say() // -> 10
複製代碼

下面說下箭頭函數和普通函數的區別

• 箭頭函數是匿名函數，不能做爲構造函數，不能使用 new
• 箭頭函數不綁定 arguments，取而代之用 rest 參數…解決
• 箭頭函數不綁定 this，會捕獲其所在的上下文的 this 值，做爲本身的 this 值
• 箭頭函數經過 call() 或 apply() 方法調用一個函數時，只傳入了一個參數，對 this 並無影響。
• 箭頭函數沒有原型屬性
• 箭頭函數不能當作 Generator 函數,不能使用 yield 關鍵字

二、改變 this 的指向

在 javascript 中，call 和 apply 都是爲了改變某個函數運行時的上下文（context）而存在的，換句話說，就是爲了改變函數體內部 this 的指向。下面使用 call 改變 this 指向的方法

var a = 10
var obj = {
  a: 20,
  say: function() {
    console.log(this.a)
  }
}
obj.say.call(this) // 此處顯示綁定this爲全局window對象
複製代碼

下面說一下 call，apply 的區別 對於 apply、call 兩者而言，做用徹底同樣，只是接受參數的方式不太同樣。call 接受的是一個字符串，而 apply 接受的是一個數組

func.call(this, arg1, arg2)
func.apply(this, [arg1, arg2])
複製代碼

常見應用

// 獲取數組中的最大值和最小值
var  numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers),   //458
var maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

// 數組追加
var array1 = [12 , "foo" , {name:"Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
// array1 值爲 [12 , "foo" , {name:"Joe"} , -2458 , "Doe" , 555 , 100]

// 驗證是不是數組
functionisArray(obj){
  return Object.prototype.toString.call(obj) === '[object Array]'
}
複製代碼

3.建立臨時變量存放函數

var a = 10
var obj = {
  a: 20,
  say: function() {
    console.log(this.a)
  }
}

var say = obj.say // 此處先建立一個臨時變量存放函數定義，而後單獨調用
say()
複製代碼

相關文章

搭建一個vue-cli的移動端H5開發模板

封裝一個toast和dialog組件併發布到npm

從零開始構建一個webpack項目

總結幾個webpack打包優化的方法

一文讀盡前端路由、後端路由、單頁面應用、多頁面應用

關於幾個移動端軟鍵盤的坑及其解決方案

淺談JavaScript的防抖與節流

總結幾種數組去重的方法

淺談JavaScript的 深拷貝和淺拷貝