回答編集履歴
2
Babelを紹介
test
CHANGED
|
@@ -120,4 +120,4 @@
|
|
|
120
120
|
|
|
121
121
|
|
|
122
122
|
|
|
123
|
-
単純に短く書きたいだけであれば、最初からCoffeeScriptで書いた方がいいです。
|
|
123
|
+
functionを単純に短く書けるようにした物ではないため、単に短く書きたいだけであれば、最初からCoffeeScriptで書いた方がいいです。アロー関数が本来のES5ではどう解釈されるかはBabel等を用いて変換してみるとわかるかと思います。[Babel: Try it out](https://babeljs.io/repl/)で色々試してみてください。
|
1
再帰の時の名前とか
test
CHANGED
|
@@ -2,11 +2,97 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
関数宣言式の利点は**巻き上げ**ぐらいで、ほとんどありません。関数にある名前を使ってその関数に**アクセスしているわけではない**からです。
|
|
5
|
+
関数宣言式の利点は**巻き上げ**ぐらいで、ほとんどありません。関数外部から関数にある名前を使ってその関数に**アクセスしているわけではない**からです。
|
|
6
6
|
|
|
7
7
|
参考: [stackoverflow jp: function hoge() と hoge = function() の違いは？](http://ja.stackoverflow.com/questions/2781/function-hoge-%E3%81%A8-hoge-function-%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF)
|
|
8
8
|
|
|
9
9
|
また、関数宣言式にしても後からの破壊的代入を防げるわけではありません。名前の破壊を防ぎたいのであれば、`const`を使って定数にすべきでしょう。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
上とは別に、名前付き関数の利点として、関数内部でその関数名の関数スコープである暗黙の**ローカル変数**が作成され、それが**上書きされない**という利点があります。アロー関数で全く同じ方法をとることはできませんが、関数を返す関数を実行して、上書きされない関数スコープのロカール変数を使えばできます。下記の`fn1`を参考にしてみてください。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
```JavaScript
|
|
18
|
+
|
|
19
|
+
"use strict";
|
|
20
|
+
|
|
21
|
+
var fn0 = (i) => {
|
|
22
|
+
|
|
23
|
+
return i < 10 ? fn0(++i) : i;
|
|
24
|
+
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
var fn0x = fn0;
|
|
28
|
+
|
|
29
|
+
console.log(fn0x(0)); // 10
|
|
30
|
+
|
|
31
|
+
fn0 = (i) => {
|
|
32
|
+
|
|
33
|
+
return 0;
|
|
34
|
+
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
console.log(fn0x(0)); // 0 になっちゃう。あかんわ。
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
var fn1 = () => {
|
|
42
|
+
|
|
43
|
+
var _fn1 = (i) => {
|
|
44
|
+
|
|
45
|
+
return i < 10 ? _fn1(++i) : i;
|
|
46
|
+
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
return _fn1;
|
|
50
|
+
|
|
51
|
+
}();
|
|
52
|
+
|
|
53
|
+
var fn1x = fn1;
|
|
54
|
+
|
|
55
|
+
console.log(fn1x(0)); // 10
|
|
56
|
+
|
|
57
|
+
fn1 = (i) => {
|
|
58
|
+
|
|
59
|
+
return 0;
|
|
60
|
+
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
console.log(fn1x(0)); // 10 のまま！やったぜ！
|
|
64
|
+
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
ただ、そもそも関数自体が上書きされること自体が想定外の動作を起こす可能性があるため、単に`const`をつけて上書き禁止にした方がES6っぽいかと思います。
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
```JavaScript
|
|
74
|
+
|
|
75
|
+
"use strict";
|
|
76
|
+
|
|
77
|
+
const fn2 = (i) => {
|
|
78
|
+
|
|
79
|
+
return i < 10 ? fn2(++i) : i;
|
|
80
|
+
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
var fn2x = fn2;
|
|
84
|
+
|
|
85
|
+
console.log(fn2x(0)); // 10
|
|
86
|
+
|
|
87
|
+
fn2 = (i) => {
|
|
88
|
+
|
|
89
|
+
return 0;
|
|
90
|
+
|
|
91
|
+
}; // この時点でエラーになる！！
|
|
92
|
+
|
|
93
|
+
console.log(fn2x(0));
|
|
94
|
+
|
|
95
|
+
```
|
|
10
96
|
|
|
11
97
|
|
|
12
98
|
|
|
@@ -22,7 +108,15 @@
|
|
|
22
108
|
|
|
23
109
|
|
|
24
110
|
|
|
25
|
-
アロー関数は通常のfunctionの代
|
|
111
|
+
アロー関数は通常のfunctionの単純な代替になるものではありません。
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
再帰関数で関数名を用いたときに、その名前の上書きを防ぎたいのであれば、関数を返す関数を実行して、スコープ内に閉じ込めるか、`const`で上書きそのものを防げばいいかと思います。
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
`this`の束縛ですが、コード内に`this`がなければfunctionを使った無名関数と動作は同じですが、`this`があれば**必ず**動作は異なります。こちらについては**回避方法はありません。**定義している環境の`this`に強制的に束縛したい場合は、アロー演算子を使った方が簡単に書けると言うだけです。呼び出し方によって`this`の束縛が変わるような関数を作成したい場合は、**functionを使う以外方法はありません**。
|
|
26
120
|
|
|
27
121
|
|
|
28
122
|
|