[javascript]静的プロパティとローカル変数の違い

Question

###わからないこと
コンストラクタ単位で保有される静的プロパティとコンストラクタの中で定義されるローカル変数の違いが分かりません。
同じ読み取り専用という点ではほぼ同じように思えます。
静的プロパティとローカル変数の両者で、機能的にここが違うという明確な部分を教えていただきたいです。

###コード

let Test = function(test_name){
  //ローカル変数
  let version = "1.0";
  let showVersion = function(){
    return `version${version}`;
  }
  //インスタンス変数
  this.test_name = test_name;
  this.name_and_version = function(){
    return `name is ${this.test_name} | ${showVersion()}`;
  }
}
let test1 = new Test("test1");
console.log(test1.name_and_version());
/*
出力: name is test1 | version1.0
*/

/*
クラス変数
*/
Test.version = "2.0";
Test.showVersion = function(){
  return `version${Test.version}`;
}
console.log(Test.version);
console.log(Test.showVersion());
/*
出力: 2.0
     version2.0
*/

###追記
Testクラス内のversion(ローカル変数?)には、Testクラスのインスタンスtest1からアクセスできません。
Testクラスに追加した静的プロパティ(version2.0)にも、Testクラスのインスタンスtest1からアクセスできません。
同じようにアクセスできない(書き換えられない)ローカル変数と静的プロパティの違いが知りたいです。

何卒、ご回答のほどよろしくお願いいたします。

###ここが知りたい
・どちらもインスタンス自体から呼び出すことはできない
・どちらもインスタンスメソッド経由だと（コンストラクタ内だと）アクセスすることができる

この点を踏まえて、この両者は

①明確にどこが違うのか
②どう使い分けたら良いのか

が知りたいです。

let Test = function(text){
  //ローカル変数
  let local_value = "local value";
  let local_function = function(){
    return "local_function: " + local_value;
  }
  //インスタンス変数
  this.text = text;
  this.showText = function(){
    return "showText: " + this.text;
  }
  //インスタンス変数-ローカル変数local_functionを呼び出す
  this.use_local_function = function(){
    return local_function();
  }
  //インスタンス変数-静的プロパティstatic_functionを呼び出す
  this.use_static_function = function(){
    return Test.static_function();
  }
}
//静的プロパティ
Test.static_value = "static value";
Test.static_function = function(){
  return "static_function: " + Test.static_value;
}

let test_obj = new Test("test-text");
console.log(test_obj.showText()); //・・・インスタンスメソッドなので当然呼び出せる
//console.log(test_obj.local_function()); ・・・ローカル変数なのでインスタンス経由で呼び出せない
//console.log(test_obj.static_function()); ・・・静的プロパティなのでインスタンス経由で呼び出せない
console.log(test_obj.use_local_function()); //・・・インスタンスメソッドを通してだとローカル変数にアクセスできる
console.log(test_obj.use_static_function()); //・・・インスタンスメソッドを通してだと静的プロパティにアクセスできる

Comments

[m.ts10806]

提示のコードはクラス内のプロパティにアクセスしてるだけ(書き換えたり出力したり)にしか見えませんが、どこの話をしていますか？

[pikapika-itinen]

説明が下手で申し訳ございません。
Testクラス内のversion(ローカル変数?)には、Testクラスのインスタンスtest1からアクセスできません。
Testクラスに追加した静的プロパティ(version2.0)にも、Testクラスのインスタンスtest1からアクセスできません。
同じようにアクセスできない(書き換えられない)ローカル変数と静的プロパティの違いが知りたいです。

[m.ts10806]

上記、質問に追記願います。
「起きている現象」に対して「知りたいこと」が必ずしも一致するわけではありませんので
「どんな問題が起きているのか」をなるべく前提として書かれたほうが的確なアドバイスが得られやすいです（質問テンプレートも活用してもらいたい）

[pikapika-itinen]

もう少し考えてみます・・・。

