アロー関数はthisを束縛しないとかいう謎文言について考える
ES6で導入されたアロー関数式は従来のfunction式の代替構文ではあるものの、純粋な糖衣構文ではありません。
特にthisの扱いが異なることは有名です。
具体的にどう違うのかと言うと、アロー関数のthisは宣言時のスコープにおけるthis固定である一方、function式におけるthisは呼ばれ方によって決まります。
加えてアロー関数のthisはapplyやcallで上書きすることは出来ませんし、bindで新しい関数を作っても上書きされません。
「アロー関数はthisを束縛しない」
この特徴に対し、「アロー関数はthisを束縛しない」という説明がよくされています。
が、この文言よく意味が分かりません。
字面やthisの動きだけ見ると、アロー関数の方がthisの値が変わらないわけでより値を束縛してそうに見えます。
出所と原文
おそらく、この文言の出所はMDNかと思われます。
アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。
いかにも直訳しました感が漂う文言なので、英語の原文も見てみます。
An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.
直訳かと思いきや意外と意訳してました。
なんにせよ、
「this(中略)を束縛しない」は「without its own bindings to the this(中略)keywords.」
に相当するようです。
its own bindings to the this
ここで出てくる「its own bindings to ... keywords.」の意味は、javascriptでfunction式で宣言された関数を実行する際に関数内限定で特定の値が特定のキーワードに対し自動で代入、設定されることを指します。
例えば、argumentsには引数が配列のようなArgumentsオブジェクトの形で入りますし、new.targetにはundefinedかコンストラクタや関数への参照が入ります。
ここで示されているのは、アロー関数式で生成した関数にはこれらの処理が行われませんよ、ということです。
関数内で特別に値が上書きされないので、thisやargumentsと言った値の参照先は、
javascriptの一般的な文法に則ってレキシカルスコープで探索されます。
thisは予約語なのでちょっと特別感がありますが、例えばargumentsは普通に変数名として使えるものなので、
アロー関数の横で変数宣言しているとそれが拾われたりします。
const arguments = [1,2,3];
var arrow = () => console.log(arguments);
var func = function(){
console.log(arguments);
};
arrow("hoge");//[ 1, 2, 3 ]
func("hoge");//[Arguments] { '0': 'hoge' }
よって、
「without its own bindings to the this (中略) keywords.」
の訳は、
「this(中略)に対して関数内独自の値を束縛しません」
が正しいはずです。
まとめ
- アロー関数ではfunctionでは暗黙的に行われるthisなどに対する値の束縛がない
- 「thisを束縛しない」という謎文言の意味するところはこれ
- 正直誤訳に近いのでは？