你知道 delete 删除属性时的一些细节吗?

探究 delete 的一些细节,起源于刚刚做过的同程旅行的笔试,原题如下:

js 复制代码
a = 1;
const b = 2;
console.log(delete a); 
console.log(delete b); 
// 输出结果是?

我可从来没用过 delete 的返回值,但凡犹豫一秒都是对自己的不自信,所以立马选择 undefined(其实还是犹豫了一点点的),笔试结束后回想起来,怎么会出这么奇怪的题,于是自己实际试了一下,真是不试不知道,一试吓一跳啊!!!

delete 关键字是其实有返回值的!并且 delete 还是有一些细节/规则的

  • 如果删除的属性不存在于对象本身,delete 不起任何作用,但仍会返回 true !

  • delete 只会删除对象自身属性,不会删除对象原型链上的属性!

    js 复制代码
    function A() {}
    A.prototype.b = 1;
    const a = new A();
    console.log(delete a.b, a.b); // true 1 (删除对象自身不存在属性时返回true,并且无法删除原型链上的属性)
  • 不可配置的属性不能被删除,返回 false !

  • 无法直接删除有声明的变量(包括函数参数),返回 false !

    delete variable 在严格模式下抛出 SyntaxError 错误

    • 任何使用 var 声明的属性不能从全局作用域或函数的作用域中删除,因为即使它们可能附加到全局对象上,它们也是不可配置的。
    • 任何使用 let 或 const 声明的属性不能够从它被声明的作用域中删除,因为它们没有附加到任何对象上。

现在看来同程旅行还是保守了,要是现在的我,我估计会出下面的题:

js 复制代码
a = 1; // 绑定到了 globalThis 对象中
var b = 2; // 绑定到了 globalThis 对象中
const obj = {};
const d = 3;
let e = 4;
console.log(Object.getOwnPropertyDescriptor(globalThis, 'a').configurable); // true
console.log(Object.getOwnPropertyDescriptor(globalThis, 'b').configurable); // false(通过var定义的全局变量虽然会被绑定到globalThis中,但它是不可配置的!)

console.log(delete a); // true (a不是一个有声明的变量,这时会去globalThis上找,把globalThis.a给删了)
console.log(delete b, b); // false 2 (下面单独说)
console.log(delete obj, obj); // false {} (对象 obj 没有被删,因为 obj 是 const 声明)
console.log(delete obj.c, obj.c); // true undefined (删除一个原本就不存在的属性返回 true )
console.log(delete d, d); // false 3 (变量 d 没有被删,因为它是 const 声明)
console.log(delete e, e); // false 4 (变量 e 没有被删,因为它是 let 声明)
console.log(delete f); // true(删除一个原本就不存在的属性返回 true )

globalThis 就是全局对象,浏览器下指向 window、node下指向 global。

console.log(delete b, b);没有把 b 删除,我们有两种解释:

  1. 跟 const、let 声明一样,var 声明的变量无法直接被删除。
  2. b 没被删除是因为,当 delete 去 globalThis 上找它时,发现它是不可配置的,所以无法删除。

为了简单理解和减少歧义,我更认同 1 的解释(你可以想一下 2 的解释会引发哪些歧义),如果您有更好的理解,欢迎评论区留言!

var 声明的全局变量是不可配置的这个细节在"谈谈 var、const、let 的区别"的这个面试题中可以主动展开说一下🧐

相关推荐
宇智波亚索21 分钟前
TypeScript 实际应用
前端·javascript·typescript
明飞198724 分钟前
C表达式_表达式类型
前端
雪芽蓝域zzs27 分钟前
Vue3+Vite 本地数据模拟 JSON 读取和Mock 方案完整讲解总结
前端·vue.js
jjw_zyfx39 分钟前
vue3 vite 前端录制浏览器界面视频并保存下载
前端·音视频
南雨北斗44 分钟前
vue3项目表单验证 input 添加高亮样式
前端
:-)1 小时前
idea中的vue文件没有高亮显示
前端·javascript·vue.js·ecmascript·intellij-idea
IPdodo_1 小时前
2026年AI 数据采集代理 IP 选型:成功率、并发、轮换与成本评估
前端·网络·人工智能·chrome·python·http·网络调试
计算机魔术师1 小时前
AI问诊5秒出结果,医生反而更忙了
前端
郭邯1 小时前
从需求到上线:我用 AI 辅助开发了一个在线倒计时器
前端
全栈项目管理程序猿1 小时前
ArcGIS JS 基础教程(14):Map、View 与 Layer 关系
javascript