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

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

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

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

Q&A

解決済

2回答

1165閲覧

js 呼び出しの時に関数の生成がされることについて

L85A2

総合スコア60

JavaScript

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

0グッド

0クリップ

投稿2018/11/16 07:24

https://qiita.com/takeharu/items/809114f943208aaf55b3
を参考に勉強しています。

疑問に思ったのですが

js

1function Dog() { 2 this.bark = function() { 3 console.log('わんわん'); 4 }; 5} 6var dog = new Dog(); 7dog.bark(); //'わんわん';

毎回毎回関数が生成されちゃうんです!
と記述されていますがnewを使わなければ関数を毎回生成することはないのではないかと思いました。

以下自分で考えたコードです

js

1 function Dog() { 2 console.dir("犬"); 3 this.bark = function() { 4 console.log('わんわん'); 5 }; 6 } 7 8 Dog(); 9 console.dir(this); 10 this.bark();

このようにwindowのfunctionに記述してしまえば関数を呼び出したときに毎回関数を生成しなくても済むのではないかと思いました。しかし実際に生成されているかどうか判断する材料がない、もしくはわからないのでどなたかわかる方はいないでしょうか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

そもそも下の考えたコードは欠陥品ですよ。

JavaScript

1function Dog() { 2 console.dir("犬"); 3 this.bark = function() { 4 console.log('わんわん'); 5 }; 6} 7function Fox() { 8 console.dir("狐"); 9 this.bark = function() { 10 console.log('こんこん'); 11 }; 12} 13 14Dog(); // 犬 15Fox(); // 狐 16this.bark(); // こんこん

わんわんどこいった
という訳で、グローバルのthisに双方が書こうとした結果、上書きされて犬の鳴き声メソッドが死にました。
何故dog変数作ってdog.barkにしようと思ったのかという意味を汲み取るようにしましょう。


しかし実際に生成されているかどうか判断する材料がない、もしくはわからないのでどなたかわかる方はいないでしょうか?

JavaScriptの関数・オブジェクト・配列は面白い特性があり、
比較演算子===で検証した場合、それが格納されているアドレス番地で比較して同じか否かを判定します。

JavaScript

1var o = {name: "taro"}; 2console.log(o === o); // true 3console.log(o === {name: "taro"}); // false 4 5var a = [123]; 6console.log(a === a); // true 7console.log(a === [123]); // false 8 9var fn = function () { return 123; }; 10console.log(fn === fn); // true 11console.log(fn === (function () { return 123; })); // false

このように全く同じように思えるものでも、
その場で{}[]function(){}で生み出したものは別のアドレス番地に一時的に作られてそのアドレス番地同士で比較するのでfalseになります。
この特性を使えば、「毎回生成されたのか否か」を確認することができます。

JavaScript

1function Dog (p) { 2 this[p] = function () { 3 console.log('わんわん'); 4 } 5} 6Dog('taro'); 7Dog('jiro'); 8console.log(this.taro === this.jiro); // false

違うものが生成されました。
従ってDogを二度実行して手に入れたこれらの関数は毎回生成されたと言えます。
つか、関数実行したら上から下まで実行するんだから生成してるに決まってるんですけどね。

投稿2018/11/16 08:44

miyabi-sun

総合スコア21158

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

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

0

newを使わなければ関数を毎回生成することはないのではないかと思いました。

いえ、「以下自分で考えたコード」の場合も、Dog()を呼ぶたびにbarkは新しく生成して、上書きされます。

投稿2018/11/16 07:27

maisumakun

総合スコア145123

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

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

maisumakun

2018/11/16 07:28

…というより、オブジェクトに結びついた「メソッド」と、グローバルに置いておく「関数」では、使い方が違ってきます。
L85A2

2018/11/16 07:32

newの記述関係なしにDog()を呼ぶとbarkは新しく生成されて上書きされてしまうのですね Dog()を呼ぶたびにDog()自体は新しく生成されないのでしょうか?
maisumakun

2018/11/16 07:33

function Dog()という宣言自体が、グローバル(あるいはローカルの名前テーブル)へのDogの代入となっていますので、呼んでも呼ばなくても定義は1度きりです。
maisumakun

2018/11/16 07:34

barkをただグローバルから呼びたいだけなら、こんな二度手間なことをしなくても、「function bark(){}」で作ってしまえばそれで片付きます。
L85A2

2018/11/16 07:39

理解できたと思います。 Dogを呼ぶとDogの中で宣言したbark を再度宣言してしまうので、毎回関数を生成してしまいます。
L85A2

2018/11/16 07:41 編集

this.bark();自体は何回呼んでもbark関数は、生成されないと思いますがその認識であってますか?
maisumakun

2018/11/16 07:43

「this.bark();自体は何回呼んでもbark関数は、生成されない」のは正しいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問