JavaScriptのコードについて

このQ&Aのポイント
  • JavaScriptのコードでエンクロージャー関数を使用してローカル変数をクロージャーとして保持する方法について説明します。
  • エンクロージャー関数を使用してローカル変数を外部からアクセスできないようにし、getterとsetterメソッドを使用して値の取得と変更を行うことができます。
  • ただし、クロージャーをオブジェクトリテラルとして返す場合、クロージャーの動作は実現されますが、メモリ消費が増える可能性があります。また、この方法は一般的には推奨されていません。
回答を見る
  • ベストアンサー

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のバッドノウハウ的なものになっているのでしょうか?

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

  • ベストアンサー
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.2

別に値を返さないとクロージャじゃないというわけではありませんよ 要は変数を保持する関数がクロージャだと自分は理解しています var getter = function (){ return hoge; } の時点で1つクロージャはできています このクロージャは1つ上のスコープにMethod関数の変数、例えば hoge = "初期値" を持っており、Method関数が終わってもその繋がりを持ち続けているのです ですから関数をreturnするときに何か特別なことが行われているわけでなく、関数そのものが特殊なので、返し方には影響されません また、メモリリーク等通常であれば気にすることはありません そもそもクロージャとは直接関係ありません DOMと循環参照が起きた場合GCによる不要なメモリの回収が困難になるという問題があって、 その処理を書くときにクロージャが便利でよく使われるので、気をつけましょうということであって、クロージャを避けようと受け取ってしまったのなら大変な誤りです それに仮にメモリリークで1回に数KBメモリが消費されたところで、1000回やっても数MBです 非常に長時間動作するWebアプリケーションでないのなら杞憂というものです

その他の回答 (1)

  • notnot
  • ベストアンサー率47% (4846/10257)
回答No.1

>クロージャーって関数内で定義された関数であれば、どういう返り値の返し方でもクロージャーになるのですかね? 返しているオブジェクトの要素が関数ですからね。で、その返された関数を呼び出している。 何の不思議もないと思いますけど。 >これはクロージャーとして生成するたんびに内部の変数を保持するためメモリ食い虫になるらしいのですが 普通の言語だと、オブジェクトの生成に相当しますから、そのオブジェクト用のメモリが確保されます。 解放せずに、生成を繰り返せばどんどん使用メモリは増えるし、適宜オブジェクトを解放すれば(例だと、obj=null; すれば)、メモリも解放されてガベージコレクションされます。 >いけないのでしょうか? 必要ならばすればいいので全く問題ありません。

