默认绑定：函数独立调用时 `this` 的指向 - 智猿学院-IT界的百科全书

好的，各位观众老爷，欢迎来到“this指针历险记”特别篇！今天我们要聊的，是this指针家族里最“独立自主”的一位成员——默认绑定！准备好你的瓜子小板凳，让我们一起揭开它的神秘面纱吧！😎

开场白：this，你这磨人的小妖精！

话说江湖中，this指针的名号可谓是无人不知，无人不晓。它时而像一位忠诚的管家，稳稳地指向你的对象；时而又像个调皮的熊孩子，让你摸不着头脑。很多小伙伴在学习JavaScript的时候，都会被this指针搞得晕头转向，恨不得把它拉出来暴打一顿！

别急，今天我们就来好好剖析一下this指针的各种“骚操作”，特别是它在“默认绑定”模式下的表现。保证让你听得明白，学得透彻，从此不再惧怕this！💪

第一幕：什么是默认绑定？

要理解默认绑定，首先要搞清楚一个核心概念：独立函数调用。

你可以把函数想象成一位演员，而this指针则是它的演出舞台。当函数被“独立调用”时，就相当于这位演员独自站在舞台中央，没有明确的“剧本”（也就是没有明确的对象告诉它应该指向谁）。

在这种情况下，JavaScript引擎会施展它的“默认绑定”魔法，让this指向一个默认的对象。这个默认的对象，在浏览器环境中通常是window对象（在严格模式下是undefined），而在Node.js环境中通常是global对象。

可以用一个表格来总结一下：

调用方式	`this` 指向	备注
独立函数调用	浏览器环境：`window` (非严格模式) 或 `undefined` (严格模式)	函数直接被调用，没有明确的上下文对象。
独立函数调用	Node.js环境：`global` (非严格模式) 或 `undefined` (严格模式)	函数直接被调用，没有明确的上下文对象。

举个栗子：

function sayHello() {
  console.log("Hello, " + this.name);
}

name = "Global Name"; // 在全局作用域中定义一个name变量

sayHello(); // 输出 "Hello, Global Name" (非严格模式下)

// 在严格模式下：
"use strict";
function sayHelloStrict() {
  console.log("Hello, " + this.name); // TypeError: Cannot read property 'name' of undefined
}

sayHelloStrict(); // 报错，因为this是undefined

在这个例子中，sayHello函数被独立调用，没有明确的上下文对象。因此，在非严格模式下，this指向了window对象，它可以访问到全局作用域中的name变量，所以输出了"Hello, Global Name"。而在严格模式下，this指向了undefined，因此访问this.name会报错。

第二幕：严格模式的“铁面无私”

刚才提到了“严格模式”，这是一个非常重要的概念。严格模式是JavaScript的一种更严格的执行环境，它可以帮助你避免一些常见的错误，并提高代码的安全性。

在严格模式下，默认绑定会变得更加“铁面无私”。它不再允许this指向window对象，而是直接将this设置为undefined。这可以防止你意外地修改全局对象，造成一些难以调试的bug。

再举个栗子：

"use strict"; // 开启严格模式

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

showThis(); // 输出 undefined

在这个例子中，由于开启了严格模式，showThis函数被独立调用时，this的值不再是window对象，而是undefined。

第三幕：默认绑定与嵌套函数

默认绑定还有一个非常容易让人迷惑的地方，那就是嵌套函数。

当你在一个函数内部定义另一个函数时，内部函数如果被独立调用，它的this指向仍然是默认绑定，而不是外部函数的this。

举个“惨痛”的栗子：

const myObject = {
  name: "My Object",
  showName: function() {
    console.log("Outer this.name:", this.name); // 指向 myObject
    function innerFunction() {
      console.log("Inner this.name:", this.name); // 独立调用，默认绑定，指向 window (非严格模式) 或 undefined (严格模式)
    }
    innerFunction();
  }
};

myObject.showName(); // 输出 "Outer this.name: My Object" 和 "Inner this.name: Global Name" (非严格模式)

在这个例子中，myObject.showName() 方法被调用时，外部函数的 this 指向 myObject 对象，所以可以正确输出 "Outer this.name: My Object"。但是，内部函数 innerFunction() 被独立调用，它的 this 指向的是 window 对象（非严格模式下），所以输出了 "Inner this.name: Global Name"。

这种行为很容易让人感到困惑，因为你可能会期望内部函数的 this 也指向外部函数的 this。但是，JavaScript 引擎并不会自动地将外部函数的 this 传递给内部函数。

如何解决嵌套函数的 this 问题？

别担心，解决这个问题有很多种方法：

使用 that 或 self 变量：

这是最经典的方法。在外部函数中，将 this 的值赋给一个变量（通常是 that 或 self），然后在内部函数中使用这个变量。

