javascriptでthisがundefinedになる実例が分からない

Question

前提・実現したいこと

Reactのドキュメントを見ていた時に、下記のような記載がありました。
(https://ja.reactjs.org/docs/handling-events.html)

これについて、「クラスのメソッドはデフォルトではバインドされません」とはどういった意味でしょうか。
react以外のjavascriptコード(×JSX)でも再現する方法があれば、教えていただけますと嬉しいです。
よろしくお願いいたします！

※使用している環境…Code Pen

JavaScript では、クラスのメソッドはデフォルトではバインドされません。this.handleClick へのバインドを忘れて onClick に渡した場合、実際に関数が呼ばれた時に this は undefined となってしまいます。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    // ～～～このbindが必須とのこと！～～～
    this.handleClick = this.handleClick.bind(this);
    // ～～～～～～～～～～～～～～～～～～
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

検討したこと

クラス内のメソッドをデフォルトではthisで参照できない、ということかとも思い試してみましたが問題なくthisを参照できました。

class Dog {
  constructor(props) {
    this.name = props.name;
    this.age = props.age;
  }
  getName() {
    return this.name
  }
  executeGetName() {
    return this.getName();
  }
}
const shibainu = new Dog({name: "shiba", age: 5});
console.log(shibainu.getName());
console.log(shibainu.executeGetName());

そこでthisの仕様(ドキュメント)について調べたところ、

ストリクトモード　→　this=undefined

非ストリクトモード → this=window

となることが分かりましたので、可能性としてストリクトモードになっていることも考えております。
ただ、ドキュメントの書き方を見るにストリクトモードに限った話には見えず…

Answer 1

javascriptでは関数(クラスのメソッドも含む)がどのように呼び出されるかで、thisがどのオブジェクトを参照するか決まります。

class Hoge {
  constructor(value) { this.value = value; }
  output() { console.log(this.value); }
}

// これは hoge.output()という文脈で呼び出されるので、thisがhogeオブジェクトを参照する
hoge = new Hoge("hogehoge"); 
hoge.output();  // hogehoge

// これは hogeOutput() という文脈で呼び出されるので、thisがundefinedを参照する
hogeOutput = hoge.output;
hogeOutput(); // Uncaught TypeError: this is undefined

DOMのイベントハンドラはこの後者の呼び出し方で呼び出されるので、thisがundefinedになります。
ここでthisを強制的に指定したオブジェクトを参照するようにするために登場するのがbindです。

// bindを使えば、同じ呼び出し方でもthisを指定したオブジェクトを参照するものとして実行できる
hogeOutput2 = hoge.output.bind(hoge);
hogeOutput2();  // hogehoge

Comments

[oztoto]

ku__ra__geさん、丁寧な回答くださりありがとうございます！

クラスインスタンスから参照する形でメソッドを呼び出す場合は問題ないが、
関数自体を一度別の変数に入れてから呼び出すと、thisがundefinedになる。
ということですね。

ドキュメントのこちらの記載にも合点がいきました。

> これは React に限った動作ではなく、JavaScript における関数の仕組みの一部です。一般的に、onClick={this.handleClick} のように () を末尾に付けずに何らかのメソッドを参照する場合、そのメソッドはバインドしておく必要があります。

ありがとうございました！！