ES5,ES6中顶层对象解析

顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 之中,顶层对象的属性与全局变量是等价的。

一.顶层对象

1.ES5中顶层对象定义

  • ES5中顶层对象是windowwindow对象也代指浏览器窗口,var命令和function命令声明的全局变量,是window的属性;

    window.a = 1;
    a // 1
    
    a = 2;
    window.a // 2
    

2.ES6中顶层对象的定义

  • ES6中顶层对象定义,var命令和function命令声明的全局变量,依旧是顶层对象的属性;let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。

    var a = 1;
    // 如果在 Node 的 REPL 环境,可以写成 global.a
    // 或者采用通用方法,写成 this.a
    window.a // 1
    
    let b = 1;
    window.b // undefined
    

3.指向顶层对象

  • 浏览器中,顶层对象是window;全局环境中selfthiswindow都指向顶层对象;
  • Node 里面,顶层对象是global
console.log(self===this)//true
  console.log(window===this)//true

4.this指向

  1. 全局环境中,this会返回顶层对象

  2. 函数里面的this,如果函数不是作为对象的方法运行,而是单纯作为函数运行,this会指向顶层对象。(严格模式下,这时this会返回undefined)

  3. 对象中的this,指向对象本身。

  4. Node 模块和 ES6 模块中,this返回的是当前模块。

  5. 不管是严格模式,还是普通模式,new Function('return this')(),总是会返回全局对象。但是,如果浏览器用了 CSP(Content Security Policy,内容安全策略),那么evalnew Function这些方法都可能无法使用。

      var m ={
    	node: function () {
    	  return this
    	}
      }
     console.log(m===m.node())
    

5.globalThis

  • ES2020 在语言标准的层面,引入globalThis作为顶层对象
发布了170 篇原创文章 · 获赞 61 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/NDKHBWH/article/details/103731210