javascriptでメソッドを定義するとき、私はいつも以下のurlにあるような形式で記述しております。
https://codezine.jp/article/detail/221
function myFunc(arg) { alert(arg); } myFunc("hoge"); // hoge と表示される。
しかし、最近、以下のような記述の仕方で、メソッドを定義しているソースを見かけます。
こちらの方が綺麗だなと思ったのですが、こういう記述っていつごろからこうなったのでしょうか?
xxxx: function(){ xxxxxx; };
こういう記述の仕方について言及されているwebページを探していたのですが、見当たらず質問させて頂きました。
バージョンやフレームワークによって使えない場合があるのかどうかを調べたく、
そのために、こういう記法の検索キーワードを抑えないとと思いした。
「javascript メソッド」とかでは、前者の記述の仕方の記事ばかりで困っております。
宜しくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
ちょっと補足的に…
###メソッドは「オブジェクトに関連付けられた関数」です。
例題として提示されているコード
function myFunc(arg) { alert(arg); } myFunc("hoge"); // hoge と表示される。
1つ目のこれは「関数」であり、メソッドではありません。
そして、二つ目
xxxx: function(){ xxxxxx; };
は、本来
var foo = { bar: function(){ xxxxxx; }, baz: function(parm){ //別の処理 } }; foo.bar(); foo.baz(parm);
となっているはずではないでしょうか?
このfooというオブジェクトの中で、プロパティとして宣言されている関数bar,bazが「メソッド」です。
(※オブジェクトリテラルのプロパティとして関連付けられた関数)
メソッドの定義
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods
記述法、使い分けというよりは
関数型でコードを記述すると前者、
オブジェクト指向でコードを記述すると後者になる
といった感じです。
どちらの記述にもメリット、デメリットがあり、そのプロジェクトの規模や環境によって
どちらが適しているかも変わってきます。
「関数型プログラミング オブジェクト指向プログラミング」で検索してみると、もう少し詳しく分かるかもしれません(ただ、他の言語のものが多々見つかるかもですが)
バージョンやフレームワークによって使えない場合があるのかどうか
特にありません。
ただ、オブジェクト指向でのコーディングは慣れるまで、ちょっと難しいと感じるかも…というのが個人的な感覚です。
追記
自分で書いておきながら、逆に混乱を招く回答だったかも…と思い、ところどころ変えました。。
「関数」と「オブジェクト」という言葉も混乱を招きやすいので、
ちょっと簡単に注釈を加えておきます。
unauさんがおっしゃっている通り「JavaScript の関数は、関数オブジェクトです」これは正しいことで
JavaScriptのデータは数値、文字列、論理値、null、undefined(+ES6からのSymbol)以外すべて
オブジェクトなのですが、その中で
- 「オブジェクト」は値を収める名前付きコンテナ
- 「関数」はアプリケーションを実行可能にする手続き
- メソッドは「オブジェクトに関連付けられた関数」
として考えるのが妥当かと思います。
投稿2016/04/29 15:12
編集2016/04/29 16:25総合スコア700
0
JavaScript の関数は、関数オブジェクトです。
javascript
1function myFunc(arg) { 2 ... 3}
とやると、この関数を宣言しているスコープに myFunc
という名前でこの関数オブジェクトにアクセスできるようになります。
一方で、関数式というものがあり、次のようにすることで関数オブジェクトを生成できます。
javascript
1function(arg) { 2 ... 3}
このままでは(即時実行の場合やコールバック関数として登録する場合を除き)使えないので、変数に代入したりします。
javascript
1var myFunc2 = function(arg) { 2 ... 3} 4myFunc2(hoge); // のように呼び出せる
関数オブジェクトは他のオブジェクトと同様、配列の要素にしたり、ハッシュの要素にしたりすることもできます。
javascript
1var myFuncList = [ function(arg) { console.log(arg); }, function(arg) { console.log(arg + '!!'); } ]; 2var myFuncHash = { 3 first: function(arg) { console.log('FIRST:' + arg); }, 4 second: function(arg) { console.log('SECOND:' + arg); } 5 6}; 7 8myFuncList[1]('hoge'); // として実行できる 9myFuncHash.first('hoge'); // として実行できる
qaz3330 さんが目にした、というのはこの最後のような使い方をしているところでしょう。
投稿2016/04/29 14:42
総合スコア2468
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
メソッド形式のコードが部分的で合っているか自信がないのですが、デザインパターンの質問なのでしょうか。
違っている場合はコードの全体像を教えてください。
出されたコードからはオブジェクトのプロパティに関数を定義している事は読み取れますが、それ以上の事が読み取れませんでした。
モジュールパターン(Module Pattern)
JavaScript
1var animal = (function () { 2 function catCry () { return 'nya'; } 3 var type = 'cat'; 4 5 return { 6 name: 'mike', 7 type: type, 8 cry: function () { 9 switch (this.type) { 10 case 'cat': 11 return catCry(); 12 case 'dog': 13 return 'bow-wow'; 14 } 15 return 'unknown'; 16 } 17 }; 18}()); 19 20console.log(animal.cry()); // "nya" 21animal.type = 'dog'; 22console.log(animal.cry()); // "bow-wow"
コンストラクタパターン(Constructor Pattern)
JavaScript
1function Animal (type, name) { 2 this.type = arguments.length > 0 ? String(type) : 'cat'; 3 this.name = arguments.length > 1 ? String(name) : 'mike'; 4} 5 6Animal.prototype = { 7 cry: function cry () { 8 switch (this.type) { 9 case 'cat': 10 return 'nya'; 11 case 'dog': 12 return 'bow-wow'; 13 } 14 return 'unknown'; 15 }, 16 className: 'Animal' 17}; 18 19/** 20 * Object.defineProperties() を使えば descriptor も指定できます。 21 */ 22/* 23Object.defineProperties(Animal.prototype, { 24 cry: {value: function cry () { 25 switch (this.type) { 26 case 'cat': 27 return 'nya'; 28 case 'dog': 29 return 'bow-wow'; 30 } 31 return 'unknown'; 32 }}, 33 className: {value: 'Animal'} 34}); 35*/ 36 37var cat = new Animal; 38console.log(cat); // {type: "cat", name: "mike"} 39console.log(cat.className); // "Animal" 40console.log(cat.cry()); // "nya" 41 42var dog = new Animal('dog', 'taro'); 43console.log(dog); // {type: "dog", name: "taro"} 44console.log(dog.className); // "Animal" 45console.log(dog.cry()); // "bow-wow"
用途
どちらのパターンもオブジェクト指向的にプロトタイプ(いわゆるクラス)を宣言する場合に用います。
質問文中の function myFunc () {}
は静的関数を宣言していますね。
クラス的な概念の中に含めて設計できるならコンストラクタパターンを使い、単機能であれば静的関数を使う、という使い分けになると思います。
モジュールパターンはインスタンスが一つだけなので汎用性は落ちます。
Re: qaz3330 さん
投稿2016/05/01 00:57
総合スコア18156
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。