const myObject = {
  name: "My Object",
  showName: function() {
    const that = this; // 将 this 的值赋给 that 变量
    console.log("Outer this.name:", this.name);
    function innerFunction() {
      console.log("Inner that.name:", that.name); // 使用 that 变量
    }
    innerFunction();
  }
};

myObject.showName(); // 输出 "Outer this.name: My Object" 和 "Inner that.name: My Object"

使用 bind() 方法：

bind() 方法可以创建一个新的函数，并将指定的 this 值绑定到这个新函数上。

const myObject = {
  name: "My Object",
  showName: function() {
    console.log("Outer this.name:", this.name);
    const innerFunction = function() {
      console.log("Inner this.name:", this.name);
    }.bind(this); // 使用 bind() 方法将 this 绑定到 innerFunction 上
    innerFunction();
  }
};

myObject.showName(); // 输出 "Outer this.name: My Object" 和 "Inner this.name: My Object"

使用箭头函数：

箭头函数没有自己的 this，它会继承外部函数的 this。这使得箭头函数非常适合用于解决嵌套函数的 this 问题。

const myObject = {
  name: "My Object",
  showName: function() {
    console.log("Outer this.name:", this.name);
    const innerFunction = () => {
      console.log("Inner this.name:", this.name); // 箭头函数继承外部函数的 this
    };
    innerFunction();
  }
};

myObject.showName(); // 输出 "Outer this.name: My Object" 和 "Inner this.name: My Object"

第四幕：默认绑定与回调函数

默认绑定还会在回调函数中“兴风作浪”。

当我们将一个函数作为回调函数传递给另一个函数时，如果这个回调函数被独立调用，它的 this 指向仍然是默认绑定。

又一个“悲惨”的栗子：

const myButton = {
  text: "Click Me",
  onClick: function() {
    console.log("Button clicked! Text:", this.text); // 指向 myButton
  }
};

// 假设有一个模拟的事件监听器
function addEventListener(eventName, callback) {
  console.log("Event listener added for:", eventName);
  callback(); // 独立调用 callback 函数
}

addEventListener("click", myButton.onClick); // 输出 "Button clicked! Text: undefined" (非严格模式)

在这个例子中，我们期望 myButton.onClick() 函数在被调用时，this 指向 myButton 对象，从而可以访问到 this.text。但是，由于 addEventListener() 函数只是简单地调用了 callback() 函数，而没有指定 this 的值，所以 callback() 函数被独立调用，它的 this 指向了 window 对象（非严格模式下），导致 this.text 的值为 undefined。

如何解决回调函数的 this 问题？

同样，解决这个问题也有很多种方法：

使用 bind() 方法：

在将回调函数传递给另一个函数之前，使用 bind() 方法将 this 值绑定到回调函数上。

const myButton = {
  text: "Click Me",
  onClick: function() {
    console.log("Button clicked! Text:", this.text);
  }
};

function addEventListener(eventName, callback) {
  console.log("Event listener added for:", eventName);
  callback();
}

addEventListener("click", myButton.onClick.bind(myButton)); // 使用 bind() 方法将 this 绑定到 myButton 上

使用箭头函数：

如果你的回调函数是一个简单的函数表达式，可以使用箭头函数来避免 this 指向问题。

const myButton = {
  text: "Click Me",
  onClick: function() {
    console.log("Button clicked! Text:", this.text);
  }
};

function addEventListener(eventName, callback) {
  console.log("Event listener added for:", eventName);
  callback();
}

addEventListener("click", () => myButton.onClick()); // 使用箭头函数，this 指向 myButton

有些库或框架提供了指定 this 的方法：

例如，jQuery 的 $.proxy() 方法，或者 React 的 bind 方法。

第五幕：总结与思考

今天我们深入探讨了this指针的默认绑定规则。它就像一个“任性”的孩子，在函数独立调用时，会默认指向window（非严格模式）或undefined（严格模式）。

要掌握this指针，需要记住以下几点：

理解独立函数调用的概念。
区分严格模式和非严格模式下的默认绑定行为。
掌握解决嵌套函数和回调函数中 this 指向问题的各种方法（that/self 变量、bind() 方法、箭头函数）。

this 指针是 JavaScript 中一个非常重要的概念，也是一个非常容易让人迷惑的概念。希望通过今天的讲解，你能够对 this 指针有更深入的理解，从而编写出更健壮、更可靠的 JavaScript 代码。

课后作业：

编写一个函数，在函数内部定义另一个函数，并尝试使用不同的方法来解决内部函数的 this 指向问题。
编写一个程序，模拟一个事件监听器，并尝试使用不同的方法来解决回调函数的 this 指向问题。

结尾彩蛋：

记住，this指针虽然有时会让你感到困惑，但它也是 JavaScript 中最强大的工具之一。只要你掌握了它的规律，就能轻松驾驭它，让它为你所用！

感谢大家的收看，我们下期再见！👋

发表回复 取消回复

发表回复取消回复