[m.ts10806]

あいえ、そういうことではなくて、「質問内容に対して重要なことがこちらのコメント欄で書かれていて埋もれてしまうので質問本文に追記してください」ということです。

[pikapika-itinen]

理解力が乏しく、申し訳ございません。
追記しておきます。

Answer 1

・どちらもインスタンス自体から呼び出すことはできない
・どちらもインスタンスメソッド経由だと（コンストラクタ内だと）アクセスすることができる

文言が不正確なので、もし、この文言が書籍で書かれた文章を正確に書き写したもので、解読ミスをしたのであれば、その書籍は混乱を生むだけなので捨てるべきだと思います。

• #1 どちらもインスタンスオブジェクト(コンストラクタ内での this 値)のプロパティとして呼び出すことはできない
• #2 どちらもコンストラクタ内/コンストラクタを参照可能なインスタンスメソッド内では、アクセスすることができる(prototype系インスタンスメソッド内からコンストラクタ内のローカル変数参照は出来ない)

'use strict';
function Test () {
  let local_value = "local value";  // ローカル変数

  this.foo = function foo () {
    console.log(local_value);       // "local value" (#2 参照できる)
    console.log(Test.static_value); // "static value" (#2 参照できる)
    console.log(this.local_value);  // undefined (#1 参照できない、this 値はローカル変数を格納するオブジェクトではない)
    console.log(this.static_value); // undefined (#1 参照できない、this 値は静的プロパティを格納するオブジェクトではない)
  };

  console.log(local_value);       // "local value" (#2 参照できる)
  console.log(Test.static_value); // "static value" (#2 参照できる)
  console.log(this.local_value);  // undefined (#1 参照できない、this 値はローカル変数を格納するオブジェクトではない)
  console.log(this.static_value); // undefined (#1 参照できない、this 値は静的プロパティを格納するオブジェクトではない)
}
Test.prototype.bar = function bar () {
  console.log(Test.static_value); // "static value" (#2 参照できる)
  console.log(this.local_value);  // undefined (#1 参照できない、this 値はローカル変数を格納するオブジェクトではない)
  console.log(this.static_value); // undefined (#1 参照できない、this 値は静的プロパティを格納するオブジェクトではない)
  local_value;                    // ReferenceError: local_value is not defined (参照できない、変数のスコープ外)
};

Test.static_value = "static value"; // 静的プロパティ

new Test;
console.log(Test.static_value); // "static value" (参照できる)
local_value;                    // ReferenceError: local_value is not defined (参照できない、変数のスコープ外)

必要な知識は「変数のスコープ」と「コンストラクタ内における this 値の扱い」です。

• スコープ - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
• let - JavaScript | MDN
• コンストラクタ関数の使用 - JavaScript | MDN
• 継承とプロトタイプチェーン - JavaScript | MDN

Re: pikapika-itinen さん

Comments

[pikapika-itinen]

確かに不明確でしたね・・・。これは自分の解読ミスです。

#1 どちらもインスタンスオブジェクト(コンストラクタ内での this 値)のプロパティとして呼び出すことはできない
#2 どちらもコンストラクタ内/コンストラクタを参照可能なインスタンスメソッド内では、アクセスすることができる(prototype系インスタンスメソッド内からコンストラクタ内のローカル変数参照は出来ない)

この表現、とてもわかりやすかったです。
また、サイトもご提示いただきありがとうございます。
もっと勉強します。

Answer 2

同じ読み取り専用という点ではほぼ同じように思えます。

えっと、プロパティは書き換え可能ですが。

let Test = function(test_name){
  //ローカル変数
  let version = "1.0";
  let showVersion = function(){
    return `version${version}`;
  }
  //インスタンス変数
  this.test_name = test_name;
  this.name_and_version = function(){
    return `name is ${this.test_name} | ${showVersion()}`;
  }
}
let test1 = new Test("test1");
test1.test_name = "書き換え";
console.log(test1.name_and_version());

