闭包与 `this` 绑定：箭头函数的特殊性 - 智猿学院-IT界的百科全书

好的，各位观众，各位听众，欢迎来到今天的“闭包与 this 绑定：箭头函数的特殊性”专场脱口秀！我是你们的老朋友，程序界的段子手，bug 终结者，代码艺术家——闭包侠！

今天咱们不聊那些枯燥的理论，咱们来点儿接地气的，用最幽默风趣的方式，把“闭包”和“this 绑定”这两位老兄扒个精光，特别是要重点关照一下箭头函数这位特立独行的“小老弟”。

开场：闭包，你这磨人的小妖精！

各位，谁没被闭包折磨过？举个手！🙋‍♀️🙋‍♂️（台下一片举手）

看看，我就知道！闭包就像你暗恋的女神，近在眼前，却总是摸不透她的心思。你以为你了解她了，结果一运行，啪！给你一个 undefined 或者其他你想都想不到的错误。

说白了，闭包就是函数中的函数，内部函数可以访问外部函数的变量，即使外部函数已经执行完毕，这些变量依然“活”在内部函数里。

想象一下，你是一个侦探，进入了一个废弃的犯罪现场（外部函数），虽然现场已经空无一人，但你依然可以找到线索（外部函数变量），这些线索帮你破案（内部函数执行）。这就是闭包的魅力，也是它的坑爹之处。

闭包的“真面目”：代码示例与深度剖析

来，咱们看一个经典的例子：

function outerFunction(outerVar) {
  let innerVar = 'Hello from inner!';

  function innerFunction() {
    console.log(outerVar);
    console.log(innerVar);
  }

  return innerFunction;
}

let myClosure = outerFunction('Hello from outer!');
myClosure(); // 输出: Hello from outer!  Hello from inner!

这段代码里，innerFunction 就是一个闭包。它记住了 outerFunction 的 outerVar 和 innerVar。即使 outerFunction 执行完毕，myClosure （也就是 innerFunction）仍然可以访问这些变量。

为什么会这样？

这要归功于 JavaScript 的作用域链。当 innerFunction 被创建时，它会创建一个指向 outerFunction 作用域的链接。这个链接就像一条脐带，把 innerFunction 和 outerFunction 的变量紧密地联系在一起。

闭包的应用场景：妙用无穷，但也暗藏杀机

闭包可不是只会给你添堵，它有很多实用的应用场景：

封装私有变量： 你可以用闭包来创建只能在函数内部访问的变量，防止外部代码随意修改。这就像给你的代码穿上了一件防弹衣，保护它免受外界的干扰。

function createCounter() {
  let count = 0;

  return {
    increment: function() {
      count++;
      console.log(count);
    },
    decrement: function() {
      count--;
      console.log(count);
    },
    getCount: function() {
      return count;
    }
  };
}

let counter = createCounter();
counter.increment(); // 输出: 1
counter.increment(); // 输出: 2
counter.decrement(); // 输出: 1
console.log(counter.count); // 输出: undefined (无法直接访问 count)
console.log(counter.getCount()); // 输出: 1

创建模块： 闭包可以用来组织代码，将相关的函数和变量封装在一个模块里。这就像把你的代码分成一个个独立的房间，每个房间都有自己的功能，互不干扰。
实现回调函数： 闭包可以用来保存回调函数需要的上下文信息。这就像给你的回调函数配了一个私人助理，随时帮它处理各种琐事。

闭包的坑：一不小心就掉进去！

闭包虽好，可不要贪杯哦！一不小心，你就会掉进它的坑里：

内存泄漏： 如果闭包引用了大量的外部变量，而且这些闭包没有被及时释放，就会导致内存泄漏。这就像你的房间里堆满了垃圾，越积越多，最终导致房间无法使用。
变量共享： 在循环中使用闭包时，可能会出现变量共享的问题。这就像你给一群人发糖，结果他们都抢同一颗糖，最后谁也没吃到。

this 绑定：你是谁？从哪里来？要到哪里去？

