• ベストアンサー

js コンストラクタ関数 解釈

javascript コンストラクタ関数 jsのコンストラクタ関数と普通の関数の相違点は 「new」を付けて関数を呼ぶかどうかでコンストラクタ関数は初期化しているという解釈は間違っていますか?

質問者が選んだベストアンサー

  • ベストアンサー
  • chie65535
  • ベストアンサー率43% (8522/19371)
回答No.2

間違っています。 newを付けても初期化はしません。 例1 function foo(ber, hoge) { this.ber = ber; this.func = function() { console.log(hoge); }; } var hogehoge1 = foo('やあ','こんにちは'); console.log(hogehoge1.ber); //エラー hogehoge1.func(); //エラー var hogehoge2 = new foo('あら','ごきげんよう'); console.log(hogehoge2.ber); //あら hogehoge2.func(); //ごきげんよう 例2 function foo(ber, hoge) { var self = {}; self.ber = ber; self.func = function() { console.log(hoge); }; return self; } var hogehoge1 = foo('やあ','こんにちは'); console.log(hogehoge1.ber); //やあ hogehoge1.func(); //こんにちは var hogehoge2 = new foo('あら','ごきげんよう'); console.log(hogehoge2.ber); //あら hogehoge2.func(); //ごきげんよう 例1のhogehoge1は、newが無いので、関数を直接に呼び出してしまっています。その結果、関数からundefinedが返され、次の2行はエラーになります。 例2のhogehoge1は、newが無くても「newがある時と同じ動作」をします。 つまり、new演算子は、例1のように書いてある関数を、あたかも、例2のように書いてあるかのように動作させる演算子なのです。 なので「コンストラクタ関数で初期化している」と言う概念は適用できません。

その他の回答 (1)

  • t_ohta
  • ベストアンサー率38% (5080/13276)
回答No.1

「new」は指定したオブジェクトの prototype 宣言されたプロパティやメソッドをコピーし新たにインスタンスを生成する命令で、関数を呼ぶ命令ではありません。 そして、新たなインスタンスを生成する時に実行されるのがコンストラクタです。 コンストラクタの役割はインスタンスの初期化もありますが、引数で値を渡して一連の処理をさせるメソッドとしても使えるモノですから、初期化だけが役割ではありません。

