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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

3回答

1993閲覧

次のようなメソッドの記述方法について xxxx: function(){xxxx};

qaz3330

総合スコア113

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

0クリップ

投稿2016/04/29 14:31

javascriptでメソッドを定義するとき、私はいつも以下のurlにあるような形式で記述しております。
https://codezine.jp/article/detail/221

function myFunc(arg) { alert(arg); } myFunc("hoge"); // hoge と表示される。

しかし、最近、以下のような記述の仕方で、メソッドを定義しているソースを見かけます。
こちらの方が綺麗だなと思ったのですが、こういう記述っていつごろからこうなったのでしょうか?

xxxx: function(){ xxxxxx; };

こういう記述の仕方について言及されているwebページを探していたのですが、見当たらず質問させて頂きました。

バージョンやフレームワークによって使えない場合があるのかどうかを調べたく、
そのために、こういう記法の検索キーワードを抑えないとと思いした。

「javascript メソッド」とかでは、前者の記述の仕方の記事ばかりで困っております。

宜しくお願いします。

ikuwow👍を押しています

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

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

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

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

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

guest

回答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
manabufukai

総合スコア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

unau

総合スコア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

think49

総合スコア18156

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問