接下来，咱们聊聊 this。this 是 JavaScript 中一个非常重要的关键字，它指向函数的执行上下文。简单来说，this 就是“谁调用了我，我就指向谁”。

但是，this 的指向非常灵活，它会随着函数的调用方式而改变。这就像一个演员，扮演不同的角色，一会儿是国王，一会儿是乞丐。

this 的四种绑定方式：

绑定方式	描述	示例
默认绑定	在非严格模式下，`this` 指向全局对象（浏览器中是 `window`，Node.js 中是 `global`）。在严格模式下，`this` 是 `undefined`。	`function foo() { console.log(this); } foo(); // 非严格模式下，输出 window；严格模式下，输出 undefined`
隐式绑定	当函数作为对象的方法调用时，`this` 指向该对象。	`let obj = { name: 'Alice', sayHello: function() { console.log('Hello, ' + this.name); } }; obj.sayHello(); // 输出：Hello, Alice`
显式绑定	使用 `call`、`apply` 或 `bind` 方法显式地指定 `this` 的指向。	`function greet(greeting) { console.log(greeting + ', ' + this.name); } let person = { name: 'Bob' }; greet.call(person, 'Hi'); // 输出：Hi, Bob`
`new` 绑定	当使用 `new` 关键字调用函数时，会创建一个新的对象，并将 `this` 指向这个新对象。	`function Person(name) { this.name = name; } let person = new Person('Charlie'); console.log(person.name); // 输出：Charlie`

箭头函数：this 的一股清流！

终于轮到咱们的重头戏——箭头函数了！箭头函数是 ES6 引入的一种新的函数语法，它最大的特点就是：没有自己的 this！

箭头函数的 this 指向在定义时就已经确定了，它会继承外层作用域的 this。这就像一个乖宝宝，永远听妈妈的话，不会乱跑。

箭头函数的 this 绑定规则：

箭头函数没有自己的 this，它的 this 值继承自外围作用域。
箭头函数不能使用 call、apply 或 bind 方法来改变 this 的指向。
箭头函数不能作为构造函数使用（不能使用 new 关键字）。

代码示例：箭头函数与 this 的爱恨情仇

function Person(name) {
  this.name = name;
  this.sayHello = function() {
    setTimeout(function() {
      console.log('Hello, ' + this.name); // this 指向 window (非严格模式)
    }, 1000);

    setTimeout(() => {
      console.log('Hello, ' + this.name); // this 指向 Person 实例
    }, 1000);
  };
}

let person = new Person('David');
person.sayHello(); // 1 秒后输出：Hello, undefined (或 Hello, window.name)  和 Hello, David

在这个例子中，第一个 setTimeout 使用了普通函数，它的 this 指向 window（非严格模式下），所以输出的是 Hello, undefined。

而第二个 setTimeout 使用了箭头函数，它的 this 指向 Person 实例，所以输出的是 Hello, David。

箭头函数的优势：

简化代码： 箭头函数的语法更加简洁，可以减少代码的冗余。
避免 this 指向错误： 箭头函数可以避免 this 指向错误，让代码更加可预测。
提高代码可读性： 箭头函数可以提高代码的可读性，让代码更加易于理解。

箭头函数的局限性：

不能作为构造函数： 箭头函数不能使用 new 关键字来创建对象。
没有 arguments 对象： 箭头函数没有 arguments 对象，可以使用 rest 参数来代替。
不适合定义对象方法： 如果需要在对象方法中使用 this 指向对象本身，最好不要使用箭头函数。

总结：闭包 + this + 箭头函数 = 代码的艺术

各位，今天咱们一起深入探讨了闭包和 this 绑定，特别是箭头函数这位“小老弟”的特殊性。希望通过今天的分享，大家能够对闭包和 this 有更深刻的理解，能够更加灵活地运用它们来编写高质量的 JavaScript 代码。

记住，代码不仅仅是代码，它也是一门艺术。只有掌握了这些基础知识，才能创作出更加优美、更加优雅的代码作品。

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

发表回复 取消回复

发表回复取消回复