関連するQ&A

  • 用語/newを伴わないコンストラクタの呼出=関数?

    コンストラクタを勉強しているのですが、「用語」「意味」が分からないので、教えてください ■質問1 ・いついかなる時でも、「コンストラクタ関数」=「コンストラクタ」=「関数」=「メソッド」なのでしょうか? ・例えば、「newをつけずに、コンストラクタを関数として呼ぶ」場合も、「コンストラクタを実行する」と言うのでしょうか? ■質問2 … 「new」付与による相違 ・「new」付与しないと、「コンストラクタ」内で「this」が指し示す対象が異なる(グローバルオブジェクトになってしまう)のだと思うのですが、それ以外に何か相違点はあるのでしょうか? ・「new」付与しないとオブジェクトが正しく生成されないので、不具合が生じる可能性がある? ■質問3 ・「new」を付けずに、オブジェクトを関数として実行するのは、例えばどういう使い方をするときなのでしょうか?

  • jsファイルで配列を定義し、jsファイルを切りかえて使う

    お世話になります。 jsファイルで配列を定義し、その配列の内容を表示しています。 いくつかのjsファイルで配列を定義し、そのjsファイを切りかえることにより、表示する配列の内容を切りかえることはできないでしょうか。 例えば data_a.js DataAry = new Array( new WNData('2006/11/10','ああ','・・.html'), new WNData('2006/11/10','いい','・・.html'), ・・・・・ ); data_b.js DataAry = new Array( new WNData('2006/11/10','aa','・・.html'), new WNData('2006/11/10','bb','・・.html'), ・・・・・ ); dspDataAry.jsで function WNData(Date,Cmnt,Href,Target){ this.Date=Date; this.Cmnt=Cmnt; this.Href=Href; } function DspData(){ strhtml="・・・・ (DataAryを表示するhtmlを作成) return strhtml; } dspDataAry.htmlで <script type='text/javascript' src='dspDataAry.js'></script> <script type='text/javascript' src='data_a.js'></script> <body> <script type='text/javascript'><!-- document.write DspData(); //--> </script> <input id="btn_b" type="button" value="bを表示" onClick="bを表示する関数"<br> </body> とすれば、data_a.jsの配列の内容が表示されます。 ボタン「bを表示」を押すことにより、 data_b.jsを読み込んで、その内容を表示するようにできないものでしょうか。 onClick="bを表示する関数"この「bを表示する関数」をいう関数をどのように書いたらよいのかわかりません。 data_a.js、data_b.jsで定義する配列名は同じとします。 data_c.js、data_d.js・・・といくつかに分けたく思っています。 前もってdata_b.jsを読み込むのでなく、必要に応じて読み込んで表示するようにしたいのですが。 よろしくお願いいたします。

  • jsライブラリーの基本的な事で??

    今から十年ぐらい前にjsを使うのにブラウザがv1.3以上をサポートしているかどうかで足切りをしていました。 その後ブラウザでhtmlやjsの解釈や拡張で違いが大きくなって(嫌だったけど)ie推奨でコンテンツを作成してきました。 今でもhtmlの解釈の相違は有るかと思いますがjsの相違が大きい気がしています。 そのjsの相違を吸収し拡張してくれるライブラリーがたくさん出ていますが何を押さえて置けば良いのでしょうか? たまたま今回jQueryに興味を持ったのですが、jsに出来ることはほぼサポート出来ているのでしょうか? ライブラリーにも、おのおの得手不得手も有ると思いますがご推薦を頂けると幸いです。 ブラウザを気にせずjsのフル機能を簡単に記述するのに適した2・3点をお教え下さい。 宜しくお願いします。

  • constructorプロパティとオブジェクト関係

    JavaScriptのconstructorプロパティについて教えてください。 ・constructorプロパティは、内部プロパティ[[Construct]]と同義でしょうか? ・constructorプロパティが存在しない組込オブエジェクトは、「Global」「Math」「JSON」の三つだけ? ・上記以外の組込オブエジェクトは、全てnewできる、ということでしょうか? ・「new Object」「new Function」できるのは、constructorプロパティがあるから、という理解で合っているでしょうか?

  • PHP内でjsファイルの関数は使えないのでしょうか

    こんばんは、Webページ制作の勉強で問題にぶつかり、少々お知恵をお借りしたく質問させて頂きました。 あるPHPファイルの中の <!doctype html> <html> //ここにHTMLの記述があるとします。 </html> のHTMLの記述の中に <script src="example_A.js"></script> <script src="example_B.js"></script> のような形で他のページでも使っているJavascriptのファイルを読み込んで使用しようとしたのですが、一部の処理だけが行われないようのです。 そこでjsファイルの中で使えない記述に共通点が無いか確認してみたところ、 $(function() {   //ここに処理 }); のように、関数のみが動作して居ない事が解りました。 そこで質問なのですが、PHPファイルの中では、<html>の中で記述されたスクリプトだとしても関数の中で記述された処理は使えないという事なのでしょうか? また、もしPHPの中でも関数を動作させる方法があれば、教えて頂けないでしょうか。 宜しくお願い致します。

    • 締切済み
    • PHP
  • コンストラクタ?

    FireFox2のエラーコンソールで以下のようなユーザ定義クラスを作成しています。 期待する動作は、documentに、 12 と出力されることです。 が、FireFoxのエラーコンソールには、 エラー: NewClass is not a constructor ソースファイル: file:///C:82%AF%E3%83%88%E3%83%83%E3%83%97/docs/temp.html 行: 20 と表示されています。おそらく、NewClass の コンストラクタの書き方が誤っているのではないかと思いますが、webで調べても正しいコンストラクタの書き方 というのが見つけ切れませんでした。期待動作を満たす為にはどのようにかけばよいでしょうか? <script type="text/javascript"> function NewClass(){    /*ここが誤っている?*/ // } NewClass = { ClassValue1:1, ClassValue2:2, ClassFunc:function() {alert('わん');} } ClassTest = new NewClass(); document.write( ClassTest.ClassValue1 ); document.write( ClassTest.ClassValue2 ); </script>

  • *.js ファイルの読み込みについて

    お世話になります。 *.jsファイルを読み込むのに <script type='text/javascript' src='abc.js'></script> とすれば、できます。 これを、 <script type="text/JavaScript"> <!-- src='abc.js; ・・・・・・・・・ ここにabc.js内の関数などを記載 ・・・・・・・・・ //--> </script> と、いう形にできないものでしょうか。 このままだと、abc.jsは読み込まれません。 よろしくお願いします。

  • javascriptのconstructorプロパティについて

    constructorプロパティとは、 オブジェクトの初期化で使用されたコンストラクタ関数を参照 とのことなので、下記2パターンのPGを作成しました 1.prototypeの明記なし function Hoge(){ this.init = "Hogeで初期化"; this.getInit = function(){ return this.init; } } var obj = new Hoge(); alert(obj.constructor == Hoge); for(prop in obj){ alert( prop + " - " + obj[prop]); } //実行結果 True init - Hogeで初期化 getInit - function () { return this.init; } 2.prototypeの明記あり function Hoge(){ this.initialize.apply(this,arguments); this.init = "Hogeで初期化"; this.getInit = function(){ return this.init; } } Hoge.prototype ={ initialize:function(){ this.init = "Hoge.prototype.initializeで初期化"; }, getInit:function(){ return "Hoge.prototype.getInit()"; } } var obj = new Hoge(); alert(obj.constructor == Hoge); for(prop in obj){ alert( prop + " - " + obj[prop]); } //実行結果 false init - Hogeで初期化 getInit - function () { return this.init; } initialize - function () { this.init = "Hoge.prototype.initialize\u3067\u521D\u671F\u5316"; } ・質問内容 prototypeの明記なしの場合は、Hogeのコンストラ関数を参照している(結果がTrueのため) prototypeの明記ありの場合は、falseのためコンストラ関数を参照していないのですが、 prototype明記あり、なしで結果が異なる理由が分からない状態です。 (prototype.constructorにも手を出したのですが、上記が解決しないため  constructorプロパティに関してのみ質問した次第です) ネット、書籍等で調べたのですが、検討がつかない状態です。 お手数ですが、ご教授お願い致します。

  • 【PHP】コンストラクタ―について

    コンストラクタ―について検索して調べると概ね以下のように説明されています。 ---------------------------------- コンストラクタ インスタンス生成時にオブジェクトを初期化したい場合にコンストラクタメソッドを使用できます。 コンストラクタメソッドは以下のように引数を指定する事もでき、インスタンス生成時に__construct()が自動的に実行されます。 ---------------------------------- イマイチ判然としません。 「newによってインスタンスを作成される時に自動的に呼び出されるもの」と自分では解釈していました。 例えば以下のような場合 public function __construct($text) { $this->text = $text; } 【$text】の値をnewされることによって自動的に「保持」されるということなのでしょうか? 実際に表示させるときは【$posts[0]->show();】(show()メソッド)で表示させるわけですよね? その上には【private $text;】でプロパティがあります。 ごく基本的な質問かと思いますが、【public function __construct($text)】 コンストラクタ―を作成する理由がよくわかりません。 初学者でも分かりやすいように解説していただけないでしょうか? 宜しくお願い致します。 <記述サンプル> ------------------------------- <?php class Post { private $text; public function __construct($text) { $this->text = $text; } public function show() { printf('%s' . PHP_EOL, $this->text); } } class SponsoredPost extends Post { private $sponsor; public function __construct($text, $sponsor) { parent::__construct($text); $this->sponsor = $sponsor; } public function showSponsor() { printf('%s', $this->sponsor); } } $posts = []; $posts[0] = new Post('hello'); $posts[1] = new Post('hello again'); $posts[2] = new SponsoredPost('hello hello', 'Yahoo'); $posts[0]->show(); $posts[1]->show(); $posts[2]->show(); $posts[2]->showSponsor();

    • ベストアンサー
    • PHP
  • JSのクラスについて

    JSのクラスについて https://okwave.jp/qa/q9320085.html の続き >>> >するとCat.nameとなりCatクラスという箱の中に入っているnameプロパティ?いや引数という事なのでしょうか? 引数ではなくプロパティです、ここではクラス内部のローカル変数と説明しているモノです(初心者に分かりやすいか どうかは別としてプロパティと言った方が正確ですね)。 関数内部(関数が持っている)のローカル変数は ご存知ですか?、それに類似しています、この場合はクラス内部(クラスが持っている)のローカル変数と言うイメージです。 Cat.nameとなりCatクラスという箱の中に入っているnameプロパティなのですね。 nameとコンストラクタの引数があるのでthis.nameのnameも引数なのかと思ったのですが、ドットつながりなのでcatクラス(オブジェクト)の中にあるnameプロパティ という事ですね。 関数のスコープの中で宣言する変数のことですよね。 巻き上げが起こる変数ですね。 これとクラス内の変数はほぼ同じ挙動をするという事ですか? するとスコープがクラスにもあるのでしょうか? 巻き上げも >>> >なぜこの例えはこんなわかりにくいことをしたんですかね? 恐らく同じ名前でも「this.」が付いてるか付いてないかで区別できるので、同じ名前でもコンフリクト(衝突、競合)せずに使えると言う例を示したかったのかもしれません。 thisで別の引数?の物と区別できるという事を伝えたかったのですね。 ただ二つはコンストラクタの引数でthis.nameだけはそもそも引数ではなくプロパティなので、 仮にかぶっても問題ないのでしょうね。 >>> >変数と似ている箱で 変数と違う箱と考えて下さい。 オブジェクト、クラス、関数、変数などいろいろな箱がありこんがらがるのですが、 もしかしてこれらはすべて変数なのですか? つまり箱はすべて変数で、これらは少し個性の違う変数なのでしょうか? >>> >特殊な箱でなんでも好きに入れ替えできず、 >入れられるものと入っていなくても良いものが固定されている箱という事でしょうか? >つまり変数と違ってコンストラクタが絶対に入っている箱なのですね。 初期設定が必要ないなら、コンストラクタは必要ないようです。 クラスをインスタンス化したい場合のみコンストラクタは必要で、 インスタンス化が不要なクラスなら必要ないという事でしょうか? ただクラスはインスタンス化しないと利用できないので、 文法上はコンストラクタなしでも良いが、実際はそのようなことはあり得ないという事でよいでしょうか? またインスタンス化と初期設定の違いが判らないのですが、イコールと考えてよいでしょうか? >>> >入れられないものもあるのですか? クラス内クラスは無理なようです。 それ以外はオブジェクトのように入れられるのですね。 >>> >var コンストラクターの「name」= my cat;という事ですかね? その説明は変な感じです、実際のプロセスを考えて下さい(「my cat」ではなく"my cat"文字列です)。 new Cat("my cat") ←ここでコンストラクターの「name」仮引数に"my cat"文字列が代入され、「constructor(name) {this.name = name}」が呼ばれます。 constructor(name) {this.name = name} とは constructor関数の中に中カッコ内の式があり、 catクラス内のnameプロパティにconstructorの引数nameを代入するという事ですよね。 不思議なのはconstructorの引数nameを代入する部分なのですが関数の引数を代入するというのは初めて見ました。 仮引数nameなので constructor(name) { var name = "my cat"; this.name = name } という事ですよね。 つまり下記のcatクラスの引数が実引数になるという事ですよね。 //インスタンス作成 var clsObj = new Cat("my cat"); 関数であれば関数の呼び出しにある引数が実引数として代入されますが、 クラスの場合はconstructor関数の呼び出しにある引数ではなく クラスのインスタンス化にある引数が実引数として代入されるというルールなのですね。 constructor関数の呼び出しがないのが不思議でしたが、 constructor関数は定義するだけで呼び出しはしなくても実行されて、インスタンスを作成するのですね。 そして constructor(name) { var name = "my cat"; this.name = "my cat" } となりプロパティnameに文字列mycatが代入されるのですね。 >>> 「インスタンスの引数」と言うのは違います。 new Cat("my cat"):Catクラスに実引数"my cat"文字列を設定しnewすると、コンストラクターの「name」仮引数に"my cat"文字列が代入され、「constructor(name) {this.name = name}」が呼ばれ、インスタンスが生成されます。 こちらも上記の説明で正しいでしょうか? >>> コンストラクターが在る場合もコンストラクターは初期設定だけです。 クラス"設計図"からインスタンス"実態"を作成すると言う事で、例えるなら十徳ナイフの"設計図"から十徳ナイフの"実態"を作成すると言うイメージして下さい。 (十徳ナイフの"実態"を作成しても)十徳ナイフが置いてあるだけでは何も役に立ちません、十徳ナイフは使ってこそ役に立つ訳です、例えば十徳ナイフの「栓抜き」(機能)を使うと言うのが「栓抜き」メソッド、「缶切」(機能)を使うと言うのが「缶切」メソッドに対応すると言うイメージです。 なるほどクラスがナイフの設計図で、constructor、newクラス名がナイフを作るための作業で、 ナイフがインスタンス化されたオブジェクトですが、この時点では何のメリットもないのですね。 インスタンス化されたオブジェクトを使う作業がメソッドという事ですね。 下記例ですとnew Cat("my cat");がナイフを具現化する作業(constructorもこれに当たる?)で、 実際に使うメソッドはここにはないのですかね? class Cat { (name) {this.name = name} meow() {alert( this.name + 'はミャオと鳴きました' )} } //インスタンス作成 var clsObj = new Cat("my cat"); //インスタンス(オブジェクト)の中身を出力 console.log(clsObj); >>> 仮引数とローカル変数(プロパティー)とは違います。 ローカル変数(プロパティー)はクラスの箱の中に定義されるモノです(添付画像参照)。 上記でも記載した、仮引数と実引数が実質var name = "my cat";というローカル関数と同じ結果になるという意味で書いたのですが、 それでも違うでしょうか? もちろん同じものではないですが、実質同じ結果にはなるのですよね。 >>> そして constructor(name) { var name = "my cat"; this.name = "my cat" } となりプロパティnameに文字列mycatが代入されるのですね。 下記が同じ結果になるという意味なのでしょうね。 >>> 申し訳ございません訂正です、引数を引数としか考えてませんでしたが、ローカルと言われれば確かに引数もローカル変数でした。 関数のローカル変数とインスタンスのプロパティーは類似していますが、インスタンスのプロパティーは値が保持されます。 ちなみに(コンストラクター以外は)クラスの構造がインスタンスの構造に反映されます(添付画像参照)。 関数のローカル変数とインスタンスのプロパティーは類似していますが、インスタンスのプロパティーは値が保持されます。 ここがよくわからないのですがconstructor(name)のnameは引数ではなくプロパティなのですか? 見た目は引数に見えますが、違いとしてはプロパティは値が入れられる箱であり、 仮引数はローカル変数名でしかなく、ローカル変数そのものではないので、箱ではなく、値を入れられないのですかね?

専門家に質問してみよう