①
javascriptの変数(グローバル変数、ローカル変数)とプロパティにはどのような違いがありますか。
ローカル変数は、たしかインスタンスに引き継げないがプロパティは、インスタンスに引き継げることができます。
ただ、それだとコンストラクタをもとにいくつかのインスタンスを作るとすべてに引き継いでしまうので必要のないものまで引き継ぎたくないのでプロトタイプを利用します。
ほかにもインスタンスしなくても使える静的メンバがあることは知っていますが、プロパティと変数にはどういう違いがあるのでしょうか。
②
静的プロパティとローカル変数の違いは何なのでしょうか。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
プロパティ
javascriptの変数(グローバル変数、ローカル変数)とプロパティにはどのような違いがありますか。
オブジェクト内のプロパティのことでです。使い方は知っているようなので詳しくは説明しませんが、クラスなどのオブジェクト自体は変数に入れないとアクセスすることも使うこともできません。
var object = new someClass();
のようにです。
プロパティはオブジェクト内で定義するもので、オブジェクトの属性(プロパティ)です。
下記のval
が変数で、prop
はプロパティです。
js
1var val = {prop:'some'}; 2console.log(val.prop)
インスタンス
ローカル変数は、たしかインスタンスに引き継げないがプロパティは、インスタンスに引き継げることができます。
変数とプロパティは別物なので、当然インスタンスには引き継げません。インスタンス(オブジェクト)を作成してから、メソッドの引数に用いたり、オブジェクトのプロパティに代入すれば、オブジェクトに絡めて変数も使用することはできます。
下記のval,object
が変数で、someProperty
はプロパティです。変数objectの中にはsomeClass
クラスをインスタンス化したオブジェクトが入っています。
js
1var val = 'some'; 2 3var object = new SomeClass(); 4object.someMethod(val); 5object.someProperty = val;
プロトタイプ
ただ、それだとコンストラクタをもとにいくつかのインスタンスを作るとすべてに引き継いでしまうので必要のないものまで引き継ぎたくないのでプロトタイプを利用します。
プロトタイプとは、あるオブジェクトに新たなプロパティやメソッドを追加したいときに使用する方法です。ただし、プロトタイプチェーンしたものを更に何重にもチェーンするような手法のやりすぎはパフォーマンスが悪くなるので注意しなければなりません。
コンストラクタには、クラスの初期化時に行う処理を書いておきます。new someClass()
した時の初期化処理に関係ない処理はコンストラクタには入れません。
JavaScriptはプロトタイプベースなので、オブジェクトをプロトタイプで継承して(プロトタイプチェーン)いくのが主なやり方です。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
js
1// クラスコンストラクタ 2var SomeClass = function (someProperty) 3{ 4 this.someProperty = someProperty; 5 this.otherProperty = ''; 6}; 7// クラスメソッド作成 8SomeClass.prototype.someMethod = function (param) 9{ 10 if (this.otherProperty === '') { 11 this.otherProperty = this.someProperty; 12 } 13 this.otherProperty += ', '+ param; 14 return this.otherProperty; 15}; 16 17var some = new SomeClass('some'); 18some.someMethod('other'); 19some.someMethod('but not enough!'); 20 21// some, other, but not enough! 22console.log(some.otherProperty); 23 24// 初期化 25some = new SomeClass('some'); 26 27// "" 空文字 28console.log(some.otherProperty);
静的プロパティ
静的プロパティとローカル変数の違いは何なのでしょうか。
ES6はまだすべてのブラウザで対応されているわけではないので、注意しなければならないです。
http://kangax.github.io/compat-table/es6/
静的プロパティとは、スタティックプロパティ(static property)と言って、クラスに直接紐づけることのできるプロパティのことで、(動的)プロパティはクラスのインスタンスに紐づけることのできるプロパティのことです。
書き方はいろいろありますが、静的プロパティや静的メソッドの基本的な書き方は下記にあります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/static
下記のようにも書けます。
js
1// クラスコンストラクタ 2var SomeClass = function (someProperty) 3{ 4 this.someProperty = someProperty; 5}; 6// クラスメソッド作成 7SomeClass.prototype.someMethod = function () 8{ 9 // 静的プロパティを使う 10 return this.someProperty + ', ' + SomeClass.staticProperty; 11}; 12 13// 静的プロパティ(static property) 14SomeClass.staticProperty = 'other'; 15 16// 静的メソッド(static method) 17SomeClass.staticMethod = function (param) 18{ 19 //valueLocalはローカル変数 20 var valueLocal = ', static'; 21 this.staticProperty = param + valueLocal; 22 return this.staticProperty; 23}; 24 25console.log(SomeClass.staticMethod('static')); 26console.log(SomeClass.staticProperty); 27 28// objectはグローバル変数 29var object = new SomeClass('some'); 30console.log(object.someMethod()); 31 32// 静的メソッド引数に動的プロパティをつかう 33console.log(SomeClass.staticMethod(object.someProperty)); 34console.log(SomeClass.staticProperty);
ローカル変数・グローバル変数(スコープ)
ローカル <-> グローバルでこれはスコープの違いです。プロパティとは全く関係ありません。
ローカル変数とは、クラスメソッドや関数の中で定義した変数はその中でしか有効ではありません。一方、グローバル変数は、どこからでもアクセスが可能です。つまり変数の競合が発生してしまいますので、できるだけ競合が発生しないように気を付けることが重要です。
変数をグローバル空間にできるだけ定義しないようにするには、下記のようにオブジェクトを定義するのが簡単です。下記のように定義するとグローバル変数はobj
のみとなります。
js
1// グローバル変数 2var obj = {}; 3 4obj.someValue = 'some'; 5obj.someFunc = function () 6{ 7 // ローカル変数 8 var val = ...; 9 ... 10}; 11 12obj.other = {}; 13 14obj.other.otherValue = 'other'; 15obj.other.otherFunc = function () 16{ 17 // グローバルスコープのobjにアクセス 18 obj.someFunc(); 19 ... 20}; 21 22console.log(obj);
投稿2017/12/22 21:52
総合スコア1652
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。