JavaScript での「this」と直接オブジェクト参照: 入れ子関数ではどちらのアプローチが安全ですか?

独自のキーの関数内のオブジェクト リテラル参照: 影響の評価

JavaScript では、オブジェクト リテラル内に関数を含めることが一般的で、便利な関数を提供します。データと動作をカプセル化する方法。ただし、これらの関数内でオブジェクト プロパティにアクセスするときに問題が発生します。これを使用するか、オブジェクト リテラルを直接参照する必要がありますか?

これと直接オブジェクト参照の使用

問題の説明で提供されている最初の例では、オブジェクト リテラルを参照するためにこれを使用しています:

var obj = {
    key1: "it",
    key2: function(){return this.key1 + " works!"}
};
alert(obj.key2());

ただし、2 番目の例はこの例では、これをバイパスしてオブジェクトを直接参照します。

var obj = {
    key1: "it",
    key2: function(){return obj.key1 + " works!"}
};
alert(obj.key2());

両方のアプローチの潜在的な落とし穴

どちらのアプローチでも問題が発生する可能性があります:

• このリファレンス: オブジェクトのメソッドとして呼び出されない場合(obj.key2())、これはグローバル オブジェクトなど、他のものを参照する場合があります。
• 直接オブジェクト参照: 関数の実行中にオブジェクトが再割り当てされると、関数不正な値にアクセスする可能性があります。

落とし穴

これらの落とし穴を回避するには、いくつかのオプションが存在します。

• ES6 Const: オブジェクトの再割り当てを防ぐために const を使用します。
• クロージャ: オブジェクトをローカル スコープに保存しますClosure.
• bind(): 関数をオブジェクトにバインドして、関数が常に正しいオブジェクトを参照するようにします。

安全な実装

次のコードは、クロージャー:

var obj = (function(){
    var local = {
        key1: "it",
        key2: function(){ return local.key1 + " works always!" }
    };
    return local;
})();

以上がJavaScript での「this」と直接オブジェクト参照: 入れ子関数ではどちらのアプローチが安全ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。