【JavaScript】関数とオブジェクト④ コールバック関数とthis

はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

目的

• 関数とオブジェクトについての理解を深める

本題

1.コールバック関数とthis

前回までのおさらい

window.name = 'John';

// personというオブジェクトを定義
const person = {
    name: 'Tom',
    hello: function() {
        console.log('Hello ' + this.name);
    }
}
// ”HelloTom”と出力される
person.hello();
// オブジェクトのメソッドとして使った場合、thisは呼び出し元のオブジェクトを参照する

コールバック関数

personのhelloを他の関数の引数として渡した場合どうなるのか

window.name = 'John';

const person = {
    name: 'Tom',
    hello: function() {
        console.log('Hello ' + this.name);
    }
}
person.hello();

// refという引数にコールバック関数が渡ってくるようにする
function fn(ref){
    ref();
}

// 実行結果は「hello John」と出力される(関数として実行しているから？)
fn(person.hello);

// メソッドを他の変数に代入していることと同じ
// refに渡ってくるのはpersonのhelloというプロパティが参照している先の関数
// refを実行するということは関数を実行していることになる
// 関数として実行した場合,thisにはグローバルオブジェクトの値が格納される

今日はここまで！

参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム