World Wide Webに力を與えるプログラミング言語であるJavaScriptは、1995年5月にBrendan Eichが作成して以來、広く使用された多用途のテクノロジーになりました。成功したにもかかわらず、かなりの批判、特にいくつかの機(jī)能も受けています。たとえば、オブジェクトはインデックスとして使用されると文字列にキャストされます。1== "1"はtrue、またはthisキーワードを混亂させる悪名高いものを返します。ただし、特に興味深い機(jī)能の1つは、さまざまなプライバシーを?qū)g裝するさまざまな手法の存在です。

現(xiàn)在、JavaScriptにプライベート変數(shù)を直接作成する方法はありません。他の言語では、 privateキーワードまたは二重アンダースコアを使用でき、すべてが正常に機(jī)能しますが、JavaScriptでは、可変プライバティネスには、予想される機(jī)能よりも言語の緊急機(jī)能により似た機(jī)能があります。最初に質(zhì)問の背景を紹介しましょう。

varキーワード

2015年まで、基本的に変數(shù)を作成する1つの方法しかありませんでしたが、それがvarキーワードでした。 varは関數(shù)スコープされています。つまり、このキーワードにインスタンス化された変數(shù)は、関數(shù)內(nèi)のコードによってのみアクセスできます。関數(shù)が外部または本質(zhì)的に「グローバル」である場(chǎng)合、変數(shù)が定義された後に実行されたすべてのものによって変數(shù)にアクセスできます。定義の前に同じスコープで変數(shù)にアクセスしようとすると、エラーの代わりにundefinedなります。これは、 varキーワードの「アップグレード」方法によるものです。

 //グローバル範(fàn)囲で「A」を定義します
var a = 123;

//関數(shù)範(fàn)囲で「B」を定義します
（関數(shù)（） {
  console.log（b）; // =>プロモーションにより、「未定義」がエラーではなく返されます。
  var b = 456;
}）（）;

console.log（a）; // => 123
console.log（b）; //「b」に関數(shù)範(fàn)囲外からアクセスできないため、「參照エラー」例外をスローします。

ES6変數(shù)の誕生

2015年には、ES6/ES2015が公式にリリースされ、2つの新しい変數(shù)キーワードが続きました。Let const letどちらもブロックスコープされています。つまり、これらのキーワードで作成された変數(shù)は、同じブラケットのペア內(nèi)のすべてのものによってアクセスできます。 varと同じですが、 letおよびconst変數(shù)には、ループ、関數(shù)、ステートメント、ブラケットなどのブロックスコープの外側(cè)にアクセスできません。

 const a = 123;

//スコープの例＃1をブロックします
if（true）{
  const b = 345;
}

//スコープの例＃2をブロックします
{
  const c = 678;
}

console.log（a）; // 123
console.log（b）; //「B」にブロックスコープの外側(cè)からアクセスできないため、「參照エラー」をスローします。
console.log（c）; //「B」にブロックスコープの外側(cè)からアクセスできないため、「參照エラー」をスローします。

スコープの外側(cè)のコードは変數(shù)にアクセスできないため、プライベートの出現(xiàn)が得られます。さまざまな方法で実裝するためのいくつかの手法を紹介します。

関數(shù)を使用します

JavaScriptの関數(shù)もブロックであるため、すべての可変キーワードはそれらと連攜します。さらに、「モジュール」と呼ばれる非常に有用なデザインパターンを?qū)g裝できます。

モジュール設(shè)計(jì)モード

Googleは、「モジュール」を定義するためにオックスフォード辭書に依存しています。

このプログラムは、そこから構(gòu)築されるか、複雑な活動(dòng)のさまざまであるが相互に関連するユニットのいずれかを分析する場(chǎng)合があります。

- 「モジュール」定義1.2

