Javascript なぜthisを使うのでしょうか？

Question

初歩的な質問で申し訳ないのですが、どなたかお答えいただければ幸いです。

thisの意味がわからなかったので、調べていたところ
下記の記事にて、貼り付けている通りの記述がありました。
https://qiita.com/takeharu/items/9935ce476a17d6258e27

//メソッド呼び出しパターン
var myObject = {
  value: 10,
  show: function() {
    console.log(this.value);
  }
}
myObject.show(); // 10

でも下記のような初心者向けの記事には、貼り付けてあるように記述されています。
https://www.sejuku.net/blog/27205

var array = ['apple','banana','lemon','orange'];
      console.log(array);

varで宣言した変数を、this.valueと書いたり、そのまま変数で書いたりするのはなぜなんでしょうか？

初歩的な質問で申し訳ないのですが、どなたかご回答のほどおねがいします＞＜

Answer 1

例をできるだけ同じ形になるように書きかえてみます。

// (1)
var myObject = {
  value: 10,
  show: function() {
    console.log(this.value);
  }
}
myObject.show(); // 10

// (2)
var show = function() {
  var value = 10;
  console.log(value);
};
show(); // 10

value の位置が(1)と(2)で違うのが分かるでしょうか。
(1) では myObject の中に value というキーがあって、その値が 10 です。
(2) では show の中に value という変数があって、その値が 10 です。

(2)については問題ないと思います。普通の変数の使い方ですね。

(1)についてですが、……そもそも、なんで show の中で value の値が使えるのでしょうか？
だって、show はただの関数ですよね。 value とかいう変数なりキーなりが存在することは、show は全く知らないはずです。
もし「何を言ってるのか分からない」と思われるなら、こう書いたらはっきりするのではないでしょうか。

// (1')
var show_func = function() {
  console.log(this.value);
};
var myObject = {
  value: 10,
  show: show_func
}
myObject.show(); // 10

show_func は value なんて知らないはずです。なのに this を通して myObject の value にアクセスできています。
なんで？？？

……というのが、this を理解するポイントです。

で、this とは何かですが、JavaScript で関数を呼び出すときに何が起きているかを考えればよいです。

myObject.show();

JavaScript で myObject.show() という呼び出しをすると、「show の this に myObject を束縛（代入）してから show を呼び出す」という動作をします。

この辺、関数呼び出しが実行コードへのただのジャンプであるような他の言語（Cとか）とは違います。間に代入処理が挟まっているんです。

さて、元のコードに戻ります。

// (1)
var myObject = {
  value: 10,
  show: function() {
    console.log(this.value);
  }
}
myObject.show(); // 10

show は value がなんなのか、全く知りません。でも、this は知っています。自分を呼び出したオブジェクトです。

つまり this.value とは、「自分を呼び出したオブジェクトの value にアクセスする」という意味です。

そしてこの場合、自分（show）を呼び出したのは…… myObject ですね。
なので myObject.value にアクセスできるわけです。

【まとめ】
① myObject.show は value の存在を知らないので、そのままではアクセスできない
② なので this（←これが今の場合は myObject になっている）を介してアクセスする必要がある

……という感じでいかがでしょうか？
分かりづらいかな……。

Comments

[hitominjar]

ありがとうございます！ご丁寧な解説で非常に理解が深まりました！

thisを使う意義というのは、より複雑なコードを書く時に、そのほうが都合がいいから？と言う事でしょうか？

[pute]

うーん、そもそも「ローカル変数」とか「javascript における {}の意味」とかは理解されていますか？

[hitominjar]

グーグルで調べた内容ですが、、、下記のような感じと把握してます＞＜

javascript における {}の意味
→オブシェクトの生成

ローカル変数
→Varをつけて変数を宣言してる
グローバル変数じゃない

[pute]

{} はそれでいいです。ローカル変数についてもまあいいです。
> より複雑なコードを書く時に、そのほうが都合がいいから？
ここの意味がちょっと読み取れませんでした。「都合」ってどういう意味合いで使われているんでしょうか？

[退会済みユーザー]

> thisを使う意義~~
「myObject.valueと書かずにわざわざthisを使うのはそっちの方が都合がいいからなのか？」という風なことが言いたいのでは･･･？

[hitominjar]

すみません、実際にどういうケースで、thisを用いたコーディングが必要なのかがまだイメージできませんでした＞＜
でもthisを使えば自分を呼び出したオブジェクトの value にアクセスできることはわかりました。

Answer 2

実際にどういうケースで、thisを用いたコーディングが必要なのかがまだイメージできませんでした＞＜

↓あえてthisを使わず書いてみました。これはわかりますよね？

var myObject = {
  value: '俺',
  show: function() {
    console.log(myObject.value);
  }
}
var ourObject = {
  value: '俺たち',
  show: function() {
    console.log(ourObject.value);
  }
}

myObject.show(); //'俺'
ourObject.show(); //'俺たち'

よく見ると、showメソッドが同じようなコードなのでまとめて書きたくなりますね。
↓でも、単純に書こうとすると、ちょっと困ります。

var myObject = {
  value: '俺',
  show: show,
}
var ourObject = {
  value: '俺たち',
  show: show,
}

function show(){
  console.log(?????.value); //????? は、myObject の時も ourObject の時もある。
}

こういう場合どうするか。
↓引数に自分自身を渡せば上手くいきます。

var myObject = {
  value: '俺',
  show: show,
}
var ourObject = {
  value: '俺たち',
  show: show,
}

function show(who){
  console.log(who.value);
}

myObject.show(myObject); //'俺'
ourObject.show(ourObject); //'俺たち'

でも、myObjectと2回書くのはだるいですね。
これが、2つだからまだいいですが、増えてくるとこうなります。

var myObject = {
  value: '俺',
  show: show,
}
var ourObject = {
  value: '俺たち',
  show: show,
}
//...

function show(who){
  console.log(who.value);
}

myObject.show(myObject); //'俺'
ourObject.show(ourObject); //'俺たち'
yourObject.show(ourObject); //'お前ら'
hisObject.show(hisObject); //'彼'
herObject.show(herObject); //'彼女'

コピペで書くにしても、何かしら間違えそうです。
（ちなみに、１か所わざと間違えているところがありますが、気づきました？）

自分自身を参照できる書き方があれば楽ですよね。
↓たとえば、こんな感じで。

var myObject = {
  value: '俺',
  show: show,
}
var ourObject = {
  value: '俺たち',
  show: show,
}
//...

function show(){
  console.log(this.value);      // this
}

myObject.show(); //'俺'
ourObject.show(); //'俺たち'
yourObject.show(); //'お前ら'
hisObject.show(); //'彼'
herObject.show(); //'彼女'

Comments

[hitominjar]

今ハッキリと理解できました！！ご丁寧にありがとうございます＞＜