当JavaScript开发者头疼关键字this时，这样轻松入门！

2022-11-17 09:54:11

this JavaScript 中的常见痛点，破解之道

对于我们编程人员来说，this 是一个让我们头疼的，它有时就像一个顽皮的孩子，给我们带来各种困扰。但别担心，这篇文章将深入解析 this 的含义、用法和绑定规则，帮助你驯服这个小淘气。

this 的含义

在 JavaScript 中，this 关键字指向当前的对象。比如，在一个函数中，this 指向函数所属的对象。在一个方法中，this 指向该方法所属的对象。

this 的用法

this 可以用来访问对象的属性和方法。例如，下面的代码使用 this 访问对象 person 的 name 属性和 sayHello 方法：

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // 输出：Hello, my name is John

this 的绑定

this 的绑定方式有多种，包括静态绑定、动态绑定和箭头函数绑定。静态绑定是指在编译时确定 this 的值，动态绑定是指在运行时确定 this 的值，箭头函数绑定是指箭头函数中的 this 总是指向定义它的对象。

this 的应用

this 可以用来实现对象的方法、构造函数、闭包、事件处理程序等。例如，下面的代码使用 this 来实现一个构造函数 Person：

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

  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
}

const person1 = new Person('John');
person1.sayHello(); // 输出：Hello, my name is John

理解 this 绑定的技巧

理解 this 绑定的技巧有很多，包括使用严格模式、使用 bind() 方法、使用箭头函数等。例如，下面的代码使用严格模式来确保 this 总是指向期望的对象：

"use strict";

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

  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
}

const person1 = new Person('John');
person1.sayHello(); // 输出：Hello, my name is John

常见问题解答

this 的值可以被改变吗？
是的，this 的值可以通过 call()、apply() 和 bind() 方法来改变。
箭头函数中的 this 为什么总是指向定义它的对象？
因为箭头函数没有自己的 this 绑定，它会继承外层函数的 this 绑定。
严格模式下 this 的作用是什么？
严格模式下，this 不能被隐式绑定到 window 对象，必须显式绑定。
bind() 方法的作用是什么？
bind() 方法可以将一个函数绑定到特定对象，返回一个新函数，该函数的 this 始终指向指定的对象。
箭头函数和传统函数在绑定 this 方面的区别是什么？
传统函数会根据调用方式动态绑定 this，而箭头函数的 this 总是指向定义它的对象。