打咩🙅,Javascript Object 你为什么这么多坑

this 指向的迷之行为

javascript 复制代码
const user = {
  name: "John",
  sayHi() {
    console.log(this.name);
  }
};

const sayHi = user.sayHi;
sayHi(); // 输出:undefined(严格模式下报错)

原因 :方法中的 this 取决于调用方式。当方法被单独调用时,this 指向全局对象(非严格模式)或 undefined(严格模式)。

解决方案

  • 使用箭头函数(但箭头函数无自己的 this
  • 使用 bind 绑定上下文:const sayHi = user.sayHi.bind(user);
  • 调用时指定上下文:sayHi.call(user);

深拷贝与浅拷贝的误会

javascript 复制代码
const obj = { a: 1, nested: { b: 2 } };
const shallowCopy = { ...obj };
shallowCopy.nested.b = 999;
console.log(obj.nested.b); // 输出:999(原对象被修改!)

原因 :展开运算符 ...Object.assign() 只能实现浅拷贝,嵌套对象仍是引用。

解决方案

  • 使用 JSON.parse(JSON.stringify(obj))(但无法处理函数、循环引用)
  • 使用 Lodash 的 _.cloneDeep()
  • 手动递归实现深拷贝

属性遍历的隐藏属性

javascript 复制代码
const obj = { a: 1 };
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });

console.log(Object.keys(obj)); // 输出:["a"]
for (let key in obj) console.log(key); // 输出:"a"
console.log('b' in obj); // 输出:true

原因 :对象属性具有 enumerable 特性,默认值为 true。通过 defineProperty 定义的属性若设为不可枚举,则无法被 for...inObject.keys() 遍历,但仍可通过 in 运算符判断存在性。

解决方案

  • 使用 Object.getOwnPropertyNames() 获取所有自身属性(包括不可枚举)
  • 使用 Reflect.ownKeys() 获取所有键(包括 Symbol)

对象比较的错觉

javascript 复制代码
console.log({} === {}); // false
console.log(NaN === NaN); // false
console.log(Object.is({}, {})); // false
console.log(Object.is(NaN, NaN)); // true

原因 :对象通过引用比较,即使内容相同,两个不同对象也不相等。而 NaN 在常规比较中不等于自身,但 Object.is() 能正确处理。

解决方案

  • 深比较:递归比较每个属性值
  • 使用第三方库如 Lodash 的 _.isEqual()

ES6 的 Proxy 陷阱

javascript 复制代码
const target = {};
const proxy = new Proxy(target, {
  get(obj, prop) {
    return prop in obj ? obj[prop] : 0;
  }
});

proxy.a = 100;
console.log(proxy.a); // 100
console.log(proxy.b); // 0
console.log(target.b); // undefined(原对象未被修改)

原因:Proxy 可以拦截对象操作,但如果不显式操作目标对象,可能导致代理对象与原对象行为不一致。

解决方案

  • 始终通过代理对象操作
  • 在处理器中正确处理反射方法

JSON 序列化的黑洞

javascript 复制代码
const obj = { 
  date: new Date(),
  fn: () => console.log("Hi"),
  undefinedProp: undefined
};
const json = JSON.stringify(obj);
console.log(json); // 输出:{"date":"2023-10-01T12:00:00.000Z"}

原因JSON.stringify 会忽略 undefined 和函数,并将 Date 对象转为字符串。

解决方案

  • 自定义 toJSON 方法
  • 使用 JSON.stringifyreplacer 参数处理特殊类型
相关推荐
wuxuanok几秒前
Web前端开发-HTML、CSS
前端·css·html
Mike_jia几秒前
Dish:套接字监控领域的「听诊器」——轻量级网络健康守护神深度解析
前端
独立开阀者_FwtCoder9 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士10 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明10 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金9201415 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius16 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku17 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿17 分钟前
Js事件循环
javascript
datagear18 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化