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

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

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

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

Q&A

1回答

1419閲覧

[再]何故、JavaScriptのObject.prototypeは、変数に格納されないのでしょうか?

sounisi5011

総合スコア697

JavaScript

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

0グッド

3クリップ

投稿2015/01/03 11:50

以前同じ質問をしたのですが、誤ってベストアンサーを選んでしまったため改定も兼ねて再度質問させていただきます。

JavaScriptでのクラス(に似たもの)の定義として、以下のコードをよく見かけます。

lang

1function Class() { } 2 3Class.prototype.method1 = function () { }; 4 5Class.prototype.method2 = function () { }; 6 7Class.prototype.method3 = function () { };

これのClass.prototypeなんですが、何故これをローカル変数に格納しないのでしょうか?
Class.prototypeもオブジェクトなので、変数に格納すれば参照変数となります。
それで圧縮時にコードが短くなるよう工夫は出来ないのでしょうか。

lang

1function Class() { } 2 3var Class_prototype = Class.prototype; 4 5Class_prototype.method1 = function () { }; 6 7Class_prototype.method2 = function () { }; 8 9Class_prototype.method3 = function () { };

Google ChromeやIE 5(IE 11のF12開発者ツールより)、Firefoxでも上記のクラス(に似たもの)の宣言は可能です。

このような方法はJavaScriptの仕様として許されていますか、どのブラウザでも動く方法なのでしょうか?
また、何故誰もやっていないのでしょうか?


以前の質問で、以下の回答が出ています。

既に [ClassName].prototype の書き方が浸透しているので、
複数のプロジェクトを掛け持つ開発者は、
プロジェクト毎に書き方を変更しなくて良いと言う利点があります。

変数に格納することで、コードは短くなりますが、可読性は落ちると考えます。
コードを短くしたいのならば、完成後に圧縮する方法(Minify)を採用すれば良いので、
コーディング時は読みやすく書いておけば良いのです。

本質問では、上記以外の誰もやらない理由について解答をお願いします。
また、本質問では誰もやらない理由の他に、このコードは実行できるものなのかについても質問しています。
そちらについても回答していただければ有難いです。

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

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

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

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

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

guest

回答1

0

lang

1var Class_prototype = Class.prototype;

は確かに短くなりますが、そもそも短く書きたい人は以下の様に書いています。

lang

1function Class() { 2 method1: function(){}, 3 method2: function(){}, 4 method3: function(){} 5}

個人的にはこの短い書き方は読みにくいのでprototypeを多用しますが、
この辺は好みと宗教的な問題ですね。

ちなみに、ご提示のコードは実行可能です。
(どの環境でも動くかはテストしていませんが・・・。)

投稿2015/01/05 11:43

utun

総合スコア384

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

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

sounisi5011

2015/01/05 14:25

function Class() { method1: function(){}, method2: function(){}, method3: function(){} } このコードってJavaScriptですか? コードブロックとオブジェクトの定義の {} を混同しているようですが…
utun

2015/01/05 14:57

実際にインスタンスを生成してもらえれば分かると思いますが、同じ挙動になりますよ。
utun

2015/01/05 16:36

すいません。 結構ボケてましたね。 var instans = { method1: function(){} }; の様なものを言いたかったのですが、これは単一のインスタンス的な使い方しかできませんでした。(というかただのオブジェクトですし) 普段使わない記法を使うべきじゃないですねw ただ、このオブジェクトでクラス的に書く書き方は結構Githubでは散見されます。 やはり個人的には気持ち悪いので、私は使いませんが・・・。 益体も無い話で申し訳ございません! 本回答はスルーしといてくださいー
sounisi5011

2015/01/05 16:57

このコードは以下の事を言いたかったのではないかと予想しています。 function Class() { } Class.prototype = { method1: function () { }, method2: function () { }, method3: function () { } }; Closure Compilerで試したら、実際に10 bytes小さくなりました。 コードの短さを追求するならいいかもしれません。 その上で > この辺は好みと宗教的な問題ですね。 やはりそこが、私の提案した記述法が殆ど無い一因かもしれません。
htsign

2015/01/07 23:14

Klass.prototype = {}; は一つ一つメソッドを生やしていく方法とは若干挙動が異なるのではありませんでしたっけ? 確か継承まわりで違ったような。
Lhankor_Mhy

2015/01/08 05:09

横から失礼します。 > 確か継承まわりで違ったような。 ですね。 function Class() { } console.log(Class.prototype.constructor); //Class() Class.prototype = { method1: function () { }, method2: function () { }, method3: function () { } }; console.log(Class.prototype.constructor); //Object()
htsign

2015/01/09 23:26

> Class.prototype.constructor 変わるのはここでしたか。 うろ覚えだったのでいい勉強になりました。ありがとうございます。
sounisi5011

2015/01/10 11:26

じゃあやっぱり、短縮するためには Class.prototype をローカル変数にし、それにメソッドを追加する方法がいいのかもしれませんね。 htsignさん並びにLhankor_Mhyさん、有難うございます。
Y.Kato

2015/01/27 05:16

最近はクロージャに詰めてしまいますので問題ないですが、単に以下のコードようにすると window.Class_prototype が定義されてしまいます。(いわゆるグローバルな変数で、一般的などのようなスコープチェーンからも到達できてしまう) function Class() { } var Class_prototype = Class.prototype; Class_prototype.method1 = function () { }; まあ、結局は好みの問題、美意識に帰結してしまいますが、安易に変数を増やすことを嫌がる人の存在もありますね。 例は上げませんが、クロージャ内でも変数定義は極力無くすようにコーディングされているライブラリが多いのではないでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問