JavaScript オブジェクト リテラル関数の「this」をオブジェクト リテラル名に置き換えることはできますか?

オブジェクト リテラル関数参照のあいまいさ: 'this' のオブジェクト リテラルへの置き換え

オブジェクト リテラルを扱うときに重要な疑問が生じます。オブジェクト内の関数は、「this」の代わりにリテラルの名前を使用して親オブジェクトを参照しますか?これは一見機能しているように見えますが、予期せぬ結果を招く可能性があります。

次の例を考えてみましょう:

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

key2 関数内の 'this' がグローバルを参照しているため、このコードはコンソール エラーをトリガーします。 obj オブジェクトの代わりにオブジェクト (ウィンドウ) を使用します。このエラーは、関数内でオブジェクト リテラルを直接使用することで回避できます。

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

ただし、このアプローチでも問題が発生しないわけではありません。追加のシナリオを分析してみましょう:

1. 外部関数呼び出し:

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

key2 関数を (メソッドとしてではなく) スタンドアロン関数として呼び出します。 obj) は「this」参照を壊し、予期せぬ事態を引き起こす可能性があります

2. 参照の交換:

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

obj 参照を二次参照から変更すると、key2 関数の内部参照が正しい参照に無効になる可能性があります。 object.

これらの潜在的な問題に対処するために、いくつかの解決策があります。 available:

• ES6 with const: 「this」参照を壊す可能性のあるオブジェクトの突然変異を防ぎます。
• ES5 Closure: オブジェクトをカプセル化します。外部参照を避けるために関数内で
• バインディング: key2 関数を obj オブジェクトにバインドして、その 'this' 参照が常に正しいことを確認します。

最適なソリューションの選択は状況によって異なります。特定の状況と、概説された問題が発生する可能性について。それでも、オブジェクト リテラル関数を使用する場合は、潜在的な落とし穴を認識し、必要な予防措置を講じることが重要です。

以上がJavaScript オブジェクト リテラル関数の「this」をオブジェクト リテラル名に置き換えることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。