JavaScriptのnew演算子について

このQ&Aのポイント
  • JavaScriptのnew演算子について質問があります。new演算子は悪いパーツと言われることがありますが、代替方法や問題点について知りたいです。
  • new演算子の使用を避けたオブジェクト生成方法について考えていますが、例えば__proto__の使用を避けたコードはあり得るのでしょうか?また、new演算子が悪いと言われる理由は汚染の問題だけなのでしょうか?
  • オブジェクトとプロトタイプについての理解が曖昧なため、どのように学習すればよいか教えてください。詳しい方のアドバイスをお待ちしています。
回答を見る
  • ベストアンサー

javascript new演算子について質問があります。

javascript new演算子について質問があります。 只今javascript勉強中なのですが、どこかのサイトでnew演算子は悪いパーツとの 記事を読みました。 そこでnew演算子を使用せずにオブジェクト生成の方法を試行錯誤考えてみたのですが (IE用に__proto__もなしで)例えば以下コードはアリなコードでしょうか?? あるいはありえない感じでしょうか?? またnewが悪なのはインスタンスを作る時にnewを付け忘れると、 グローバルな汚染をしてしまうということだけなのでしょうか?? オブジェクトとプロトタイプの理解に苦しんでいるところなので 色々と曖昧なのですが、どなたかどうぞご教授お願い致します。 var obj = {}; obj.method = function(){ this.prop1 = "hoge" return this; }; obj.method.prototype = obj.method(); obj.method.prototype.prop2 = "fuga"; var obj2 = obj.method(); console.log(obj2)

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

  • ベストアンサー
  • my--
  • ベストアンサー率89% (91/102)
回答No.2

