JSの中で何種類の楽な処理'this'の指し方

1.方法分離問題は、クラスPersonがフィールドfirst NameとlastNameを含むと仮定する.また、彼のフルネームを返す方法もあります.function Person(first Name,lastName){this.first Name=first Name;this.lastName=lastName;
this.getFull Name=function(){this==agent;/=>true return ${this.firstName} ${this.lastName};}
const agent=new Person(‘先端’、‘サトシ’);agent.getFullName()/=>‘フロントエンドのサトシ’は、Person関数が構造関数として呼び出されるのを見ることができる.new Person(‘先端’,‘サトシ’).関数内部のthisは、新規作成の例を表します.getfullnameはこの人のフルネームに戻ります.予想されるように、get Full Name()メソッド内のthisはagentに等しい.補助関数がagent.getFullName方法を実行すると、何が起こるか?execute;/=>undefined undefined’の実行結果が正しくない:「undefined undefined」、これはthisが正しくないことを指す問題です.現在はgetFullName法で、thisの値はグローバルオブジェクト(ブラウザ環境のwindow)です.thisはwindowに等しく、$window.first Name、{window.lastName}実行結果は‘undefined undefined’です.このような場合は、execute(agent.getFullName)を呼び出したときに、この方法がオブジェクトから分離されるからです.基本的に発生しているのは、従来の関数呼び出しだけです.undefined undefined’
//相当于:
const get Full Name Separated=agent.get FullName;execute(getFullNameSeparated)/=>undefined undefined'これは、いわゆる方法がそのオブジェクトから分離され、方法が分離されて実行されると、thisは元のオブジェクトと接続されていません.メソッド内部のthisを確保するためには、正しい対象を指す必要があります.
属性アクセス器として方法を実行する:agent.getFullName()または、含まれるオブジェクトに静的に結合する(矢印関数、.bind(方法などを使用する)
方法分離問題、およびこれによってthis指向が正しくないことが起こり、通常は以下のいくつかの場合に現れる.コールバック／methodHandler()のthisはグローバルオブジェクトset Timeoutである.イベントハンドラを設定する場合／／React:methodHandler()のthisは、グローバルオブジェクトClick meであり、次に、方法がオブジェクトから分離された場合、どのようにして、thisを必要なオブジェクトに向けるかについての有用な方法を紹介する.2.コンテキストを閉じるthis指向性インスタンスを維持する最も簡単な方法は、追加の変数self:function Person(first Name、lastName)を使用することである.
const self=this
this.getFlame=function(){self==agent;/=>true return ${self.firstName} ${self.lastName};}
const agent=new Person(‘先端’、‘サトシ’);
agent.getFullName()/=>‘フロントエンドのサトシ’execute,/=>フロントエンドのサトシ’getFullName()はself変数を静的にオフにして、thisを手動で結合するのに効果的です.現在、executeを呼び出すと、すべての作業が正常に行われています.getFullName()メソッド内thisは常に正しい値を指しています.3.矢印関数を使用して、変数が付加されていない場合、スタティックバインディングthisができますか?はい、これは矢印関数の役割です.矢印関数を使用してPersonを再構築します.FrstName.
this.getFull Name=>${this.firstName} ${this.lastName};
const agent=new Person(‘先端’、‘サトシ’);
agent.getFullName()/=>‘フロントエンドのサトシ’execute,/=>先端のサトシ’矢印関数は語法でthisを結合します.簡単に言えば、外部関数からのthisの値を使用します.外部関数コンテキストを使用する必要がある場合は、矢印関数を使用することを推奨します.4.バインディング文脈は、今より一層、ES 6のクラスを使ってPersonを再構築します.class Person｛construct(first Name、lastName)｛this.first Name=first Name;this.lastName=lastName;｝
get FullName(){return ${this.firstName} ${this.lastName};}
const agent=new Person(‘先端’、‘サトシ’);
agent.getFullName()/=>‘フロントエンドのサトシ’execute,/=>undefined undefined’は残念ながら、新しい種類の文法を使っても、executeは依然として「undefined undefined」に戻ります.クラスの場合、付加的な変数selfまたは矢印関数を使って、thisの指向を修復することはできません.しかし、bind()方法に関するテクニックがあります.その方法の文脈をコンストラクションに結び付けます.class Person｛construtor(first Name、lastName)｛this.first Name=first Name;this.lastName=lastName;

this.getFullName = this.getFullName.bind(this);

)
get FullName(){return ${this.firstName} ${this.lastName};}
const agent=new Person(‘先端’、‘サトシ’);
agent.getFullName()/=>‘フロントエンドのサトシ’execute,/=>フロントエンドのサトシ’コンストラクションにおけるthis.getFullName=this.getFullName.bindは、方法getFulllNameをクラスのインスタンスに結び付ける.execute(agent.getFullName)は予定通り作業し、「先端サトシ」に戻ります.5.太い矢印の方法bindはちょっと長すぎます.太い矢印の方式を使ってもいいです.class Person{constructor}
get FullName=>{return ${this.firstName} ${this.lastName};}
const agent=new Person(‘先端’、‘サトシ’);
agent.getFullName()/=>‘フロントエンドのサトシ’execute,/=>前端のサトシ’太い矢印方法は、たとえ方法を対象と分離しても、GtFull Name==""""""""",..."をクラス例に結びつける.この方法はクラスでthisを結合する最も効果的で簡潔な方法である.6.対象から分離する方法をまとめると、this指向が正しくない問題が発生します.thisを静的に結合し、適切なコンテキストオブジェクトを保存するために追加変数selfを手動で使用することができます.しかし、より良い代替法は矢印関数を使用することであり、その本質は語法上でthisを結合するためである.クラスでは,Bind()法を用いて,構造関数におけるクラス法を手動で結合することができる.もちろん、ビッドのような長い方法を使わなくても、簡潔で便利な太い矢印の表現方法が使えます.