14. 对象 this 与 ES6 增强

this 就是函数执行时的调用者，谁调用 this 就是谁。ES6 给对象加了简写和方法简写。

核心规则：
① 普通函数——this 是 window
② 对象方法——this 是这个对象
③ 箭头函数——this 继承外层
④ ES6 简写——属性名和变量名一样可简写、方法可省略 function

坑：this 不是定义时决定的，是调用时决定的、箭头函数没有自己的 this。

14.1 互动演示（this 指向 / ES6 简写 / 解构 / 可选链）

14.2 知识点逐条讲解（配合代码）

① this：指「点这个方法的那个对象」

let cat = {
  name: "小桔子",
  // this 就是点这个方法的那个对象，这里是cat
  introduce: function () {
    console.log("我叫" + this.name);
  }
};

// cat.introduce() → 我叫小桔子
cat.introduce();

如果你在对象方法里用箭头函数，this 就会指错人。因为箭头函数不自己认 this，它从外面借一个（往往是 window/undefined），this.name 就变成 undefined。所以对象方法请用普通 function 或 ES6 简写。

② ES6 对象简写

let name = "橘子",
  // 以前：键和变量名一样，得写两遍
  color = "灰";

// 现在：同名就写一个
let cat1 = { name: name, color: color };

// 方法也能省掉 function 关键字
let cat = { name, color };

let dog = { bark() { console.log("汪汪"); } };

③ 对象解构 + 扩展复制合并

let cat = { name: "橘子", age: 2 };

// 一把把两个属性抓出来
let { name, age } = cat;

// 没有weight就用默认5kg
let { weight = "5kg" } = cat;

// 复制一份新对象
let copy = { ...cat };

// 合并，后面的盖前面
let merge = { ...{ name: "橘" }, ...{ age: 2 } };

的

如果你以为 ... 能把对象彻底复制，就会踩坑。因为它只复制最外面一层，里面如果还套着对象/数组，那一层还是共用的，改内部会互相影响。

④ for...in vs for...of

⑤ 可选链 ?. 与 Object.is / assign

let user = { info: { name: "小明" } };

// 小明，存在就取
user.info?.name;

// address没有，直接undefined，不报错
user.address?.city;

// true（用===反而会false）
Object.is(NaN, NaN);

// 合并，后面的盖前面
Object.assign({}, base, extra);

的

⑥ X.3 实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：Vue/React 组件里读数据、合并默认配置、安全读取可能不存在的嵌套字段。

② 常见坑：对象方法用箭头函数 this 变 undefined；读 user.address.city 直接报错。

③ 怎么解决：对象方法用普通函数；嵌套读取用 user?.address?.city；合配置用 Object.assign。

本页重点

let cat = {
  name: "橘",
  hi() { return this.name; }
};

let bad = { hi: () => this };
// this 不是它

user?.info?.name;  // 空就 undefined

let both = { ...a, ...b };  // 合并