默认绑定：不可避免的全局变量

2023-11-24 14:30:31

this的默认绑定

在JavaScript中，当函数被调用时，会创建一个执行上下文（也被称为激活记录）。这个记录包含函数在哪里被调用（调用堆栈）、函数的调用方式、传入的参数等信息。this就是记录的其中一个属性，会在函数执行过程中用到。

默认情况下，this指向全局对象（在严格模式下为undefined）。这意味着，当你在全局作用域中调用一个函数时，this将指向window对象（在浏览器中）或global对象（在Node.js中）。

例如，以下代码会输出window对象：

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

sayHello(); // 输出: Window

同样，在严格模式下，以下代码会输出undefined：

"use strict";

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

sayHello(); // 输出: undefined

默认绑定的陷阱

默认绑定看似简单，但它可能会导致一些令人困惑的陷阱。

例如，考虑以下代码：

var person = {
  name: "John",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // 输出: Hello, my name is John

var greet = person.greet;

greet(); // 输出: Hello, my name is undefined

在第一个greet()调用中，this指向person对象，因为greet()是在person对象上调用的。然而，在第二个greet()调用中，this指向undefined，因为greet()是在全局作用域中调用的。

这是因为当我们把person.greet赋值给greet变量时，greet()函数失去了对person对象的引用。因此，当我们在全局作用域中调用greet()时，this指向undefined。

要避免这个问题，我们可以使用bind()方法来显式绑定this。例如，以下代码会输出"Hello, my name is John"：

var person = {
  name: "John",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

var greet = person.greet.bind(person);

greet(); // 输出: Hello, my name is John