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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

3回答

171閲覧

thisの参照先に関して

newyee

総合スコア213

JavaScript

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

0グッド

0クリップ

投稿2018/09/10 04:35

編集2018/09/10 05:13

「this」についてお聞きしたいことがあります。

javascript

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 6</head> 7<body> 8<script> 9 10 var Animal = function(){ 11 12 console.log(this); 13 }; 14 15 16 17 18 Animal.prototype = { 19 walk : function() { 20 console.log('トコトコ...'); 21 } 22 }; 23 24 var Dog = function() { 25 26 27 }; 28 29 30 31 Dog.prototype = new Animal(); 32 33 Dog.prototype.bark = function(){ 34 35 36 } 37 38 var d = new Dog(); 39 40 41 42 43 44 45</script> 46</body> 47 48</html> 49

上記をコンソールで出力しますと、「Animal{}」と表示されますが、関数内でのthisの参照先はグローバルオブジェクトではないのでしょうか?何故、「Animal{}」と表示されるかが分かりません。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2018/09/10 05:04

関数呼び出し側のコードはどうなっていますか。このままでは、this 値が不定です。
newyee

2018/09/10 05:14

すみません。コードの方、修正しました
guest

回答3

0

ベストアンサー

this が指す値は、その関数の呼び出し方で決まります。

尚、質問者さまのコードでは、 new Dog() の部分で console.log() を呼び出しているイメージでいらっしゃるようにお見受けしますが、実際に console.log() のコードブロックが実行されているのはその前にある、Dog.prototype = new Animal(); の部分です。

さて、本題の this が指す値ですが、

  1. function() の形のとき -> 特に this が再設定されない (つまり関数定義した場所で this が指している値。通常は global オブジェクト)
  2. new function() の形のとき -> 生成中のインスタンス
  3. object.function() の形のとき -> ドット演算子の左辺にあるオブジェクト (ただし関数をラムダの形式で定義した場合は別)
  4. Function.prototype.call や .bind を利用した場合 -> 引数で指定したオブジェクト

といった法則で決まります。ご質問者様の例は、2番目のパターンですね。

参考までに↓

JavaScript

1var Animal = function(){ 2 console.log(this); 3} 4 5Animal(); // => window オブジェクト 6new Animal(); // => Animal オブジェクト 7var obj = { animal: Animal, toString: function(){ return 'obj'} }; 8obj.animal(); // => obj 9var obj2 = { toString: function(){ return 'obj2' }}; 10Animal.call(obj2);// => obj2

投稿2018/09/10 15:16

R.Mizukami

総合スコア1077

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

newyee

2018/09/11 05:18

ご丁寧にご回答頂きありがとうございます。 ご回答頂いた、「new function() の形のとき -> 生成中のインスタンス」ここの部分なのですが、 質問させて頂いたコードのここの部分「 console.log(this);」では、 「Dog.prototype = new Animal();」とコンストラクタをインスタンス化する前なのですが、何故「this」の参照先がAnimalオブジェクトとなっているかが分かりません。コードの実行順序は変わってくる場合があるということなのでしょうか?
R.Mizukami

2018/09/11 15:27

Dog.prototype = new Animal(); という文は、 Dog のプロトタイプに、 Animal インスタンスを「生成」して設定する、という処理になります。 つまり、この段階でAnimal インスタンスが生成されます。 また、コンストラクタ内の処理が始まる段階で、すでにメモリは割り当てられていますので、Animal コンストラクタ内では常に Animal オブジェクト自身を参照できます。
newyee

2018/09/12 00:55

ありがとうございました。 なんとなく、理解できたきがします。 他の方々にも意見を頂いたのですが勉強不足が故、理解しきれていない部分がありますので、もう少し勉強に励みたいと思います!
guest

0

呼び出し側のコードがないようですが、new 演算子を使っているのではないですか。

非Strcit Modeであり、オブジェクトのプロパティではない関数を関数呼び出しされれば、this 値はグローバルオブジェクトになります。

HTML

1<script> 2var Animal = function() { 3 console.log(this); 4}; 5 6Animal(); // グローバルオブジェクト 7new Animal(); // new Animal 8</script>

Strict Mode なら undefined になります。

HTML

1<script> 2'use strict'; 3var Animal = function() { 4 console.log(this); 5}; 6Animal(); // undefined 7</script>

Re: newyee さん

投稿2018/09/10 05:01

編集2018/09/10 05:02
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

newyee

2018/09/10 05:28

ご回答ありがとうございます。 実は、「this」を理解する上で若干混乱してしまっている部分があり、初歩的な質問となってしまうかもしれないのですが、「var Animal = function() { console.log(this)};」こちらのコードを「new Animal」とインスタンス化した場合、ただの関数リテラルだった、「変数Animal」が、「オブジェクト」なる、という理解で合っていますでしょうか?
think49

2018/09/10 06:08 編集

"「変数Animal」が、「オブジェクト」なる" という表現に違和感があります。 コンストラクタ関数内では「new 演算子で生成されたオブジェクト」が this 値になります。 その this 値は Animal.prototype をプロトタイプとして参照します。
guest

0

ユーザー関数のthisはwindowです
function()を使う限り自分自身はcalleeで参照可能

javascript

1var Animal = function() { 2 console.log(this); 3 console.log(arguments.callee); 4}; 5Animal(); 6new Animal();

newでインスタンスを得る場合thisは自分自身(object)になります

投稿2018/09/10 04:53

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問