Comments

[maisumakun]

showVersionは「静的プロパティ」なんて呼び方はしません。単なるメソッドです（そもそもインスタンスごとに作られるので、静的ですらないです）。

[maisumakun]

（class構文に「静的プロパティ」と呼べるものがあるので、そのままの用語ではおそらく誰も理解できません）

[pikapika-itinen]

書き換える対象はインスタンスからローカル変数のversion、インスタンスから静的プロパティ(コード内ではクラス変数と書いています)です。
分かりづらくて申し訳ございません。

[maisumakun]

> Testクラスに追加した静的プロパティ(version2.0)にも、Testクラスのインスタンスtest1からアクセスできません。

いえ、（最初から追加を想定した作りにしておけば）アクセスできます。

[pikapika-itinen]

javascript本格入門という書籍に「静的メンバーは関数オブジェクト(コンストラクタ)に動的に追加されたメンバーであり、インスタンスに追加されるわけではない(なので呼び出せない)」と書いていたのですが、違うのでしょうか。
また、インスタンスからコンストラクタの静的メンバにアクセスする方法とは具体的にどのような方法なのでしょうか。

[maisumakun]

> javascript本格入門という書籍に「静的メンバーは関数オブジェクト(コンストラクタ)に動的に追加されたメンバーであり、インスタンスに追加されるわけではない(なので呼び出せない)」と書いていたのですが、違うのでしょうか。

「呼び出せない」のは「インスタンスを経由しては呼び出せない」という意味かと思います。コンストラクタ内でも、ふつうに「Test.version」と書いてアクセスすることは可能です。

[pikapika-itinen]

お答えいただき、ありがとうございます。
コンストラクタ内から静的メンバにアクセスすることができました。
ただ、そうなると「インスタンスを経由して呼び出せない値」は、コンストラクタ内に記述したローカル変数(上記コードのversion=1.0とshowVersion)も同じではないのでしょうか。そこの違いといいますか、どう使い分けるのかが分からないのです。

[maisumakun]

えっと、コンストラクタ内のローカル変数はコンストラクタの終了後アクセスする方法がないのに対して、クラスプロパティは誰でも書き換え可能と、まったく動作が違う箇所があるのですが、それは無視されている感じでしょうか。

[pikapika-itinen]

長くお付き合いいただき、ありがとうございます。
頭が混乱しておりました・・・。

Answer 3

ただ、そうなると「インスタンスを経由して呼び出せない値」は、コンストラクタ内に記述したローカル変数(上記コードのversion=1.0とshowVersion)も同じではないのでしょうか。そこの違いといいますか、どう使い分けるのかが分からないのです。

コンストラクタ内に記述したshowVersionは「静的プロパティ」ではなく「ローカル変数」です（上から４行目）。

クラス変数の下のTest.showVersionが「静的プロパティ」です。

同じ名前だから混同されたのでしょう。

静的プロパティという単語を見たことがありませんでしたが、静的プロパティで検索して理解できました。
https://ja.javascript.info/static-properties-methods

どちらにせよ「同じ読み取り専用」という記述は間違っています。上書きできますので。

let Test = function(test_name){
  //コンストラクタ内に記述したローカル変数
  let version = "1.0";
  let showVersion = function(){
    return `version${version}`;
  };

  version = "2.0"; /* コンストラクタ内に記述したローカル変数versionを上書き */
  showVersion = function(){ /* コンストラクタ内に記述したローカル変数showVersionを上書き */
    return `VERSION${version}`;
  };

  console.log(showVersion()); /* VERSION2.0を出力 */

}
let test1 = new Test("test1");

Comments

[pikapika-itinen]

ご回答いただき、ありがとうございます。
読み取り専用という点、認識を誤っておりました。

「ここが知りたい」という部分を上に追記しましたので、見ていただけると幸いです。
お手数おかけしますが、よろしくお願いいたします。