JavaScript -- このキーワード

JavaScript の this キーワードは、現在実行中の関数が属するオブジェクトを参照するために使用されます。これは、関数が呼び出されたコンテキストオブジェクトを指します。

具体的には、JavaScript では、this の値は、関数が定義されたときではなく、関数が呼び出されたときに決定されます。この値は、関数がどのように呼び出されたかによって異なります。

いくつかの一般的な状況におけるこの値は次のとおりです。

1. グローバルスコープ (関数の外側) では、これはグローバルオブジェクト (ブラウザ環境のウィンドウオブジェクトなど) を指します。
2. 関数がオブジェクトのメソッドとして呼び出された場合、メソッドを呼び出したオブジェクトを指します。
3. コンストラクターを使用してオブジェクトを作成する場合、これは新しく作成されたオブジェクトを指します。
4. call() または apply() メソッドを使用して関数を呼び出す場合、関数内で this の値を手動で指定できます。
5. アロー関数を使用する場合、this の値は、呼び出しメソッドによって決定されるのではなく、親スコープ内の this の値から継承されます。
場合によっては、この値が複雑になったり、エラーが発生しやすくなったりする可能性があることに注意してください。

次の例は、JavaScript でのこのキーワードの使用法と値を示しています。

1. グローバルスコープでは、これはグローバルオブジェクト (通常はブラウザ環境のウィンドウオブジェクト) を指します。

console.log(this); // 输出全局对象 (浏览器环境中通常是 window)

2. 関数がオブジェクトのメソッドとして呼び出される場合、これはメソッドを呼び出したオブジェクトを指します。

var person = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

person.sayHello(); // 输出 "Hello, John"

3. コンストラクターを使用してオブジェクトを作成する場合、これは新しく作成されたオブジェクトを指します。

function Person(name) {
  this.name = name;
}

var person1 = new Person('John');
console.log(person1.name); // 输出 "John"

4. call() または apply() メソッドを使用して、関数内で this の値を手動で指定します。

function greet() {
  console.log('Hello, ' + this.name);
}

var person = { name: 'John' };

greet.call(person); // 输出 "Hello, John"

5. アロー関数では、 this の値は親スコープの this の値から継承され、呼び出しメソッドが変更されても変わりません。

var person = {
  name: 'John',
  sayHello: () => {
    console.log('Hello, ' + this.name);
  }
};

person.sayHello(); // 输出 "Hello, John" (箭头函数继承了外部作用域的 this 值)

おすすめ