質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16442questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 577

hitominjar

score 13

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

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と書いたり、そのまま変数で書いたりするのはなぜなんでしょうか?

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+7

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

// (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 になっている)を介してアクセスする必要がある

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/23 18:11

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

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

    キャンセル

  • 2018/05/24 21:07

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

    キャンセル

  • 2018/05/24 21:42

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

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

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

    キャンセル

  • 2018/05/24 22:48

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

    キャンセル

  • 2018/05/27 06:36

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

    キャンセル

  • 2018/05/29 19:15

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

    キャンセル

+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); //'彼女'


コピペで書くにしても、何かしら間違えそうです。
(ちなみに、1か所わざと間違えているところがありますが、気づきました?)
 
自分自身を参照できる書き方があれば楽ですよね。
↓たとえば、こんな感じで。

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(); //'彼女'

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/29 20:08

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16442questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。