このオブジェクトを指す JavaScript の入れ子関数の解決策 error_javascript のヒント

まず、2 層の関数がネストされた JavaScript コードを見てみましょう。

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

var me = {
名前 : 'Jimbor',
ブログ : 'http://jmedia.cn/',
sayMyName : function(){
var pre = '私の名前は: ';
function displayName(){
alert(pre this.name)
}
displayName(); me.sayMyName();


コードの観点からは、sayMyName() の呼び出しを通じて私の name 属性を表示したいと考えています。つまり、私の名前は: Jimbor です。ただし、ブラウザの実行結果は次のようになります:

コードをコピー

コードは次のとおりです: 私の名前は:

name 属性が正しく表示されない理由は何ですか? JavaScript はグローバル関数内でこれをグローバル オブジェクトにバインドしており、入れ子になった関数についても同じ説明が使用されていることがわかります。このエラーの結果、ネストされた関数は、これが指すオブジェクトを異なる方法で解釈するため、特定の特別なタスクを完了するために簡単に使用できなくなります。
もちろん、この例では、ネストされた関数を使用せずに対応する関数を完成させることができます。ただし、アプリケーションによっては、この構造が必要になる場合があります。幸いなことに、この間違いを修正する方法があります。
方法 1: apply() 関数を使用する

コードをコピーします

コードは次のとおりです: apply (this_obj, params_array)

apply() 関数は、関数を呼び出すときに this が指すオブジェクトを書き換えることができます。最初の this_obj は、必要なオブジェクトです。これを書き換えます。params_array が指すオブジェクトは、呼び出し元の関数に渡すために使用されるパラメーター配列です。元のコードを次のように書き換えます。

コードをコピーします

コードは次のとおりです: var me = { 名前 : 'Jimbor',

ブログ : 'http://jmedia.cn/',

sayMyName : function(){
var pre = '私の名前は: ';
関数 displayName(){
alert(pre this.name);
}
displayName.apply(me);
}
}
me.sayMyName();


ブラウザの実行結果を見てください:
私の名前は: Jimbor
同様の関数には call() があります。違いは、call() がパラメーターを配列にパックするのではなく、1 つずつ渡すことです。

方法 2: this を that に置き換えます。
つまり、内部関数がこれを呼び出す必要がある場合は、最も外側の関数で変数を定義して、これを呼び出す必要があります。 。通常、慣例に従って、この変数にはその名前が付けられます。次に、元のコードを次のように変更できます:




コードをコピーします

コードは次のとおりです: var me = { name : 'Jimbor',

blog : 'http://jmedia.cn/',

sayMyName : function(){
var pre = '私の名前は: ';
var that = this;
関数 displayName(){
alert(pre that.name)
displayName(); 🎜>me.sayMyName ();


とても便利ですね。特定のオブジェクトの指定を必要としないため、2 番目の方法の方が推奨されます。