関連するQ&A

  • 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)

  • 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; } } })();

  • 即時関数でプライベート変数的になってる理由を教えて

    即時関数内で、プライベート変数的な動きになっている(?)コードがあるのですが、呼び出せない理由を教えてください ・呼び出せる例1 (function() {  hoge2 = 'ホゲ2'; })() console.log(hoge2); ・呼び出せる例2 (function() {  var hoge1 = {};  hoge2 = 'ホゲ2'; })() console.log(hoge2); ・呼び出せない例 (function() {  var hoge1 = {},hoge2 = 'ホゲ2'; })() console.log(hoge2); ■質問1 ・どうして呼び出せないのでしょうか? ・varでローカル宣言(?)してるhoge1オブジェクトに紐づいているから? ・つまり、hoge2オブジェクトを生成している場所が違う? ■質問2 ・呼び出せない状態の時、hoge2はプライベート変数になっているのでしょうか? ■質問3 ・そもそもどうして呼び出せるのでしょうか? ・即時関数は(名前もしくはスコープ)空間を作り閉じ込めるので~、という記述を、どこかで見かけたような気もするのですが…

  • javascriptのクロージャが理解できずに苦しんでいます。

    javascriptのクロージャが理解できずに苦しんでいます。 下記のようなコードをよく見るのですが、a()とfuncA()()が等価のようなのですが 実行するとa()の場合のみ変数の値が維持されます。 a()とfuncA()()の違いを理解したいと思っています。 どなたかどうぞよろしくお願い致します。 またクロージャのわかりやすい解説サイトなどご存知の方いらっしゃいましたら 合わせてよろしくお願い致します。 function funcA() { var i = 10; return function() { i++; alert(i); }; }; var a = funcA(); console.log(a() === funcA()())//true funcA()();//11 funcA()();//11 funcA()();//11 a();//11 a();//12 a();//13

  • javascriptの呼び出し方

    「下記を組み込んで使って」知り合いより依頼を受けました。 そこで、下記処理を呼び出す場合、 var API = new GETAPI(); とすると、search.login/search.get/search/logout 全部callされる事になります。 それをここに呼び出す方法としてはどうしたらいいかご教授下さい。 例えば、search.loginだけを呼び出したい。 ======================================== (function(){ window.GETAPI = function(){ var search = this; search.login = function(param){ console.log("login"); }; search.get = function(param){ console.log("get"); } search.logout = function(param){ console.log("get"); } return search; } }()); ======================================== 自分のイメージとしては上記処理ではなく、 下記処理で知り合いから頂くものと思ってたので、 ここに呼び出す事は可能だと思っていました。 ========== GETAPI.prototype{ 'login' : function(param){ }, 'get' : function(param){ }, 'logout' : function(param){ } } ========== 基本的なjavascriptの質問になってしまいますが、 宜しくお願い致します。

  • 最後に()が付いていない内側の関数を外から呼ぶ方法

    下記状態の時、obj内容を一切変更することなく、console.log("a")を実行することは出来ない、という理解で合っているでしょうか? ・最後に()演算子がないので、内側のgoo関数を実行することが出来ない ・外側のportalで、内側のgoo関数を呼び出していれば実行できるがその記述もない この場合、gooのvarは全く意味がない? var obj = {  portal : function() {   var goo = function(){    console.log("a");   }  } } var obj = {  portal : function() {   goo = function(){    console.log("a");   }  } } ・obj.portal().goo() … × ・(obj.portal()).goo() … ×

  • console.logを使用して変数名と結果表示

    console.logを使用して変数名とその中身を表示したいときに var hoge = 777; c("hoge", hoge); function c(a, b){ return console.log(a + ': ' + b); } ・・・とこのように書いているのですが これだと変数名を2回書かなくて効率が悪いです。 c(hoge)だけで変数名とその中身を表示する方法はないでしょうか? ご存じの方がおられましたらご回答をよろしくお願い致します。

  • 関数を呼んだら、その中の関数も自動実行される?

    ・関数の実行タイミングが分からないので教えてください ・下記で、どうして引数が渡るのでしょうか? ・portal関数を呼んだら、gooプロパティに無名関数が格納される(?)と思うのですが、=関数実行になるのでしょうか? ・無名関数だから? var obj = {  portal : function( arg ) {   var goo = function(arg){    console.log(arg);   }(arg);  } } obj.portal("あ"); ・自分的には、portal関数を呼んで変数gooに無名関数を格納(?)した後、明示的にgoo();と呼ぶ必要があると思うのですが… ・下記でTypeErrorエラーになるのは、gooプロパティが2回呼ばれるから? ・明示的に呼んだ2回目は引数が渡らないから? var obj = {  portal : function( arg ) {   var goo = function(arg){    console.log(arg);   }(arg);   goo();  } } obj.portal("あ"); //TypeError: undefined is not a function

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

  • setTimeoutのthis参照について

    prototypeメソッドの中でsetTimeout関数を使用したところ、thisで自身の関数を参照しなくなりました。setTimeoutの挙動についてぐぐってみたのですが、いまいちsetTimeoutを使用したときのスムーズな記述方法がわかりません。 ******************************** var hoge=function(){ this.myName="ほげ"; } hoge.prototype={ init:function(){ setTimeout(function(){ hoge.prototype.displayName(); // ★(1)setTimeout関数の中でのメソッドの適した呼び出し方は? // ↑の記述でも呼び出せるけど、間違ってる気がする。。 },1000) }, displayName:function(){ // ★(2)ここでhogeオブジェクトのmyNameプロパティを参照するにはどう記述すれば良いのか? //console.log(this.myName); //↑setTimeoutを使ったのでthis参照はwindowオブジェクトになっているから違う //console.log(hoge.myName); →undefinedを返す } } window.onload=function(){ var a=new hoge(); a.init(); } ******************************** 上記のようなprototype関数を使用したときのスムーズな記述方法を教えていただけませんでしょうか。 知りたいのは下記2点です。 ★(1)prototypeメソッドを使用したとき、setTimeout関数の中でのメソッドの適した呼び出し方は? ★(2)setTimeout関数内で呼び出したメソッドから、自身のオブジェクトのプロパティを参照するにはどう記述すれば良いのか? 初心者なので説明が下手だったり、質問内容で間違った記述があるかもしれません。 質問内容で問題がありましたらご指摘いただけると助かります。

専門家に質問してみよう