【JavaScript】関数とオブジェクト③ thisについて

#はじめに

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

前回の記事

#目的

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

#本題
###1.this

• 呼び出し元のオブジェクトへの参照を保持するキーワード
• thisの参照先は実行コンテキストによって変わる

####使い方

// personというオブジェクトを設定
const person = {
    // nameとhelloをそれぞれ設定
    name: 'Tom',
    hello: function() {
        // この場合,thisがpersonを参照しているpersonオブジェクトの中のnameを呼び出す
        console.log("Hello" + this.name);
    }
}
// helloを実行「Hello Tom」と出力
person.hello();

// helloで定義した関数内からみて外部の関数スコープ
// 　＝レキシカルスコープがpersonにあたるので値を取得できる

###2.参照のコピーとthis

呼び出し時のコンテキストのthisの内容によってhello関数の挙動が変わる

####例1

const person = {
    name: 'Tom',
    hello: function() {
        console.log('Hello ' + this.name);
    }
}
// ここで他の変数に代入
const ref = person.hello;
// 「Hello 」だけが出力される(thisが機能していない)
ref();

// refにfunctionがコピーされている
// refはhelloやnameではなくコピーされた参照から値を拾ってくるので"Tom"を取得できない

ここで１行目に下記を追加する

// 下記の一行を入れると「Hello John」と出力される
window.name = "John";
const person = {
    name: 'Tom',
    hello: function() {
        console.log('Hello ' + this.name);
    }
}
const ref = person.hello;
ref();

なぜ、windowオブジェクトから値をとってくるのか

基本的に以下のように考える

○オブジェクトのメソッドとして実行される場合
→ this => 呼び出し元のオブジェクト

○関数として実行される場合
→ this => グローバルオブジェクト、undefined

####例2

window.name = "John";
const person = {
    name: 'Tom',
    hello: function() {
        console.log('Hello ' + this.name);
        // ここでaを実行すると,下記のa関数の参照先はグローバルオブジェクトになるので、「Hello John」となる
        a();
    }
}
// aという関数を用意
function a(){
    console.log('Hello ' + this.name);
}
// もしここでhelloを呼ぶと「Hello Tom」と出力される
person.hello();

personオブジェクトの中身を更にコピーして定義したらどうなるのか

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

        // さらにpersonを定義する
        const person = {
            // nameの値を「太郎」に変更
            name: '太郎',
            hello: function() {
                console.log('Hello ' + this.name);
                // ここでは上記同様に、Johnが呼ばれる
                // **関数**として実行される場合(26行目)
                a();
            }
        }
        // 再定義したpersonを実行すると"太郎"が呼ばれる
        // **オブジェクト**のメソッドとして実行される場合
        person.hello();
    }
}

function a(){
    console.log('Hello ' + this.name);
}

person.hello();
``````

thisを確認するにはデベロッパーツールのSouresで確認できる



今日はここまで！

#参考にさせて頂いた記事

* [【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)