はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
目的
- 関数とオブジェクトについての理解を深める
本題
1.アロー関数とthis
アロー関数ではthisが使えない??
例1
window.name = 'ルフィ';
const person = {
name: 'ゾロ',
hello: function() {
console.log('Hello ' + this.name);
}
}
// ここではhello ゾロと出力される
person.hello();
thisにするとどうなるのか
window.name = 'ルフィ';
const person = {
name: 'ゾロ',
hello: () => {
console.log('Hello ' + this.name);
}
}
// hello ルフィと出力される!なぜ?
person.hello();
window.name = 'ルフィ';
// personオブジェクトがグローバルコンテキストに定義されている
// thisはwindowオブジェクトを参照する
const person = {
name: 'ゾロ',
hello: () => {
// アロー関数はthisを取らない
// スコープチェーンを辿ってthisを探しに行く
console.log('Hello ' + this.name);
}
}
person.hello();
例2
オブジェクトのメソッドの中で呼ぶ場合
window.name = 'ルフィ';
const person = {
name: 'ゾロ',
// helloを無名関数に直す(ES6からfunction省略できる!)
hello(){
console.log('Hello ' + this.name);
// 実行するとエラーになる
// 呼び出しの後に関数が宣言されてないから
a();
}
}
person.hello();
// このアロー関数ををオブジェクトの中で呼ぶ
const a = () => console.log("Bye " + this.name);
アロー関数を前にもっていく
window.name = 'ルフィ';
// この関数のレキシカルスコープがグローバルスコープになる
// ここでのthisはwindowオブジェクトになる
const a = () => console.log("Bye " + this.name);
const person = {
name: 'ゾロ',
hello(){
// ここのthisは通常通り呼び出し元のpersonのnameを取る
console.log('Hello ' + this.name);
// ここで4行目のアロー関数が呼び出される
a();
}
}
// hello ゾロ
// Bye ルフィと出力される
person.hello();
例3
関数式を書いた場所で出力する値が変わってくる
window.name = 'ルフィ';
const person = {
name: 'ゾロ',
hello(){
console.log('Hello ' + this.name);
// もしここにアロー関数を定義したらthisの参照先はpersonになるので
// 出力結果はBye ゾロになる
const a = () => console.log("Bye " + this.name);
a();
}
}
person.hello();
例4
関数の中にアロー関数入れた場合
window.name = 'ルフィ';
const person = {
name: 'ゾロ',
hello(){
console.log('Hello ' + this.name);
}
}
function b() {
// thisの参照先はwindowオブジェクト
const a = () => console.log("Bye " + this.name);
a();
}
// 出力結果はBye ルフィ
b();
今日はここまで!