モジュールの設(shè)計(jì)パターンは、パブリックコンポーネントとプライベートコンポーネントを組み合わせてプログラムをより小さなコンポーネントに分解できるため、JavaScriptで非常に役立ち、「カプセル化」と呼ばれるプロセスを通じて別のプログラムパーツがアクセスできるもののみを公開するためです。このようにして、私たちは使用する必要があるもののみを公開し、見る必要のないものを非表示にします。関數(shù)範(fàn)囲を活用することでこれを行うことができます。

 const carmodule =（）=> {
  Milesdriven = 0とします。
  速度= 0とします。

  const Accelerate =（antom）=> {
    速度=額;
    milesdriven = speed;
  }

  const getMilesDriven =（）=> MilesDriven;

  //「戻り」キーワードを使用して、どのコンテンツが公開され、どのコンテンツが非表示になっているかを制御できます。この場(chǎng)合、Accelerate（）およびgetMilesdriven（）関數(shù)のみを公開します。
  戻る {
    加速、
    getMilesDriven
  }
};

const testcarmodule = carmodule（）;
testcarmodule.accelerate（5）;
testcarmodule.accelerate（4）;
console.log（testcarmodule.getMilesdriven（））;

このようにして、走行距離と加速を取得できますが、この場(chǎng)合はユーザーがアクセス速度を必要としないため、 accelerate()とgetMilesDriven()メソッドのみを公開することで非表示にできます?；镜膜?、 speed同じ範(fàn)囲內(nèi)のコードによってのみアクセスできるため、プライベート変數(shù)です。この場(chǎng)合、プライベート変數(shù)の利點(diǎn)が明らかになり始めます。変數(shù)、関數(shù)、またはその他の內(nèi)部コンポーネントにアクセスする機(jī)能を削除すると、使用すべきではない他者が誤って他者が誤って使用している表面積を減らします。

別の方法

この2番目の例では、 thisキーワードの追加に気付くでしょう。 ES6矢印関數(shù)（=>）と従來の関數(shù)（）{}には違いがあります。 functionキーワードを使用すると、 this使用できます。これは関數(shù)自體にバインドされ、矢印関數(shù)はthisキーワードのどのタイプの使用を許可しません。どちらもモジュールを作成するための同様に効果的な方法です。コアのアイデアは、アクセスする必要がある部品を開示し、対話するべきではない他の部品を保持することです。そのため、パブリックデータとプライベートデータの両方があります。

 function carmodule（）{
  Milesdriven = 0とします。
  速度= 0とします。

  //この場(chǎng)合、代わりに「この」キーワードを使用します。
  // Carmoduleを指します
  this.Accelerate =（antom）=> {
    速度=額;
    milesdriven = speed;
  }

  this.getMilesDriven =（）=> MilesDriven;
}

const testcarmodule = new Carmodule（）;
testcarmodule.accelerate（5）;
testcarmodule.accelerate（4）;
console.log（testcarmodule.getMilesdriven（））;

ES6クラス

クラスは、ES6のもう1つの新機(jī)能です。クラスは本質(zhì)的に構(gòu)文砂糖です。つまり、依然として機(jī)能ですが、より簡(jiǎn)単に表現(xiàn)された形に「美化」する場(chǎng)合があります。クラスの場(chǎng)合、コードにいくつかの大きな変更が加えられない限り、変動(dòng)的なプライベート（現(xiàn)在のところ）はほとんど不可能です。

クラスの例を見てみましょう。

クラスカーモジュール{
  /*
    Milesdriven = 0;
    速度= 0;
  */
  constructor（）{
    this.milesdriven = 0;
    this.speed = 0;
  }
  加速（量）{
    this.speed =額;
    this.milesdriven = this.speed;
  }
  getMilesDriven（）{
    this.milesdrivenを返します。
  }
}

const testcarmodule = new Carmodule（）;
testcarmodule.accelerate（5）;
testcarmodule.accelerate（4）;
console.log（testcarmodule.getMilesdriven（））;

