JavaScriptにおけるthisの挙動が理解できない

Question

前提・実現したいこと

JavaScriptにおけるthisの挙動を理解したい。

function A(name) {
    this.name = name;
}

A.prototype.logThis = function() {
    console.log(this); //このthisは何を指すのかが分からない。
}

const a = new A('トム'); //コンストラクタ関数Aをインスタンス化
console.log(a); //→実行結果{name: 'トム'}
a.logThis(); //→実行結果 {name: 'トム'}


const result = a.logThis;
result(); //→実行結果 Windowオブジェクト なぜ変数に代入してから実行すると{name: 'トム'}でなくなるのか。

##質問①
なぜconsole.log(a)と、a.logThis()の実行結果が同じ{name: 'トム'}になるのか。
コードのコメント欄に書いているのですが、A.prototype.logThis内のthisが指す内容となぜそれを指すのかが分からないです。

##質問②
定数resultにa.logThisメソッドを代入。
その後、resultを呼び出す。
こうすると実行結果はWindowオブジェクトになります。

なぜa.logThis()のように普通に呼び出したときと、実行結果が異なるのでしょうか。

Answer 1

質問①

a.logThis()のようにメソッドを呼び出した場合、（もともとthisを固定した関数をメソッドとしてセットした場合を除いて）thisは呼び出し元のオブジェクトであるaになります。

質問②
なぜa.logThis()のように普通に呼び出したときと、実行結果が異なるのでしょうか。

JavaScriptのthisは呼び出し方によっても変化します。callやapplyを使えば、「呼び出し時にthisを自分で設定する」ことすら可能です。

Answer 2

こんにちは。

thisは呼び出され方によって内容が変わります。慣れるまではややこしい、というか、慣れてからもバグを生みやすい、JavaScriptの落とし穴です。

質問①

関数内での this の値は、関数の呼び出され方によって異なります。

関数コンテキスト | this - JavaScript | MDN

　

関数がオブジェクトのメソッドとして呼び出されるとき、その this にはメソッドが呼び出されたオブジェクトが設定されます。

オブジェクトのメソッドとして | this - JavaScript | MDN

質問②

this は既定でグローバルオブジェクトとなり、これはブラウザーでは window です。

単純な呼び出し | this - JavaScript | MDN

Answer 3

回答①

なぜconsole.log(a)と、a.logThis()の実行結果が同じ{name: 'トム'}になるのか。
コードのコメント欄に書いているのですが、A.prototype.logThis内のthisが指す内容となぜそれを指すのかが分からないです。

• 関数コード上で明示的に return 文を使用して返り値を指定していない場合、new 演算子で呼び出された関数は this 値を返す仕様です
• 関数が new 演算子で呼び出されている場合、コンストラクタ関数としての扱いとなり、prototype プロパティ値を [[Prototype]] とする new Object を this 値として束縛します
• a.method() のように関数がメソッド呼び出しされている場合、a.method の関数コード上の this 値は a になります
• オブジェクトのプロパティが参照される場合、プロトタイプチェーンの原則によって、直属のプロパティが存在しない場合に [[Prototype]] 上のプロパティを参照しようとします

従って、

function A(name) { this.name = name; }
A.prototype.logThis = function() { console.log(this); }

const a = new A('トム'); //コンストラクタ関数Aをインスタンス化

変数 a と A.prototype.logThis の関数コード内の this 値は同値となります。

• 継承とプロトタイプチェーン - JavaScript | MDN

回答②

定数resultにa.logThisメソッドを代入。
その後、resultを呼び出す。
こうすると実行結果はWindowオブジェクトになります。

なぜa.logThis()のように普通に呼び出したときと、実行結果が異なるのでしょうか。

関数を静的関数として呼び出す場合、

• その関数がStrict Modeで実行されているなら、this 値はundefinedになります
• その関数が非Strict Modeで実行されているなら、this 値はグローバルオブジェクトになります
• ブラウザ実行環境におけるグローバルオブジェクトはWindowのインスタンスになります

<script>
function foo () {
  'use strict';
   return this;
}
function bar () { return this; }

console.log(foo()); // undefined
console.log(bar()); // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
</script>

Re: yu-i さん