this在JavaScript中的指向取決于函數(shù)調(diào)用方式，而非定義位置。1.全局上下文中，this指向全局對(duì)象（瀏覽器中為window，嚴(yán)格模式下為undefined）；2.作為對(duì)象方法調(diào)用時(shí)，this指向該對(duì)象，但單獨(dú)調(diào)用會(huì)丟失上下文，可用bind或箭頭函數(shù)解決；3.構(gòu)造函數(shù)中this指向新創(chuàng)建的實(shí)例；4.箭頭函數(shù)無自身this，繼承外層上下文，不適合用于需要綁定對(duì)象的方法；5.事件處理中this通常指向觸發(fā)事件的DOM元素，但使用箭頭函數(shù)則繼承外層上下文。掌握這些規(guī)則有助于避免常見錯(cuò)誤。

In JavaScript, the this keyword can be a bit confusing because its value depends on how a function is called. It doesn’t refer to the function itself or its scope, but rather to the object that "owns" the method at runtime.

Let’s break it down with some common scenarios and practical advice.

Global Context: this Points to the Global Object

When you're in the global execution context (outside of any function), this refers to the global object. In a browser environment, that's the window object. In Node.js, it's the global object.

console.log(this); // In a browser, logs the window object

This behavior changes in strict mode:

"use strict";
console.log(this); // Logs undefined in a function, or the global object outside

Tip: Don’t rely on this in the global scope — it can behave differently across environments, especially when modules or bundlers are involved.

Method Invocation: this Refers to the Owner Object

When a function is called as a method of an object, this inside that function refers to the object the method belongs to.

const person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, "   this.name);
  }
};

person.greet(); // Logs "Hello, Alice"

Common mistake: If you assign the method to a variable and call it separately, this loses context:

const greetFunc = person.greet;
greetFunc(); // Logs "Hello, undefined" in non-strict mode

To fix this, bind the context explicitly:

• Use .bind(person) when assigning the function
• Or use arrow functions if you don't want to bind manually

Constructor Functions: this Refers to the New Instance

When a function is used as a constructor with the new keyword, this refers to the newly created object.

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

const alice = new Person("Alice");
console.log(alice.name); // "Alice"

Here’s what happens under the hood:

• A new empty object is created
• this inside the constructor points to that new object
• The object is linked to the constructor’s prototype
• The new object is returned automatically unless you return a different object

Note: If you forget new, this will point to the global object (or undefined in strict mode), which can lead to bugs.

Arrow Functions: this Is Lexically Scoped

Arrow functions do not have their own this. Instead, they inherit this from the surrounding lexical context.

const person = {
  name: "Bob",
  greet: () => {
    console.log("Hi, "   this.name);
  }
};

person.greet(); // Logs "Hi, " (name is undefined)

Because the arrow function uses the outer this, which in most cases is the global object or undefined, it’s not suitable for object methods where you need access to the object itself.

Best practice: Use regular functions for object methods and arrow functions when you want to preserve the outer this — like inside callbacks.

Event Handlers: this Often Points to the DOM Element

When using this inside an event handler attached via traditional DOM properties (onclick, etc.), this typically refers to the element that triggered the event.

<button onclick="console.log(this)">Click me</button>

That logs the <button> element itself.

But if you attach the handler via addEventListener, the same rule applies unless you bind another context:

document.querySelector("button").addEventListener("click", function() {
  console.log(this); // Logs the button element
});

With arrow functions again, this is inherited:

document.querySelector("button").addEventListener("click", () => {
  console.log(this); // Likely logs the window/global object
});

So be careful mixing arrow functions with DOM events if you expect this to refer to the element.

How this behaves really comes down to how the function is called, not how or where it’s defined. Once you get familiar with these patterns, you’ll start recognizing them in real code and avoid those tricky bugs.

基本上就這些。

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