为什么会有window.window这种设计

1,246 阅读2分钟

为什么会有window.window这种设计

先看一下,下面的的等式都等于true。

window === window.window
window.window === window.window.window
window.window.window === window.window.window.window

为啥要搞这个这个看起来貌似很奇葩的设计。

要解答这个问题,还得请出this,我们经常说浏览器中的全局对象是window, 这句话对了,也还没完全对。

全局对象的真实身份应该是全局作用域的this。 window只是为了便于访问this,弄出来的一个属性。

this === window // true

再看一段代码,假设只有this, 没有window属性的时候。

想输出全局对象的aName,怎么输出????

var aName = "global的name";
function a() {
  var aName = "local的name";  
  // 想输出全局对象的aName???
  console.log(????);
}
a();
alert("哈哈")

那就得做外的工作,

var xxxx = this;
var aName = "global的name";
function a() {
  var aName = "local的name";  
  // 想输出全局对象的aName???
  console.log(xxxx.name);
}

a();
alert("哈哈")

只不过实际的起名,不会像我那么随便,人家叫window而已。

显然这样不太好,我们知道,全局的属性,可以直接访问到,不需要 this.的形式。

于是就可以在this上面加一个window属性等于this

this.window = this;
// 全部变量,可以直接访问,不需要带着this
window === this;

这里强调一下,全局对象this上的属性可以不使用this.x形式访问,而是直接x可以访问。

这样就可以直接通过window获得全局对象this呢? 是不是很赞。

我们就可以推导 ,基于 window === this

this === this.window (thiswindow,其有window属性) === this.window.window
// 去掉this
window === window.window

所以,最主要的原因是更方便使用this而已。

我们也可以通过代码验证一下

this.window  // Window
window.this  // undefined

当然,现在有globalThis, 来统一访问全局对象。

globalThis === this === window

写在最后

不忘初衷,有所得,而不为所累,如果你觉得不错,你的一赞一评就是我前行的最大动力。

技术交流群请到 这里来。 或者添加我的微信 dirge-cloud,一起学习。