← 返回目录

14. 对象 this 与 ES6 增强

对象里最绕的就是 this——它到底指谁，全看「是谁点的它」。再配上 ES6 的一堆简写，对象代码能写得又短又清爽。

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

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

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

let cat = {
    name: "小桔子",
    introduce: function () {
        // this 就是点这个方法的那个对象，这里是cat
        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 };
// 现在：同名就写一个
let cat = { name, color };
// 方法也能省掉 function 关键字
let dog = { bark() { console.log("汪汪"); } };

	

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

let cat = { name:"橘子", age:2 };
let { name, age } = cat;          // 一把把两个属性抓出来
let { weight = "5kg" } = cat;     // 没有weight就用默认5kg

let copy = { ...cat };            // 复制一份新对象
let merge = { ...{name:"橘"}, ...{age:2} }; // 合并，后面的盖前面
的
	

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

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

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

let user = { info: { name: "小明" } };
user.info?.name;          // 小明，存在就取
user.address?.city;       // address没有，直接undefined，不报错

Object.is(NaN, NaN);      // true（用===反而会false）
Object.assign({}, base, extra); // 合并，后面的盖前面
的
	

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

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

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

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