撤底理解es6中的箭頭函式

龍旗飄揚的艦隊發表於2019-02-15
函式

本質上

  • 是一個函式，是function
  • 是一個被編譯層加工過的函式
  • 用 babel 編譯一下箭頭函式看看，如下
//es6
const a = ()=>{ console.log(this) };

const b = ()=>{ console.log(arguments) }

function aaa(){
	const c = ()=>{ console.log(this) };
  	c();
}
aaa();

function bbb(){
	const c = ()=>{ console.log(arguments) };
  	c();
}
bbb()
複製程式碼
//編譯後
var a = function a() {
  console.log(undefined);
};

var _arguments = arguments;
var b = function b() {
  console.log(_arguments);
};

function aaa() {
  var _this = this;

  var c = function c() {
    console.log(_this);
  };
  c();
}
aaa();

function bbb() {
  var _arguments2 = arguments;

  var c = function c() {
    console.log(_arguments2);
  };
  c();
}
bbb();
複製程式碼

特性解密

  • 內部沒有 this，也沒有 arguments

==this==

  • 單獨呼叫時，內部沒有 this，因為在編譯時被替換成了 undefined
  • 但是，如果其外層存在 this（一個普通函式），那麼編譯時會將外層的 this 傳入箭頭函式內部，使其“具有了” this

==arguments==

  • 其內部的 arguments 和 this 的表現略有不同。不管是否單獨呼叫箭頭函式，arguments 都來自於外部傳入，使其“具有了” arguments

==柯里化==

  • 實際上這種呼叫方式，就是柯里化一個函式的一種實現方式（或者語法糖)
//es6
const sum = num1 => num2 => num3 => num1 + num2 + num3;
//編譯後
var sum = function sum(num1) {
  return function (num2) {
    return function (num3) {
      return num1 + num2 + num3;
    };
  };
};
複製程式碼

不適合用箭頭函式的情形

  • 在物件上定義函式
  • 在原型上定義函式
  • 動態上下文中的回撥函式，比如 dom 點選事件回撥
  • 太過複雜的函式

相關文章 箭頭函式沒有繫結this

相關文章