this 的指向：深入浅出解析 JavaScript 中的 this

前端

2023-09-14 20:20:27

this 的指向规则

在 JavaScript 中，this 的指向由以下规则决定：

1. 默认绑定

默认绑定是 this 最常见的指向方式。在以下情况下，this 指向全局对象（在浏览器中为 window）：

在全局作用域中
在函数内部，如果没有明确绑定 this

2. 隐式绑定

隐式绑定是指 this 指向调用函数的对象。在以下情况下，this 指向调用函数的对象：

在对象的方法中
在事件处理程序中（例如，按钮的 onclick 属性）

3. 显示绑定

显示绑定允许您显式地将 this 绑定到特定的对象。可以使用以下方法之一进行显示绑定：

call() 方法：func.call(thisArg, arg1, arg2, ...)
apply() 方法：func.apply(thisArg, [args])
bind() 方法：func.bind(thisArg)

4. new 绑定

new 绑定在使用 new 创建对象时发生。在这种情况下，this 指向新创建的对象。

5. 箭头函数的 this

箭头函数没有自己的 this 绑定。它们继承其父级作用域中的 this。

this 的指向示例

以下示例演示了 JavaScript 中 this 的指向规则：

// 默认绑定
console.log(this); // 指向 window

// 隐式绑定
const obj = {
  name: 'John Doe',
  sayName() {
    console.log(this.name); // 指向 obj
  }
};

obj.sayName();

// 显示绑定
function sayHello() {
  console.log(this.name);
}

sayHello.call({ name: 'Jane Doe' }); // 指向 { name: 'Jane Doe' }

// new 绑定
function Person(name) {
  this.name = name;
}

const person = new Person('John Doe');

console.log(person.name); // 指向 'John Doe'

// 箭头函数的 this
const arrowFunc = () => {
  console.log(this); // 继承父级作用域中的 this
};

arrowFunc();