JavaScript のプライベート/静的プロパティの概要_javascript ヒント

•ブロックレベルのスコープをシミュレートする
JavaScript にはブロックレベルのスコープの概念がないことは誰もが知っています。次の例を参照してください。

コードをコピーします コードは次のとおりです:

(function () {
for (var i = 0; i //何もしない
}
alert(i) //出力 10
})();

行 6 は、ループ ブロック内の変数 i で、上記のコードを少し変更して for ループ ブロックをクロージャ内に配置すると、状況は異なります。

Copy code コードは次のとおりです:

(function () {
(function () {
for (var i = 0; i //何もしない
}
})();
alert(i) //エラー: 'i' が未定義です
})(); >
8 行目の変更された i にアクセスすると、エラーが発生し、必要なブロックレベルのスコープが達成されました。

•プライベートプロパティ
JavaScriptにはブロックレベルのスコープの概念はなく、プライベートプロパティの概念もありませんが、プライベート変数は存在します。一部のデータをカプセル化して非表示にしたい場合はどうすればよいでしょうか?クロージャとプライベート変数を使用してオブジェクトのプライベート プロパティを実装できると考えたことがあるかもしれません。
. インスタンスのプライベート属性
インスタンスのプライベート属性の特徴は、各オブジェクトに独立した属性が含まれ、オブジェクト間で共有がないことです。この目標を達成するには、他の OO 言語のセッターとゲッターと同様に、コンストラクターにプライベート変数を追加し、このプライベート変数にアクセスするパブリック メソッドを定義します。次の例では、インスタンスのプライベート プロパティを実装します。

コードをコピー コードは次のとおりです:

//プライベート変数のインスタンス

関数MyObject(name) {
//プライベート変数を定義します
//注意: this.name を使用すると、パブリック プロパティ
var privateName = name; になります。 >//プライベート ファミリアリティを定義します
var privateFunction = function () {
return "プライベート関数";
}
//パブリック メソッド アクセス プライベート ファミリアリティ
MyObject.prototype.getName = function ( ) {
return privateName;
}
MyObject.prototype.getFunction = function () {
return privateFunction();
}
}
var moGyy = new MyObject( "gyy");
alert (moGyy.getName()); // 出力 gyy
alert(moGyy.getFunction()); // 出力プライベート関数
var moCyy = new MyObject("cyy") );
alert(moCyy. getName()); // cyy を出力します。
alert(moCyy.getFunction()); // 2 つのオブジェクトのプライベート関数


を出力します。と 上記の例で作成された moCyy は異なる値を返します。プライベート メソッドを呼び出したい場合は、パブリック インターフェイスも必要です。上記の例で、2 つのパブリック関数がプライベート変数にアクセスできるのは、2 つのパブリック関数がクロージャであり、クロージャのスコープ チェーンにその関数を含む変数オブジェクトが含まれているためです。したがって、変数を検索するときは A スコープが使用されます。チェーンを使用すると、それを含む関数内のプライベート変数にアクセスできます。上記の例では、オブジェクトが作成されるたびに同じ機能を持つ 2 つの関数インスタンスが作成されるのを防ぐために、パブリック メソッドが MyObject のプロトタイプに追加されています。
<2>. 静的プライベート属性

場合によっては、データをグローバルに共有する必要がある場合でも、この属性をプライベートにする必要があるため、静的プライベート属性を実装する方法を説明します。 ? ?まず、このプライベートはコンストラクターの外側にある必要があります。コンストラクターの外側の変数とコンストラクターを統合するには、内部変数にアクセスするために、クロージャーを使用してプライベート変数とコンストラクターの両方を含めます。次のコード例に示すように、クロージャ コンストラクタの外側では、グローバル変数を使用してコンストラクタを参照できます。

コードをコピー コードは次のとおりです:

//静的プライベート変数とインスタンスプライベート変数
(function () {
//プライベート変数を定義します
var staticPrivateValue = "";
//コンストラクター、コンストラクターweaving function to a global variable
MyObject = function (name) {
//インスタンス変数を定義します
this.name = name
}//プライベートにアクセスするための 2 つのパブリック メソッドを定義します。変数をプロトタイプに再度追加します。
MyObject.prototype.getPrivateValue = function () {
return staticPrivateValue;
}
MyObject.prototype.setPrivateValue = function (value ) {
staticPrivateValue = 値;
}
})();
var mo = new MyObject("jeff-gyy");
mo.setPrivateValue("gyycyy"); private 属性
alert(mo.getPrivateValue()); // 出力 gyycyy
alert(mo.name); // 出力 jeff-gyy
var mo1 = new MyObject("jeff- cyy");
alert(mo1.getPrivateValue()); //gyycyy を出力
alert(mo1.name); //jeff-cyy を出力

