前端常見問題 - ES6

Wrightlt發表於2019-07-23
前端

ES6的箭頭函式作用

  • 箭頭函式使得表示式更簡潔
  const square = n => n * n;
  const isEven = n => n % 2 === 0;
複製程式碼
  • 簡化回撥函式
  // 正常函式寫法
  [1, 2, 3].map(function(x) {
      return x * x;
  })
  // 箭頭函式寫法
  [1, 2, 3].map(x => x * x);
複製程式碼
  • 改變this指向。箭頭函式函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。
  function foo() {
    setTimeout(() => {
      console.log('id:', this.id);
    }, 100);
  }
  var id = 21;
  foo.call({ id: 42 });
  // id: 42
複製程式碼

箭頭函式的this指向的是誰

  • 首先，this的繫結機制，也就是this的繫結規則，由於繫結機制較複雜，不詳細說明，此處列舉下this幾種繫結規則的優先順序：
    • new繫結 > 顯式繫結 > 隱式繫結 > 預設繫結
  • 其次，箭頭函式並不會使用以上四條標準，而是根據當前的詞法作用域來決定this，具體來說，就是箭頭函式會繼承外層函式呼叫的this繫結（無論this繫結的是什麼）。

什麼時候不適合使用箭頭函式

  • 箭頭函式適合於無複雜邏輯或者無副作用的純函式場景下，例如用在map、reduce、filter的回撥函式定義中
  • 當我們需要執行上下文的時候，就不適合使用箭頭函式了，例如：定義物件方法、定義原型方法、定義建構函式、定義事件回撥函式
  • 不要在最外層定義箭頭函式，因為在函式內部操作this會很容易汙染全域性作用域。最起碼在箭頭函式外部包一層普通函式，將this控制在可見的範圍內
  • 箭頭函式優勢之一是簡潔。在有多層函式巢狀的情況下，箭頭函式的簡潔性並沒有很大的提升，反而影響了函式的作用範圍的識別度，這種情況不建議使用箭頭函式

vue的鉤子函式可以用箭頭函式形式麼，用箭頭函式的話，this繫結的是什麼

  • vue的鉤子函式中不適合使用箭頭函式
  • 原因：會丟失this對當前元件例項的繫結，從而使得元件對應的一些方法或資料不可使用
  • 此時this繫結到undefined

let和var的區別

專案 var let
作用域 - let命令所在程式碼塊內
變數提升（即變數可以在宣告之前使用，值為undefined） 存在變數提升 不存在變數提升
暫時性死區 不存在 存在
重複宣告 重複宣告不報錯 不允許重複宣告，重複宣告報錯

常用es6特性

  • let
  • const
  • global
  • 解構賦值
  • promise
  • ...運算子
  • 箭頭函式

參考：

相關文章