最初に注意すべきことは、 milesDrivenとspeed変數(shù)がconstructor()関數(shù)にあることです。コンストラクターの外側(cè)の変數(shù)を定義することもできます（コードコメントに示されているように）が、とにかく機(jī)能的に同じです。問題は、これらの変數(shù)が公開され、クラス外の要素によってアクセスできることです。

この問題のいくつかの解決策を見てみましょう。

下線を使用します

協(xié)力者が壊滅的な間違いを犯さないようにするための狀況では、変數(shù)のプレフィックスとしてアンダースコア（_）を使用して、外側(cè)に「目に見える」が、開発者に「この変數(shù)に觸れないでください」を合図するのに十分です。したがって、たとえば、次のようになりました。

 //これはクラスの新しいコンストラクターです。コンストラクター（）の外側(cè)の次のコンテンツとして表現(xiàn)できることに注意してください。
/*
  _milesdriven = 0;
  _Speed = 0;
*/
constructor（）{
  this._milesdriven = 0;
  this._speed = 0;
}

これは特定のユースケースで機(jī)能しますが、多くの點(diǎn)で理想的ではないと言っても安全です。変數(shù)にアクセスすることもできますが、変數(shù)名を変更する必要もあります。

すべてをコンストラクターに入れます

技術(shù)的には、クラスでプライベート変數(shù)を使用する方法があります。これは、すべての変數(shù)とメソッドをconstructor()関數(shù)に配置することです。見てみましょう。

クラスカーモジュール{
  constructor（）{
    Milesdriven = 0とします。
    速度= 0とします。

    this.Accelerate =（antom）=> {
      速度=額;
      milesdriven = speed;
    }

    this.getMilesDriven =（）=> MilesDriven;
  }
}

const testcarmodule = new Carmodule（）;
testcarmodule.accelerate（5）;
testcarmodule.accelerate（4）;
console.log（testcarmodule.getMilesdriven（））;
console.log（testcarmodule.speed）; //未定義 - 実際の変動(dòng)プライバシーがあります。

このアプローチは、意図的に開示されていない変數(shù)への直接アクセスがないため、真の変動(dòng)プライバシーを?qū)g裝します。問題は、私たちが今、私たちのものと比較して非常に良いコードを見ていないことであり、クラスを使用するときに構(gòu)文砂糖の利點(diǎn)を破ることです?，F(xiàn)時(shí)點(diǎn)では、 function()メソッドを使用することもできます。

WeakMapを使用します

また、 WeakMap()使用するためのプライベート変數(shù)を作成するためのより創(chuàng)造的な方法もあります。 Mapと同様に聞こえるかもしれませんが、2つは非常に異なります。マッピングはあらゆるタイプの値をキーとして取得できますが、 WeakMapオブジェクトのみを受け入れ、ガーベージがオブジェクトキーを収集するときにWeakMapの値を削除します。さらに、 WeakMap反復(fù)することはできません。つまり、値にアクセスするにはオブジェクトキーへの參照にアクセスする必要があります。これにより、変數(shù)は実際には見えないため、プライベート変數(shù)の作成に非常に役立ちます。

クラスカーモジュール{
  constructor（）{
    this.data = new weakMap（）;
    this.data.set（this、{
      マイルズドライブン：0、
      速度：0
    }）;
    this.getMilesdriven =（）=> this.data.get（this）.Milesdriven;
  }

  加速（量）{
    //このバージョンでは、代わりにWeakMapを作成し、//「この」キーワードをキーとして使用します。
    const data = this.data.get（this）;
    const速度= data.speed額;
    const milesdriven = data.milesdriven data.speed;
    this.data.set（{speed、milesdriven}）;
  }

}

const testcarmodule = new Carmodule（）;
testcarmodule.accelerate（5）;
testcarmodule.accelerate（4）;
console.log（testcarmodule.getMilesdriven（））;
console.log（testcarmodule.data）; // => weakmap {[items nown nowns]}  - このデータは、外部から簡(jiǎn)単にアクセスできません！

