从 meme 到 window.name

发表于： 更新于：
字数：713 阅读：≈ 2分钟 浏览：

从 meme 到 window.name(浏览器的 window.name)

在 现代前端魔法部​​​​ 刷消息的时候发现苏卡卡发了一则 meme ​2021_05_17_ufeh4qfkdsm61.jpg​

仔细一看发现的确不太对劲…

meme 里的代码如下：

  • var x = 42;
x + 1; // 43，number类型
var name = 42;
name + 1; // "421"，string类型

跑了一下，居然还真是。

在我的预期中，name 应该是 number​​ 类型才对，为什么会变成 string​​ 了？这不对劲… 看到有群友说是 window.name​​ 的锅，新开了一个窗口测试，window​​ 下面默认的确有 name​​ 这个键。

翻看了文档，总结一下 window.name​​ 的特性：

  • 主要用于为超链接和表单设置目标（targets）
  • ​window.name​​ 是浏览器中的一个属性（name​​ 并不是 JavaScript 中的保留字[^1]）
  • ​window.name​​ 可进行读写，并且会将存储的值转换为它们的字符串表示。
  • 窗口进行跳转时，window.name 的值可保留，所以有一定的跨域通讯的能力

PS. window.name​​ 现在用的很少了（但还是要知道的，不然有可能踩坑

反过来再看 meme 中的代码，就知道为什么这样了：

  • 使用 var​​ 定义的全局变量会挂载到 window​​ 上
  • ​window.name​​ 上的值会转换为 string​​ 类型

所以上面的代码在 var name = 42​​ 这里，name 的值已经是 string​​ 类型了

  • 再执行 name + 1​​，就是我们看到的结果：421​​

如何避免：

  • 不要使用 var​​ 关键字，改用 let​​ 或 const​​ 声明变量。
  • 不会挂载到 window​​ 对象上，自然也不会踩坑了。

⭐ 达成：从 meme 中学习到了新知识。

参考：

[^1]: 如果在 Node 环境下测试，就会发现没有这个问题。