this的四条绑定规则，你必须知道的JavaScript基础知识

前端

2023-05-01 11:45:04

JavaScript中的this一个深度指南

什么是this？

在JavaScript中，this关键字代表当前执行代码的作用域对象。它是一个特殊的对象，可以是函数、对象或全局对象。理解this是如何工作的非常重要，因为它可以帮助我们充分利用JavaScript的强大功能。

this的绑定规则

为了理解this的工作原理，我们需要了解四个绑定规则：

new调用： 当一个函数使用new关键字调用时，this将绑定到新创建的对象。
call或apply调用： 当一个函数使用call()或apply()方法调用时，this将绑定到指定的第一个参数。
上下文对象调用： 当一个函数在对象上下文中调用时，this将绑定到那个对象。
默认绑定： 如果以上都不是，则使用默认绑定。在严格模式下绑定到undefined，否则绑定到全局对象。

示例

让我们看一些代码示例来了解这些规则是如何工作的：

// new调用
function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person = new Person('John', 30);

console.log(person.name); // John
console.log(person.age); // 30

// call调用
function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = {
  name: 'John'
};

greet.call(person); // Hello, John!

// 上下文对象调用
const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

person.greet(); // Hello, John!

// 默认绑定
function greet() {
  console.log(`Hello, ${this.name}!`);
}

greet(); // Hello, undefined! (in strict mode)
greet(); // Hello, window! (in non-strict mode)