JS の this ポインターを正しく処理する 5 つの方法

私は、JS の関数実行コンテキストのポインター (このポインターとも呼ばれます) を変更するのが好きです。

たとえば、配列のようなオブジェクトに対して配列メソッドを使用できます。

const reduce = Array.prototype.reduce;

function sumArgs() {
  return reduce.call(arguments, (sum, value) => {
    return sum += value;
  });
}

sumArgs(1, 2, 3); // => 6

一方で、これを理解するのは困難です。

これを間違って指すために使用していることがよくあります。以下では、これを目的の値に単純にバインドする方法を説明します。

[関連コースの推奨事項: JavaScript ビデオ チュートリアル ]

始める前に、パラメーターとして提供された関数のみを実行するヘルパー関数execute(func)が必要です。

function execute(func) {
  return func();
}

execute(function() { return 10 }); // => 10

次に、これを取り巻くエラーの性質、つまりメソッドの分離の理解に移ります。

1. メソッド分離の問題

フィールド firstName と lastName を含むクラス Person があるとします。さらに、人のフルネームを返すメソッド getFullName() があります。以下に示すように:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = function() {
    this === agent; // => true
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');
agent.getFullName(); // => '前端 小智'

パーソン関数がコンストラクターとして呼び出されていることがわかります: new Person('front end', 'Xiao Zhi')。関数内のこれは、新しく作成されたインスタンスを表します。

getfullname() は、ユーザーのフルネーム「フロントエンド Xiaozhi」を返します。予想どおり、getFullName() メソッド内の this はエージェントと同等です。

補助関数がagent.getFullNameメソッドを実行するとどうなるか:

execute(agent.getFullName); // => 'undefined undefined'

実行結果は正しくありません:「未定義 未定義」。これは、この指定が間違っていることが原因で発生する問題です。

getFullName() メソッドでは、this の値はグローバル オブジェクト (ブラウザ環境のウィンドウ) です。これは window に等しく、${window.firstName} ${window.lastName} の実行結果は '未定義 未定義' になります。

これは、execute(agent.getFullName) が呼び出されたときにメソッドがオブジェクトから切り離されるために発生します。基本的に、行われるのは単なる通常の関数呼び出しです (メソッド呼び出しではありません):

execute(agent.getFullName); // => 'undefined undefined'

// 等价于:

const getFullNameSeparated = agent.getFullName;
execute(getFullNameSeparated); // => 'undefined undefined'

これは、オブジェクトからメソッドが切り離されると呼ばれるものです。メソッドが切り離されて実行されるとき、これには何の関係もありません。元のオブジェクト。

1. メソッド内の this が正しいオブジェクトを指していることを確認するには、これを行う必要があります。

2. プロパティ アクセサーの形式でメソッドを実行します。agent.getFullName( ) またはこれを静的にバインドします (アロー関数、.bind() メソッドなどを使用して) 含まれるオブジェクトを決定します。

メソッド分離の問題と、その結果として生じる不正な this ポインティングは、通常、次の状況で発生します。

コールバック

// `methodHandler()`中的`this`是全局对象
setTimeout(object.handlerMethod, 1000);

イベント ハンドラーを設定するとき

// React: `methodHandler()`中的`this`是全局对象
<button onClick={object.handlerMethod}>
  Click me
</button>

次に、いくつかの便利なメソッドを紹介します。オブジェクトから分離し、これを目的のオブジェクトにポイントする方法。

#2. コンテキストを閉じる

これをクラス インスタンスを指すように維持する最も簡単な方法は、追加の変数 self:## を使用することです。 #

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  const self = this;
  this.getFullName = function() {
    self === agent; // => true
    return `${self.firstName} ${self.lastName}`;
  }
}
const agent = new Person('前端', '小智');
agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

getFullName() は self 変数を静的に閉じ、これを手動でバインドします。

これで、execute(agent.getFullName) を呼び出すと、getFullName() メソッド内のこれが常に正しい値を指すため、すべてが正常に動作します。

3. アロー関数の使用変数を追加せずにこれを静的にバインドする方法はありますか?はい、それがまさにアロー関数の機能です。

アロー関数を使用して Person:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = () => `${this.firstName} ${this.lastName}`;
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

を再構築します。

アロー関数は、これを字句的にバインドします。簡単に言うと、外部関数 this が定義されている場所からの値を使用します。

外部関数コンテキストが必要な場合はすべて、アロー関数を使用することをお勧めします。

4. バインディング コンテキスト次に、さらに一歩進んで、ES6 のクラスを使用して person を再構築しましょう。

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => 'undefined undefined'

残念ながら、新しいクラス構文を使用した場合でも、execute(agent.getFullName) は依然として「未定義 未定義」を返します。

クラスの場合、追加の変数 self またはアロー関数を使用して this のポインティングを修正しても機能しません。

しかし、メソッドのコンテキストをコンストラクターにバインドする、bind() メソッドに関するトリックがあります。

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

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

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

this.getFullName in the constructiontor = this.getFullName.bind( this ) メソッド getFullName() をクラス インスタンスにバインドします。

execute(agent.getFullName) は期待どおりに動作し、「フロントエンド Xiaozhi」を返します。

5. ファット アロー メソッドbind メソッドは少し長すぎるため、ファット アロー メソッドを使用できます:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName = () => {
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

Fat arrow メソッド getFullName =() =>{…} は、メソッドがオブジェクトから切り離されている場合でも、クラス インスタンスにバインドされます。

このメソッドは、これをクラスにバインドする最も効果的かつ簡潔な方法です。

6. 概要メソッドがオブジェクトから分離されていると、このポインティングが正しくないという問題が発生します。これを静的にバインドするには、追加の変数 self を手動で使用して、正しいコンテキスト オブジェクトを保持します。ただし、より良い代替方法は、本質的にこれを語彙的にバインドする役割を果たすアロー関数を使用することです。

クラスでは、bind() メソッドを使用して、コンストラクター内のクラス メソッドを手動でバインドできます。もちろん、バインドという長い方法を使用する必要がない場合は、簡潔で便利な太い矢印の表現方法を使用することもできます。

原文: https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter5.md

この記事は js からのものですチュートリアル コラム、学習へようこそ!

以上がJS の this ポインターを正しく処理する 5 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。