上記のコードから返される値を見てください。 mo1 が getPrivateValue 関数を呼び出すと、mo によって設定された値が「gyycyy」になるのはなぜですか?まず、匿名関数を定義し、その関数にプライベート変数 staticPrivateValue が含まれていると、MyObject に対して定義された 2 つのプロトタイプ メソッドが、クロージャのスコープ チェーンを通じて実際にその関数内のプライベート変数にアクセスできます。 getPrivateValue と setPrivateValue 両方の関数のスコープ チェーンには匿名関数の変数オブジェクトが含まれているため、スコープ チェーンに含まれる変数オブジェクトは実際にはポインターであることがわかっているため、作成された 2 つのオブジェクトはパブリック メソッドを使用してプライベート変数を格納します。これは、匿名関数の変数オブジェクト内の staticPrivateValue であるため、変数インスタンス間で共有できます。従来の OO 言語の観点から見ると、私たちが実装する静的プロパティは、実際には本当の意味で静的ではなく、静的プロパティのインスタンスの共有を実現するだけです。
. モジュール モードと拡張モジュール モード
データをグローバルに共有するもう 1 つの方法は、モジュール モードを使用してオブジェクト タイプのシングルトン モードを実装することも、拡張モジュール モードを使用することもできます。次の例に示すように、タイプのシングルトン パターンを実装します。

コードをコピーします コードは次のとおりです。 >

//Define コンストラクター

var mo = new function () {
//プライベート変数
var privateValue = ""
//通常のモジュール モード
; return {
publicValue: "public ",
//プライベート変数にアクセスします
getPrivateValue: function () {
return privateValue;
},
setPrivateValue: function (value) {
privateValue = 値;
}
}();
mo.setPrivateValue("プライベート値");
alert(mo.getPrivateValue()); (mo.publicFunction());


モジュール モードは、匿名関数を使用して内部実装をカプセル化します。この例では、返されたオブジェクトにプライベート変数 privateValue が含まれています。クロージャのスコープ チェーンを介して含まれる関数にアクセスします。定義された匿名関数はすぐに呼び出されるため、変数 mo は返されたオブジェクトを参照します。上記のシングルトン パターンは、Object オブジェクトを返します。拡張モジュール パターンを使用して、カスタム タイプのシングルトン パターンを実装できます。 > コードは次のとおりです:

//拡張モジュール モード
//カスタム コンストラクター
function MyObject(name) {

this.name = name; ; //カスタムコンストラクターvar mo = new function () { //プライベート変数var privateValue = "" //拡張モジュールモードvar o = new; MyObject("gyycyy");

o.publicValue = "public"; //プライベート変数にアクセスします

o.getPrivateValue = function () {
return privateValue; o.setPrivateValue = 関数 (値) {
privateValue = 値;
return o;
mo.setPrivateValue("プライベート値"); (mo.getPrivateValue());
alert(mo.publicFunction());


上記のコード例は、MyObject のシングルトン モードを実装しています。
最後に言及する必要があるのは、クロージャの使用には利点と欠点があるということです。クロージャのスコープ チェーンは関数を含む変数オブジェクトを参照するため、追加のメモリを占有し、変数の検索も必要になります。スコープチェーンを介して実行されるため、検索時間が消費され、クロージャが深くなるほど状況はより深刻になります。さらに、IE (以前のバージョン) では、ガベージ コレクション メカニズムで参照カウントが使用されるため、次の例に示すように、循環参照が発生してメモリ リークが発生する可能性があります:




コードをコピーします


コードは次のとおりです。


function assignHandler(){
var element = document.getElementById("someElement"); element.onclick = function( ){
alert(element.id)
}

;
上記のコードでは、要素のイベントとしてクロージャが作成されています。クロージャは、関数 assingHandler を含む変数オブジェクトへの参照であるため、要素の参照カウントが 1 になります。リサイクルされないため、メモリ リークが発生します。それを修正する方法を考えることができます。