var obj = {}; obj.method = function(){ //new演算子と共に呼ばないとthisの値はobjになります //alert(this === obj); // true this.prop1 = "hoge"; // obj.prop1 = "hoge"; return this; // return obj; }; obj.method.prototype = obj.method(); // obj.method.prototype = obj; //alert(obj.method.prototype === obj); // true obj.method.prototype.prop2 = "fuga"; // obj.prop2 = "fuga"; var obj2 = obj.method(); //alert(obj2 === obj); // true //alert(obj.hasOwnProperty('prop1')); // true //alert(obj.hasOwnProperty('prop2')); // true objに直接プロパティprop1、prop2が追加されているだけですが これで理解できるでしょうか? new演算子、プロトタイプうんぬんは先ず基本的なところを抑えてから ではないかと個人的には思いますけど。 質問に関連する(と思われる)記事をいくつか読んでみました。 JavaScript: The Good Parts(存在すらしりませんでしたが良書と評判です) http://www.amazon.co.jp/gp/product/4873113911 『JavaScript:The Good Parts』を読んで http://www.kanasansoft.com/weblab/2009/04/javascriptthe_good_parts.html 『JavaScript:The Good Parts』にツッコミ http://www.kanasansoft.com/weblab/2009/04/javascriptthe_good_parts_1.html JavaScriptのnewって本当にいらない子? http://d.hatena.ne.jp/jdg/20090706 JavaScript に new 演算子は要らない http://diaspar.jp/node/224 確かにnew演算子を付け忘れても普通に関数が実行されるだけですから バグを見付けにくくやっかいかもしれないですね。 質問とは関係ないですが、関数とコンストラクタが明確に仕様で区別されていれば 普通にエラーを投げることができると思いますけど、ひと目でそれと分かる「コンストラクタ宣言」みたいなのがあってもいいような気はします。 私レベルが言えることは、それと分かる名前を付け、いちいちnew演算子を書かなくていいように 工夫することぐらいでしょうか。

poyon8989
質問者

お礼

なるほど、なんとな~く理解できてきたかなぁと思っていましたが、 基礎から勉強しなおしたいと思います。 サイトも参考にしてみます。 ご丁寧な回答ありがとうございました。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

昔のjavascriptはオブジェクト一つ作るにもnewをつかったもんですけどね・・・ 理解しないままprototypeをいじる方が危険なような・・・ <script> var obj = new createObj(); alert(obj.prop1) obj.method(); alert(obj.prop1) function createObj(){ this.method=method; } function method(){ this.prop1="hoge"; } </script>

poyon8989
質問者

お礼

ご回答ありがとうございます。 再度勉強してみます。

関連するQ&A

  • javascriptを只今勉強中なのですが、オブジェクトについてこんが

    javascriptを只今勉強中なのですが、オブジェクトについてこんがらがってしまいました。 var obj = new Object(); var obj2 = {}; Object.prototype.prop1 = "hoge"; obj,obj2共にprop1にhogeがセットされるのですが、オブジェクトリテラルのobj2は Objectコンストラクタのインスタンスと解釈できるのでしょうか?? new演算子について色々とfirebugで調べていたところこの疑問が出てきました。 newなしでもインスタンスができるのでしょうか? オブジェクトを理解していないので意味不明な質問かもしれませんが どなたかアドバイスいただけると嬉しいです。

  • javascriptのObject()コンストラクタについて質問です。

    javascriptのObject()コンストラクタについて質問です。 var obj = new Object(); var obj2 = Object(); console.log(obj === obj2)//false いつも質問ばかり恐縮です。。。 どこかのサイトでこの2つは等価みたいな記事を読んだような気がするのですが、 ということはObjectコンストラクタでオブジェクトを作る際はnew演算子は要らない?? のでしょうか?? またobjとobj2の2つの違いを色々試したのですが違いがわかりません。new演算子を 付けたインスタンスと付けないインスタンス??の違いをどなたか ご教授いただけると助かります。

  • (function(){})()の意味

    (function(){})() の意味がよくわからずに困っています。 下記の2タイプではどう意味が変わってくるのでしょうか? (1)var fuga = function(){}; (2)var fuga = (function(){})(); 下記のコードで実験してみたところ、 --------------------- var fuga = function(){ this.obj = 'value'; }; var fuga = (function(){ return { obj = 'value'; }; })(); --------------------- (1)の場合は、newしないとfugaオブジェクトのメンバを使用できない、 (2)の場合は、newしなくてもfugaオブジェクトのメンバを使用できるようなのですが、 (2)で(function(){})を取り除いて出てくる()はnewのエイリアスだったりするのでしょうか? 

  • javascriptでオブジェクトのメソッドを使う

    JavaScriptでnewでオブジェクト化したクラス(?)のメソッド、フィールドを利用する方法を教えて下さい。 javascriptにもオブジェクト化という考え方があると聞いたのですが、 例えば、Javaでいうsetter getterのようなメソッドを作り、使用することはできるのでしょうか? 下記のようなコードを実行したところ Uncaught TypeError: Object #<mousePosi> has no method 'setPara' というエラーが出てしまい、setParaというメソッドはない。と言われてしまいます。 しかし、mousePosi()をオブジェクト化することはできているようなので、 setParaとgetParaを使えるのではないかとおもいました。 どなたかアドバイス下さい。お願いします。 ------------------------------------------------------------------------------------------------- (function LineMain() { console.log("マウスの位置座標を表示"); // console.log("X座標=" + mymouse.x + ",Y座標=" + mymouse.y); //マウスムーブでeventControlを呼び出し addEventListener("mousemove", eventControl, false); function eventControl(event) { var event = event; var myMousePosi = new mousePosi(); myMousePosi.setPara(event); // console.log("X座標=" + obj.getMouse().x + ",Y座標=" + obj.getMouse().y); } function mousePosi() { var paraMouse = { x : 0, y : 0 }; function setPara(event) { this.paraMouse.x = event.x; this.paraMouse.y = event.y; } function getPara() { return this.paraMouse; } } })();

  • javascript 親オブジェクトと子オブジェクトを分離させたい

    例えばjavascriptで下のようなコードを書いたとします。 a=new Array() a[0]=new OBJ(); function OBJ(){ this.prop=document.getElementById('aaa') this.prop2=document.getElementById('bbb') } a[0].prop.addEventListener(click,func,false); function func(){ ??? } func()関数内でthisを使うとa[0].propを参照できます。 一方、a[0].prop2を参照するにはどうすればいいのでしょうか? 配列の要素番号を指定しないで参照させる方法が分からず悩んでいます。 下のようにもしできるのであればいいのですが。。。 a[0]とpropのオブジェクトを分割->a[0]オブジェクトを抜き出し-> a[0]オブジェクトにprop2を追加 または別の方法があるのでしょうか。 ぜひぜひご回答のほどお願いいたします。

  • 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プロパティに関してのみ質問した次第です) ネット、書籍等で調べたのですが、検討がつかない状態です。 お手数ですが、ご教授お願い致します。

  • javascriptのコードについて

    以下のコードなのですが、 エンクロージャー関数の ローカル変数hogeをさらに、エンクロージャー内部で定義された 関数ででクロージャーとして保持させたいメソッドのコードですが var Method = function (){ var hoge = "初期値"; var getter = function (){ return hoge; } var setter = function (param){ hoge = param; return hoge; } return {"set" : setter,"get" : getter} } var obj = Method(); console.log(obj); console.log(obj . get()); obj.set("初期値変更"); console.log(obj.get()); obj . set("更に変更"); console.log(obj.get()); この場合、メソッドの返り値として、一般的な文献に乗っている関数(関数オブジェクト)を返すのではなく オブジェクトリテラルとして返しています。 この場合でも、動きとしてはクロージャーの動きをしているのでhogeという変数の保持はできているっぽいんですが クロージャーって関数内で定義された関数であれば、どういう返り値の返し方でも クロージャーになるのですかね? また、この方法は、一般的にjsで関数コンストラクタ呼び出しをしてインスタンスを作る際privateメンバを実現する方法として紹介されていますが、 これはクロージャーとして生成するたんびに内部の変数を保持するためメモリ食い虫になるらしいのですが まず間違いなく、このクラス(便宜上そう呼びます)のインスタンスはひとつしかつくることはない!!という仕様だとしても いけないのでしょうか? というかもう現状javascripのバッドノウハウ的なものになっているのでしょうか?

  • JavaScriptでインスタンスを比較してみたい

    JavaScriptでインスタンスを比較してみたいのですが、色々分からないことがあるので教えてください。 ■質問1 ・そもそも、JavaScriptにインスタンスはあるのでしょうか? ■質問2 ・下記で「hoge1」「hoge2」はインスタンスではないのでしょうか?(単にオブジェクトを取得しているだけ?) var myApp = {  point: 0,  setPoint: function(p){   this.point= p;  },  getPoint: function(){   return this.point;  } }; myApp.point = 5; var hoge1 = myApp.getPoint(); var hoge2 = myApp.getPoint(); console.log( hoge1 === hoge2 ); // true ■質問3 ・「Object.create」か「new」すれば、インスタンス生成できる? ■質問4 ・インスタンスの比較はどうやるのでしょうか? ・「===」?

  • new演算子のメリット・便利さは何でしょうか。

    javascriptのnew演算子(コントラスタとインスタンス)はどんなときに役立ちますか? function Member1とfunction Member2を比較した場合 <script type="text/javascript"> function Member1 (firstName, lastName) { return lastName + " " + firstName; } document.writeln(Member1('氏名', '名字')); // 「名字 氏名」と表示 //ここより下は参考書より var Member2 = function(firstName, lastName){ // thisはコンストラクタによって生成されるインスタンスを表す //this.プロパティ名 = 値;として記述する this.firstName = firstName; //firstNameというプロパティを生成 this.lastName = lastName; //lastNameというプロパティを生成 this.getName = function(){ return this.lastName + " " + this.firstName; } }; var mem = new Member2('氏名', '名字'); //オブジェクトの初期化 document.writeln(mem.getName()); // 「名字 氏名」と表示 </script> function Member1のような通常の方法でできることを、 なぜfunction Member2のようにnew演算子を使うのか、 そうすることで、どんなメリット・便利さがあるのかと思いました。 いろいろ調べたのですが解決できず、ご教示を頂こうと思いました。 よろしくお願いいたします。

  • new演算子について教えていただけますでしょうか

    flex を学習している者です(初心者)。 本を読んでいるなかで、new演算子と出くわしたのですが、 解説を読んでいても理解できずに困っています。 例えば var date1:Date = New Date(); については、 date1はインスタンスとなり、今日現在のデータを持っているようです。 今日が何月かという情報をgetMonth()で引き出せるようです。 1.Date()というコンストラクタを使うには"New"が必要なのでしょうか? 2. New演算子は頻繁に使うのでしょうか? 3.new演算子の説明を使い方を交えて初心者にもわかりやすく教えてください! 宜しくお願いいたします。

    • ベストアンサー
    • Flash

専門家に質問してみよう