红宝书第七讲：this绑定与强制类型转换详解（小白指南）

红宝书第七讲：this绑定与强制类型转换详解（小白指南）

资料取自《JavaScript高级程序设计（第5版）》。
查看所有教程：红宝书学习大纲

---

一、this绑定：对话中的主角是谁？

简单比喻
假设你在餐厅点菜，this相当于当前服务的服务员：

• 不同场景服务员会变：包厢用餐 → 专属服务员（对象方法） / 大堂吧台 → 公共服务员（全局对象）

四大绑定规则

1. 默认绑定 → 指向全局（餐厅大厅服务员）

   function 找服务员() {
     console.log(this === window);    // 非严格模式 ✅ 
   }
   找服务员(); // 默认指向window（浏览器中）

2. 隐式绑定 → 指向调用者（包厢专属服务员）

   const 包厢 = {
     服务员名: "小王",
     点菜() {
       console.log(this.服务员名);  // ✅ 小王
     }
   };
   包厢.点菜(); 

3. 显式绑定 → call/apply指定（指定服务员）

   function 点菜() { console.log(this.推荐菜); }
   const 今日推荐 = { 推荐菜: "红烧肉" };
   
   点菜.call(今日推荐);  // ✅ 红烧肉[^4]

4. 箭头函数 → 绑定定义时的this（固定服务员）

   const 包厢2 = {
     服务员名: "小李",
     点菜: () => console.log(this.服务员名)  
   };
   包厢2.点菜();  // ❌ 输出undefined（箭头函数绑定全局this）[^4]

---

二、强制类型转换：自动变身的魔法

核心概念：JavaScript会自动转换变量类型以适应操作。

1. 隐式转换（魔法自动触发）：

   console.log(5 + "5");    // "55"（数字→字符串）[^2]
   console.log("5" == 5);   // true（字符串→数字比较）

2. 显式转换（手动触发招式）：

   const 输入 = "123";
   console.log(Number(输入));         // 123（数字）
   console.log(Boolean("非空字符串")); // true[^3]

高危陷阱示例 → 空字符串的意外转换：

if ("") {  
  // ❌ 空字符串转为false，永远不会执行
}
if (0) { // 同上 } 
// 正确做法：显式判断类型[^2]
if (typeof value !== "undefined") 

---

三、双重保险：严格模式下的限制

严格模式下（"use strict"），部分危险行为被禁用：

• this不再指向全局 → 未绑定时为undefined¹

  function 测试() {
    "use strict";
    console.log(this);  // undefined（非严格模式指向window）
  }
  测试();

---

四、综合避坑指南

1. this绑定铁律

• 用箭头函数固定作用域（需要时）
• 明确用call/apply/bind指定对象

2. 类型转换安全规范

• 用===和!==避免隐式转换²

  "5" === 5   // false（不进行类型转换）

• 敏感操作前显式转换类型

  const 用户输入 = "123";
  const 数字 = Number(用户输入); // ✅ 手动转换

---

实战练习

// 任务1：让点击按钮显示它的文字（正确绑定this）
button.addEventListener('click', function() {
  console.log(this.innerText); // ✅ "点击我"
});

// 任务2：避免空值漏网
function 格式化价格(price) {
  price = Number(price || 0);  // 转换为数字，默认值0
  return `￥${price.toFixed(2)}`;
}

记住：明确指定this和类型，代码更可靠！

---

目录：总目录
上篇文章：红宝书第六讲：作用域链与闭包：厨房里的调味料架原理

下篇文章：红宝书第八讲：箭头函数与高阶函数：厨房工具与智能菜谱的对比

---

1. 严格模式下this不再默认绑定全局对象，《JavaScript高级程序设计（第5版）》 附录C ↩
2. 推荐使用严格相等符避免类型转换错误，《JavaScript高级程序设计（第5版）》 第3章 ↩