精通JavaScript的this关键字

如何精通 JavaScript 的 this 关键字？

了解上下文

this 关键字的值取决于函数被调用时的上下文。在 JavaScript 中，上下文默认是全局对象，但在函数中，上下文可能会被更改。为了更好地了解 this 关键字，我们需要了解上下文是如何被定义和更改的。

示例一：默认上下文是全局对象，设置 this 的方式是使用函数调用绑定。

function logThis() {
  console.log(this); //默认情况下，this 指向全局对象
}

logThis(); // 输出：Window { ... }

示例二：通过对象调用函数，将函数绑定到该对象上，从而修改 this 的上下文。

const obj = {
  name: 'Hannah',
  logName() {
    console.log(this.name); // 此时，this 的上下文设置成了 obj 对象，输出：Hannah
  }
};

obj.logName();

理解 this 的四种绑定规则

当 this 作为函数的参数进行调用时，它的绑定方式可以分为四种情况。

1. 默认绑定 - 当前上下文是全局对象或 undefined。

function logThis() {
  console.log(this); //默认情况下，this 指向全局对象
}

logThis(); // 输出：Window { ... }

1. 隐式绑定 - 当前上下文是对象字面量或属性访问。

const obj = {
  name: 'Hannah',
  logName() {
    console.log(this.name); // this 被隐式绑定为 obj, 输出: Hannah
  }
};

obj.logName();

1. 显式绑定 - apply 和 call 方法用来手动绑定 this 到函数中。

function logThis() {
  console.log(this);
}

const obj = { name: 'Hannah'};
logThis.call(obj); // 输出：{ name: 'Hannah' }

1. new 绑定 - this 绑定到由构造函数新创建的对象。

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

const hannah = new Person('Hannah');
console.log(hannah.name); // 输出：Hannah

当 this 的值为 undefined

当 this 的值为 undefined 或 null 时，它会被默认绑定为全局对象。但在严格模式下， this 的值将保持 undefined。

function logThis() {
  console.log(this);
}

logThis.call(null); // 输出：Window { ... } 或者 undefined

箭头函数绑定 this

箭头函数的 this 值由上层作用域来决定。箭头函数没有自己的 this 值，它们继承父级作用域中的 this 值。

const obj = {
  name: 'Hannah',
  logName() {
    const f = () => {
      console.log(this.name); // this 继承自 obj, 输出: Hannah
    };

    f();
  }
};

obj.logName();

在学习 JavaScript 的 this 关键字时，这些知识点是必备的。通过理解上下文和绑定规则，我们可以更好地使用它，并避免出现无意中绑定 this 的错误。