アロー関数についてのメモ
アロー関数について
無名関数を記述しやすくした省略記法
//一般的な関数
function a(name){
return 'hi ' + name;
}
//関数式の場合
//bに代入するのは無名関数
const b = function(name){
return 'hi ' + name;
}
console.log(a('tom'));
console.log(b('bob'))
hi tom
hi bob
無名関数をアロー関数にする
//1.functionを削除
//2.) と { の間に => をいれる
const b = (name) => {
return 'hi ' + name;
}
console.log(b('bob'))
hi bob
さらに省略可
//・引数が一つの場合()を省略できる
//・実行行が一つの場合は{}とreturnが省略できる
const b = name => 'hi ' + name;
console.log(b('bob'))
hi bob
引数を2つ以上取りたいとき
const b = (name, name1) => 'hi ' + name + ' ' + name1;
console.log(b('bob','marley'))
hi bob marley
引数を取らないときは()は省略しない
const b = () => 'hello ';
()は_でも書ける
_でダミーの変数を定義したことになる
const b = _ => 'hi ';
注意
無名関数 | アロー関数 | |
---|---|---|
this | 可 | 不可 |
arguments | 可 | 不可 |
new | 可 | 不可 |
prototype | 可 | 不可 |
アロー関数は基本的に無名関数の省略記法になるが、厳密には機能が同じというわけではない。
特にthisは挙動がことなるので気をつける。
thisとアロー関数
下記のpersonオブジェクトはグローバルコンテキストに定義されている。
グローバルコンテキストのthisの参照先のオブジェクトはwindowオブジェクトになる。
ここでperson.helloを呼び出すと、アロー関数になるため、thisをとらない。
なのでthisはスコープチェーンをたどって、外側のレキシカルスコープに探しに行く。スコープについて
そこで見つかるのがwindowオブジェクトなのでperson.helloの中のthisはwindowオブジェクトとなる。
window.name = 'John';
const person = {
name: 'Tom',
hello: () => {
console.log('Hello ' + this.name);
}
}
person.hello();
Hello John
ちなみにこの無名関数は
const person = {
name: 'Tom',
hello: function() {
console.log('Hello ' + this.name);
}
}
下記のように省略できる。
無名関数がhelloプロパティに格納されているということになる。
hello: () => {} の意図では使用不可
const person = {
name: 'Tom',
hello() {
console.log('Hello ' + this.name);
}
}
下記、const a = () => console.log(‘bye ‘ + this.name);のthisはJohnをとる
window.name = 'John';
const a = () => console.log('bye ' + this.name);
const person = {
name: 'Tom',
hello(){
console.log('Hello ' + this.name);
a();
}
}
person.hello();
Hello Tom
bye John
この
const a = () => console.log(‘bye ‘ + this.name);
をperson.helloの中に入れた場合は下記のようになる
window.name = 'John';
const person = {
name: 'Tom',
hello(){
console.log('Hello ' + this.name);
const a = () => console.log('bye ' + this.name);
a();
}
}
person.hello();
Hello Tom
bye Tom
ではこの場合のthisはどこをとるのか
window.name = 'John';
const person = {
name: 'Tom',
hello(){
console.log('Hello ' + this.name);
const a = () => console.log('bye ' + this.name);
a();
}
}
// person.hello();
function b(){
const a = () => console.log('byebye ' + this.name);
a();
}
b();
答えはJohn
この
() => console.log(‘byebye ‘ + this.name);
関数のレキシカルスコープはb()の関数スコープになるが、関数がただただ呼ばれた際には、この関数のthisはwindowオブジェクトを参照する。
byebye John