JavaScriptの閉鎖でこのポイントを正しく処理する方法には、次のものが含まれます。1。矢印関數(shù)を使用します。2。バインドメソッドを使用します。3。変數(shù)を使用してこれを保存します。これらの方法により、この固有関數(shù)が外部関數(shù)のコンテキストを正しく指していることが保証されます。

導(dǎo)入

今日は、JavaScriptの開発でしばしば厄介な問題について説明します。これは、閉鎖のthisポイントを正しく処理する方法です。この問題に直面すると、多くの開発者がしばしば混亂していることを知っていますが、心配しないでください。この謎を段階的に解決するためにあなたを連れて行きます。この記事を通して、閉鎖のthisポイントを柔軟に制御し、いくつかの実用的なヒントとベストプラクティスを習(xí)得する方法を?qū)Wびます。

基本的な知識のレビュー

JavaScriptでは、 this非常に特別なキーワードであり、その指摘はコンテキストが異なることによって異なります。閉鎖について話すと、 thisポインティングの問題は特に複雑になります。閉鎖とは、通常、関數(shù)內(nèi)の別の関數(shù)を定義することによって実裝される別の関數(shù)範(fàn)囲に変數(shù)にアクセスする許可を持つ関數(shù)です。

thisポイントについて議論する前に、 thisの基本的な動作を確認(rèn)しましょう。

• グローバル環(huán)境では、 thisグローバルオブジェクト（ブラウザのwindowとnode.jsのglobal ）を指します。
• 関數(shù)を呼び出すと、 this方向は、直接コール、オブジェクトメソッドを通話する、 callを使用して呼び出し、 applyメソッドなど、関數(shù)を呼び出す方法に依存します。

これらの基本を理解した後、閉鎖でthis適切に処理する方法をさらに詳しく調(diào)べることができます。

コアコンセプトまたは関數(shù)分析

閉鎖におけるthisポインティングの問題

閉鎖では、 this指し示す問題は、主に內(nèi)部関數(shù)のthis外側(cè)関數(shù)のthisと同期されていないためです。簡単な例を見てみましょう：

function outerfunction（）{
    this.name = 'outer';
    関數(shù)innerfunction（）{
        console.log（this.name）; //これはここで何を指しますか？
    }
    innerfunction（）;
}
<p>const obj = {
名前：「オブジェクト」
};</p><p> outerfunction.call（obj）; //出力：未定義</p>

この例では、 this innerFunctionでは、 outerFunctionでthisなく、グローバルオブジェクトを指しています。これは、非厳格なモードでは、 this內(nèi)部関數(shù)でデフォルトでグローバルオブジェクトを指しているためです。

解決

閉鎖でthisポインターを適切に処理するために、次の方法を使用できます。

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

矢印関數(shù)の重要な特徴は、それらが獨自のthis持っていないのではなく、外側(cè)のthisを継承することです。これにより、矢印機能が閉鎖に非常に役立ちます。

function outerfunction（）{
    this.name = 'outer';
    const innerfunction =（）=> {
        console.log（this.name）; //これは、外部機能のこれを指しています
    };
    innerfunction（）;
}
<p>const obj = {
名前：「オブジェクト」
};</p><p> outerfunction.call（obj）; //出力：外側(cè)</p>

bindメソッドを使用します

bindメソッドにより、 this関數(shù)が指定された値にバインドされている新しい関數(shù)を作成できます。

function outerfunction（）{
    this.name = 'outer';
    関數(shù)innerfunction（）{
        console.log（this.name）;
    }
    innerFunction.bind（this）（）;
}
<p>const obj = {
名前：「オブジェクト」
};</p><p> outerfunction.call（obj）; //出力：外側(cè)</p>

変數(shù)でthis保存します

別の一般的な方法は、 this外部関數(shù)から変數(shù)に保存し、內(nèi)部関數(shù)でこの変數(shù)を使用することです。

function outerfunction（）{
    this.name = 'outer';
    const self = this;
    関數(shù)innerfunction（）{
        console.log（self.name）;
    }
    innerfunction（）;
}
<p>const obj = {
名前：「オブジェクト」
};</p><p> outerfunction.call（obj）; //出力：外側(cè)</p>

使用の例

基本的な使用法

実用的なアプリケーションの例を見てみましょう。カウンタークラスを作成したい場合は、閉鎖にメソッドが使用されています。

クラスカウンター{
    constructor（）{
        this.count = 0;
    }
<pre class='brush:php;toolbar:false;'>increment（）{
    setimeout（（）=> {
        this.count;
        console.log（this.count）;
    }、1000）;
}

}

const counter = new counter（）; counter.increment（）; // 1秒後の出力：1

この例では、矢印関數(shù)を使用して、 thisポイントをCounterインスタンスに確認(rèn)します。

高度な使用

より複雑なシナリオでは、閉鎖のthisを動的に変更する必要がある場合があります。たとえば、ボタンクリックイベントハンドラーがあり、クリック時にオブジェクトのステータスを更新するとします。

