在JavaScript中，this的行為取決于函數(shù)的調(diào)用方式。① 在普通函數(shù)調(diào)用中，this指向全局對(duì)象（瀏覽器中為window，Node.js中為global），但在嚴(yán)格模式下為undefined；② 在對(duì)象方法中，this指向調(diào)用該方法的對(duì)象，但若單獨(dú)調(diào)用該方法，this可能丟失上下文；③ 箭頭函數(shù)沒(méi)有自己的this，它繼承自外層作用域，適用于保持this的一致性；④ 使用.bind()、.call()、.apply()可顯式綁定this的值，分別用于創(chuàng)建綁定函數(shù)、立即調(diào)用并傳參、立即調(diào)用并以數(shù)組形式傳參。理解this的關(guān)鍵在于函數(shù)被如何調(diào)用而非如何定義。

當(dāng) you're working with JavaScript, the this keyword can be one of the trickiest concepts to wrap your head around. It doesn’t always refer to what you might expect, especially if you're coming from other programming languages. In short: this refers to the context in which a function is called — not where it's defined.

Let’s break this down into some common situations so you can better understand how this behaves.

How this works in regular function calls

In a normal function call (not inside an object method or class), this usually points to the global object — which in browsers is window, and in Node.js is global. But if you’re using strict mode ("use strict"), then this will be undefined.

For example:

function showThis() {
  console.log(this);
}

showThis(); // In browser: Window object (or undefined in strict mode)

So if you see this pointing to something unexpected like the global object, check if the function is being called normally without any context.

A few things to note:

• This behavior changes when you're inside arrow functions (we’ll get to that).
• If you're binding event handlers or callbacks, sometimes this loses its intended context unless explicitly bound.

this inside object methods

When a function is part of an object (a method), this refers to the object that owns the method. That makes sense because you’re calling the function in the context of that object.

Example:

const user = {
  name: "Alice",
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet(); // Hello, Alice

Here, this refers to user because the method is invoked on that object. But watch out for these gotchas:

• If you extract the method and call it separately, this may become undefined or point to the global object.

  const sayHi = user.greet;
  sayHi(); // Hello, undefined (in strict mode)

• You can fix this by binding the method explicitly with .bind(user) or using an arrow function inside the method.

Arrow functions and this

Arrow functions do not have their own this. Instead, they inherit this from the surrounding lexical context — basically, the closest non-arrow function around them.

This is super useful when writing callbacks inside methods:

const user = {
  name: "Bob",
  greetLater() {
    setTimeout(() => {
      console.log(`Hi, ${this.name}`);
    }, 1000);
  }
};

user.greetLater(); // Hi, Bob

If we had used a regular function instead of an arrow function inside setTimeout, this would point to the global object or undefined, depending on strict mode.

So remember:

• Arrow functions are great for keeping this consistent
• They’re not suitable as object methods if you need to access the object via this

Changing this with bind, call, and apply

Sometimes you want to control exactly what this refers to. For that, JavaScript gives us three tools: .call(), .apply(), and .bind().

• .call(obj, arg1, arg2...) runs the function immediately with a specific this
• .apply(obj, [args]) is similar but takes arguments as an array
• .bind(obj) returns a new function with this permanently set

Use case example:

function introduce(lang) {
  console.log(`${this.name} knows ${lang}`);
}

const person = { name: "John" };

introduce.call(person, "JavaScript"); // John knows JavaScript
introduce.apply(person, ["Python"]);   // John knows Python

const boundIntro = introduce.bind(person);
boundIntro("Java"); // John knows Java

These methods are especially helpful when borrowing methods from other objects or setting up event handlers.

That’s the general idea behind how this works in JavaScript. It’s all about where and how a function is called — not where it’s written. Keep practicing and pay attention to how context changes in different scenarios. Once you get used to the rules, it becomes much more predictable.

基本上就這些。

以上是此關(guān)鍵字在JavaScript中的工作方式的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！