このソリューションは、データの偶発的な使用を防ぐのに適していますが、 this CarModuleに置き換えることで外部からアクセスできるため、実際にはプライベートではありません。さらに、それはかなりの複雑さを追加するため、最もエレガントなソリューションではありません。

競(jìng)合を防ぐためにシンボルを使用します

目的が名前の競(jìng)合を防ぐことである場(chǎng)合、 Symbolを使用して有用なソリューションを提供できます。これらは本質(zhì)的に一意の値として機(jī)能する可能性のあるインスタンスであり、獨(dú)自のインスタンスを除いて他の値に匹敵することはありません。実際のアプリケーションの例は次のとおりです。

クラスカーモジュール{
  constructor（）{
    this.speedKey = symbol（ "speedkey"）;
    this.milesdrivenkey = symbol（ "milesdrivenkey"）;
    この[this.speedkey] = 0;
    この[this.milesdrivenkey] = 0;
  }

  加速（量）{
    //このデータは、予期せずにアクセスすることはほとんど不可能です。決してプライベートではありません。
    //しかし、このモジュールを?qū)g裝する人から離れています。
    この[this.speedKey] =額;
    この[this.milesdrivenkey] = this [this.speedkey];
  }

  getMilesDriven（）{
    これを返します[this.milesdrivenkey];
  }
}

const testcarmodule = new Carmodule（）;
testcarmodule.accelerate（5）;
testcarmodule.accelerate（4）;
console.log（testcarmodule.getMilesdriven（））;
console.log（testcarmodule.speed）; // =>未定義 - 変數(shù)にアクセスするには、內(nèi)部キーにアクセスする必要があります。

アンダースコアソリューションと同様に、このアプローチは、混亂を防ぐために義務(wù)の命名に多かれ少なかれ依存しています。

TC39プライベートクラスフィールド提案

最近、クラスに私的変數(shù)を?qū)毪工胄陇筏ぬ岚袱岚袱丹欷蓼筏?。?jiǎn)単です：変數(shù)名を準(zhǔn)備し、プライベートになります。追加の構(gòu)造変更は必要ありません。

クラスカーモジュール{
  #Speed = 0
  #milesdriven = 0

  加速（量）{
    //このデータは、予期せずにアクセスすることはほとんど不可能です。
    これ。＃speed =額;
    これ。＃milesdriven = speed;
  }

  getMilesDriven（）{
    これを返してください。＃milesdriven;
  }
}

const testcarmodule = new Carmodule（）;
testcarmodule.accelerate（5）;
testcarmodule.accelerate（4）;
console.log（testcarmodule.getMilesdriven（））;
console.log（testcarmodule.speed）; // =>未定義 - 変數(shù)にアクセスするには、內(nèi)部キーにアクセスする必要があります。

プライベートクラスの機(jī)能は現(xiàn)実になり、非常に優(yōu)れたブラウザのサポートがあります。

結(jié)論は

これは、JavaScriptにプライベート変數(shù)を?qū)g裝するさまざまな方法の要約です。 「正しい」アプローチはありません。これらの方法は、さまざまな要件、既存のコードベース、およびその他の制約に適しています。それぞれのアプローチには利點(diǎn)と短所がありますが、最終的には、問題を効果的に解決する限り、すべてのアプローチは等しく効果的です。

読んでくれてありがとう！これにより、JavaScriptコードを改善するためにスコープと変動(dòng)するプライバシーを適用する方法に関する洞察が得られることを願(yuàn)っています。これは、多くの異なる方法をサポートし、コードを使いやすくエラーできない強(qiáng)力なテクノロジーです。より良い気持ちを得るために、自分でいくつかの新しい例を試してください。

以上がJavaScriptにプライベート変數(shù)を?qū)g裝しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。