クラスボタンハンドラー{
    コンストラクター（ボタン）{
        this.button = button;
        this.clicks = 0;
        this.button.addeventlistener（ 'click'、this.handleclick.bind（this））;
    }
<pre class='brush:php;toolbar:false;'>handleclick（）{
    this.clicks;
    console.log（ `ボタンをクリックした$ {this.clicks} times`）;
}

}

const button = document.getElementById（ 'mybutton'）; const handler = new ButtonHandler（ボタン）;

この例では、 bindメソッドを使用して、 handleClickメソッドのthis ButtonHandlerインスタンスを指していることを確認(rèn)します。

一般的なエラーとデバッグのヒント

閉鎖でthisポインターを扱う際の一般的なエラーには次のものがあります。

• 矢印関數(shù)を使用したり、メソッドbindのを忘れて、 thisグローバルオブジェクトに指し示しました。
• 厳密なモードでは、 this內(nèi)部関數(shù)ではグローバルオブジェクトではなくundefinedなります。

デバッグのヒント：

• console.log(this)を使用して、 this値をさまざまな場所に出力して、 this指摘するのに役立ちます。
• 開発ツールのブレークポイントデバッグを使用して、 thisの変更を徐々に追跡します。

パフォーマンスの最適化とベストプラクティス

閉鎖でthisポインターを扱う際に注目に値するいくつかのベストプラクティスがあります。

• 矢印関數(shù)を使用します：矢印関數(shù)は、 thisポインティングの問題を解決するだけでなく、コードをより簡潔にすることもできます。
• bindの過剰使用を避ける： bindメソッドは機能しますが、各呼び出しで新しい関數(shù)が作成されるため、過剰使用はメモリ消費を増加させます。
• コードを読み取り可能にしてください：クロージャーを使用するときは、他の開発者があなたの意図を簡単に理解できるように、コードが構(gòu)造化されていることを確認(rèn)してください。

パフォーマンスの比較

さまざまな方法のパフォーマンスを比較しましょう。

function testrowfunction（）{
    const obj = {
        名前：「テスト」
    };
    const func =（）=> {
        console.log（this.name）;
    };
    for（i = 0; i <1000000; i）{
        func.call（obj）;
    }
}
<p>関數(shù)testbindmethod（）{
const obj = {
名前：「テスト」
};
function func（）{
console.log（this.name）;
}
const boundfunc = func.bind（obj）;
for（i = 0; i <1000000; i）{
boundfunc（）;
}
}</p><p>関數(shù)testvariablemethod（）{
const obj = {
名前：「テスト」
};
function func（）{
const self = this;
return function（）{
console.log（self.name）;
};
}
const innerfunc = func.call（obj）;
for（i = 0; i <1000000; i）{
innerfunc（）;
}
}</p><p> console.time（ &#39;arrow function&#39;）;
testrowFunction（）;
Console.TimeEnd（ &#39;Arrow function&#39;）;</p><p> console.time（ &#39;bind method&#39;）;
testbindmethod（）;
console.timeend（ &#39;bind method&#39;）;</p><p> Console.time（ &#39;変數(shù)メソッド&#39;）;
testvariablemethod（）;
Console.TimeEnd（ &#39;変數(shù)メソッド&#39;）;</p>

このコードを?qū)g行すると、新しい関數(shù)インスタンスを作成する必要がないため、矢印関數(shù)のパフォーマンスが通常最適であることがわかります。

ピットポイントを踏んで、深く考える

閉鎖でthisポインターを扱う際に注意すべきいくつかの一般的な落とし穴があります。

• 矢印関數(shù)の制限：矢印関數(shù)は、獨自のthisを持っていないため、コンストラクターとして使用できません。コンストラクターが必要なシナリオでは、従來の関數(shù)定義を使用する必要があります。
• bindメソッドのオーバーヘッド： bindメソッドはthisポインティングの問題を効果的に解決できますが、パフォーマンスに敏感なアプリケーションの問題になる可能性のある新しい関數(shù)インスタンスが作成されます。
• 変數(shù)はthis複雑さを節(jié)約します。このアプローチは、効果的ですが、 selfやthatの変數(shù)の役割をさらに理解するため、複雑なコードでコードの読みやすさの低下につながる可能性があります。

深く考えてください：

• 設(shè)計パターンの選択：コードを設(shè)計するときは、モジュールパターンや関數(shù)式（iifes）の即時実行などの設(shè)計パターンthis使用することを検討してください。
• 厳密なモードの影響：厳密なモードでは、 thisデフォルトの動作はさまざまであり、これらの違いを理解すると、より堅牢なコードを書くことができます。
• 機能カリキュリゼーション：場合によっては、機能カリキュリゼーションは、コードの再利用性と柔軟性を向上させながら、 thisポイントをより適切に管理するのに役立ちます。

これらの方法とテクニックを通じて、閉鎖のthisポイントを柔軟に制御し、JavaScriptコードをより効率的かつ容易に書くことができます。この記事が、閉鎖におけるthisポインティングの問題をよりよく理解し解決するのに役立つことを願っています。

以上が閉鎖でこのポイントを正しく処理する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。