ES5,ES6中顶层对象解析

  • A+
所属分类:ES 6 JavaScript Web

顶层对象,在浏览器环境指的是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作为顶层对象
zhangfeng

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: