JavaScript 中的 this 怎么调用

JavaScript 中的 this 关键字代表函数运行时的上下文对象，它的值取决于函数是如何被调用的、函数的调用位置以及调用形式。通常情况有全局调用、对象方法调用、构造函数调用和apply/call/bind方法调用。在全局作用域或者函数中，this 默认指向全局对象，如在浏览器中是 window。当作为对象的方法调用时，this 指向调用该方法的对象。而在构造函数中使用 new 关键字调用时，this 指向新创建的实例对象。apply、call 和 bind 是函数对象的方法，它们可以直接定义 this 的值。

一、全局与函数作用域中的 this

在全局作用域中，this 关键字指向全局对象，这意味着在浏览器中，this 会指向 window 对象。如果在严格模式下使用函数中的 this，则不会指向全局对象，而是保持 undefined，防止不小心修改全局对象。

在非严格模式下，独立函数调用（函数非作为某个对象的方法调用）中 this 同样会指向全局对象。这在某些情况下可能会引起混淆，因为如果开发者期望 this 绑定到特定的上下文而不是全局对象时，就可能会导致程序出错。

二、对象方法中的 this

当函数作为对象中的方法被调用时，this 指向该方法所属的对象。这是 this 使用最频繁也是最直观的一种场景。通过这种方式，方法能够访问调用它的对象的属性和其他方法。

const person = {

  name: 'Alice',
  greet: function() {
    console.log('Hi, my name is ' + this.name);
  }
};
person.greet(); // 'Hi, my name is Alice'

在上面的例子中，greet 方法中的 this 指向 person。

三、构造函数中的 this

当使用 new 关键字调用构造函数时，JavaScript 会创建一个新的对象，并将构造函数中的 this 绑定到这个新对象上。这允许我们在构造函数中为对象设定属性和方法。

function Person(name) {

  this.name = name;
  this.greet = function() {
    console.log('Hi, my name is ' + this.name);
  };
}
const user = new Person('Bob');
user.greet(); // 'Hi, my name is Bob'

在上面的例子中，this 在 greet 方法内指向的是通过 Person 构造器创建的 user 对象。

四、apply/call/bind 方法调用

apply、call 和 bind 是 Function.prototype 上的方法，它们可以用来改变函数调用时 this 的绑定对象。

• call 方法允许为不同的对象分配和调用属于一个对象的函数/方法。除了在特定的 this 值上调用该函数之外，还可以传入一系列单个参数。

function greet() {

  console.log('Hello, ' + this.name);
}
const person1 = { name: 'John' };
greet.call(person1); // 'Hello, John'

• apply 方法的作用与 call 相似，不同之处在于你可以将参数作为数组传递。

function introduce(occupation, age) {

  console.log('My name is ' + this.name + ', I am a ' + occupation + ', and I am ' + age + ' years old.');
}
const person = { name: 'Michael' };
introduce.apply(person, ['Developer', 30]); // 'My name is Michael, I am a Developer, and I am 30 years old.'

• bind 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

const person = {

  name: 'Karen',
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  }
};
const greetKaren = person.greet.bind(person);
greetKaren(); // 'Hello, my name is Karen'

通过使用 apply、call 和 bind，我们可以控制 this 的绑定过程，使得函数可以在不同的对象上下文中重复使用。这在回调函数和事件处理函数中特别有用，那时你可能希望 this 明确指向某个特定的对象。

五、箭头函数中的 this

箭头函数与常规函数的一个关键区别是，箭头函数不会创建自己的 this 上下文，而是捕获其所在上下文的 this 值作为自己的 this 值。这意味着在箭头函数内部使用 this 时，它与封闭词法上下文的 this 值相同。

这种特性使得箭头函数成为处理事件监听器和回调函数的理想选择，因为你无需担心 this 绑定问题。

const person = {

  name: 'Emma',
  actions: ['smile', 'wave', 'jump'],
  showActions() {
    this.actions.forEach(action => {
      console.log(this.name + ' is ' + action);
    });
  }
};
person.showActions();
// 'Emma is smile'
// 'Emma is wave'
// 'Emma is jump'

在 showActions 方法中，forEach 方法的回调函数是一个箭头函数，它不会创建自己的 this 上下文，因此 this.name 正确指向 person 对象中的 name 属性。

六、总结与实践建议

理解和正确使用 this 对于掌握 JavaScript 非常关键。它本质上是一个指向函数执行上下文的指针，可以是全局环境、当前对象、构造函数生成的实例或 apply/call/bind 明确指定的上下文。要准确预测 this 的值，需要关注函数是如何被调用的。在实际应用中，开发者应当充分了解每种调用方式和场景，以确保代码的正确性和可预测性。ARROW FUNCTIONS 和 CONSTRUCTOR FUNCTION 示例如上，展示了不同语境下处理 this 的方式。

最后，当 this 的行为不符合预期时，首先应检查函数的调用方式。如果函数需要在不同的上下文中工作，可以使用 apply、call或 bind 来显式绑定 this。箭头函数对于那些需要继承上下文中的 this 值的情况非常有帮助。在编写和维护代码时，了解和正确使用 this 绑定会让工作更加顺利。

相关问答FAQs：

如何在 JavaScript 中正确使用 this 关键字？

在 JavaScript 中，this 关键字用于指代当前执行的函数所属的对象。调用 this 可以通过以下几种方式进行：

1. 默认绑定：当函数作为全局函数使用时，this 默认绑定到全局对象（在浏览器中为 window 对象）上。

2. 隐式绑定：当函数作为对象的方法使用时，this 隐式绑定到该对象上。

3. 显式绑定：通过使用 call、apply 或 bind 方法，可以显式地绑定 this 到指定的对象上。

4. new 绑定：当函数作为构造函数使用时，this 绑定到新创建的对象上。

5. 箭头函数中的 this：箭头函数没有自己的 this 值，它的 this 是从外部作用域继承的。

请注意，this 绑定的优先级是： new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定。在某些情况下，可能会产生 this 绑定错误的问题，需要注意避免。

如何在 JavaScript 中避免 this 绑定错误？

避免 this 绑定错误在 JavaScript 中是非常重要的。以下是一些常见的避免错误的方法：

1. 使用箭头函数：箭头函数没有自己的 this，它会继承外部函数的 this 值，所以可以避免 this 绑定错误。

2. 将函数存储在变量中：将函数存储在变量中，并通过变量调用函数，可以确保 this 绑定正确。

3. 使用 bind 方法显式绑定 this：使用 bind 方法可以显式地绑定函数的 this，将函数绑定到指定的对象上。

4. 使用箭头函数作为对象方法：在对象方法中使用箭头函数，可以确保 this 绑定到外部对象。

5. 使用 apply、call 或 bind 方法：这些方法可以显式地指定函数执行时的 this 值，避免 this 绑定错误。

为什么在 JavaScript 中 this 绑定很重要？

在 JavaScript 中，this 绑定的准确性对于正确执行函数非常重要。通过正确绑定 this，我们可以获得期望的上下文环境，访问正确的属性和方法，避免出现错误。

错误的 this 绑定可能导致意外的结果，甚至可能引发错误。了解和正确使用 this 可以帮助我们编写更健壮可靠的代码，并提高代码的可读性和可维护性。因此，了解 this 绑定的规则和技巧是每个 JavaScript 开发人员都应该掌握的基本知识。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。