Reactのthisについて

React初心者です。
下記のコードに置いて、なぜthisをbindする必要があるのかわかりません。
その理由として二つ目のjsコードではメソッド内でthisをコンソールに出力した時、ちゃんとクラスを参照しています。
今回についてもメソッド内でthisを参照した場合、bindが必要なくても出力されるものではないのでしょうか？

今の僕のthisの理解としては
1, 関数内でのthisは関数そのものをさす
2, メソッド内のthisはクラス(インスタンス)をさす
3, 関数内でもメソッド内でもない場合はグローバル変数をさす

ご教授よろしくお願いします。orz

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: 'foo',
      value2: [ 'bar', 'baz' ],
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    //bindをつけていないとundefinedになる
　　 console.log(this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        <Child data={this.state.value1} />
      </div>
    );
  }
}

class A {
	constructor() {
  	this.name = 'a';
    console.log(this)
  }
  test() {
  	console.log(this);
  }
}
a = new A();
a.test()

thyda.eiqau

2020/03/22 04:57

「まだ回答を求めています」とのことですが、何がわからないのでしょうか。ご提示の「なぜthisをbindする必要があるのかわかりません。」に対する回答は出揃っているように見えます。何に対する回答が求められているのかわかりませんので、質問本文に追記して、いまのあなたの疑問に思っているところをご提示ください。

2_34_koki

2020/03/22 05:01

同一のクラスなのにもかかわらず、thisが参照できない利用がいまいちわからないことです。結局、jsで書かれているのにもかかわらず、jsとReact.jsで挙動が変わる理由わからないです。

thyda.eiqau

2020/03/22 05:07

いいえ、JavaScriptとReactで挙動は変わっていません。Vanilla JSでイベントハンドラを書いたとしてもthisをbindするとか、アロー関数で書くとか、なんらかの方法でthisが何を指すかを固定しないと、thisに何が入るかは呼び方によって変わります。全員、そういったJavaSciptの仕様を説明しています。

2_34_koki

2020/03/22 06:14

いろいろ調べてやっと理解できました、ありかがとうございます。

行動規範の内容に同意します

回答3件

公式リファレンスでその辺に言及があったと思ったのでググってましたが

コンポーネントに関数を渡す
 Understanding JavaScript Function Invocation and "this"

このへん読んで理解できない点があればもうちょい具体的にわからないところを質問すれば良いんじゃないでしょうか。

投稿2020/03/12 15:26

gentaro

総合スコア8949

2_34_koki

2020/03/12 15:44

ごお回答ありがとうございます。一つ疑問点として、なぜメソッド内なのにもかかわらず、thisが参照できないのでしょうか？

hoshi-takanori

2020/03/12 16:59

JavaScript の this はかなり特殊なのです。 https://qiita.com/takkyun/items/c6e2f2cf25327299cf03

行動規範の内容に同意します

gentaroさんとmaisumakunさんの回答、hoshi-takanoriさんのコメントに対する補足であり、回答ではありません。解決されたようですが、途中まで書いていたので、せっかくなのでshareしたいと思います。

下記は、メソッド change() の呼び方によって、 this が何を指すのかが変わるという例です。これはJavaScriptの仕様であり、JavaScriptで書かれたライブラリであるReactも影響を受けます。

html
1<!doctype html>
2<meta charset="UTF-8">
3<title>*</title>
4<p><span id="name">Anakin</span> is the <span id="team">Jedi</span> Knight</p>
5<button type="button">Change</button>
6<script>
7
8class ForceUser {
9  constructor() {
10    this.name = document.getElementById('name');
11    this.team = document.getElementById('team');
12
13    const btn = document.getElementsByTagName('button')[0];
14    btn.addEventListener('click',       this.change);
15    btn.addEventListener('contextmenu', this.change.bind(this));
16  };
17
18  change(evt) {
19    evt.preventDefault();
20    console.log(this);
21
22    this.name.textContent = this.name.textContent === 'Anakin' ? 'Vader' : 'Anakin';
23    this.team.textContent = this.team.textContent === 'Jedi'   ? 'Sith'  : 'Jedi';
24  };
25}
26const forceUser = new ForceUser();
27
28</script>

change() は this として ForceUser (のインスタンス) を取り扱うことを期待していますが、 bind していないクリック時には <button> が格納されてしまっていて期待通りの動きをしません。 bind している右クリック時には期待通りの動きをします。

投稿2020/03/22 06:27

thyda.eiqau

総合スコア2982