美文网首页
全局作用域下的this

全局作用域下的this

作者: 西北有高楼lee | 来源:发表于2021-06-12 23:07 被阅读0次

    1、浏览器环境下

    window和this的关系:全局作用域下的this就等于window

    console.log(window === this);//true
    var a = 1;
    var b = function () {
      return "function1";
    }
    console.log(window.a); //1
    console.log(window.b); //ƒ (){ return "function1"; }
    console.log(window.a === a); //true
    console.log(window.b === b); //true
    

    在全局对象上定义的变量可以直接访问

    window.aa = 2;
    this.bb = function () {
      return "function2";
    }
    console.log(aa); //2
    console.log(bb); //ƒ (){  return "function2"; }
    

    浏览器环境下获取全局对象的方式:window,self,frames,this

    console.log(self.aa);//2
    console.log(frames.aa);//3
    console.log(self===this);//true
    console.log(frames===this);//true
    

    2、node环境下

    node中的全局对象是global,但是this并不指向gloabl

    定义的全局变量并不会绑定到全局对象gloabl身上,但是可以往global身上添加属性

    console.log(this === global);//false
    var a="global -> a";
    global.b="global -> b";
    var obj={
      a: "obj -> a",
      test: function() {
        console.log(this.a);//obj -> a
        console.log(global);
        console.log(global.a);//undefined
        console.log(global.b);//global -> b
      }
    }
    obj.test();
    

    上面程序中console.log(global)语句输出的gloabl对象为:

    <ref *1> Object [global] {
      global: [Circular *1],
      clearInterval: [Function: clearInterval],
      clearTimeout: [Function: clearTimeout],
      setInterval: [Function: setInterval],
      setTimeout: [Function: setTimeout] {
        [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
      },
      queueMicrotask: [Function: queueMicrotask],
      clearImmediate: [Function: clearImmediate],
      setImmediate: [Function: setImmediate] {
        [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
      },
      b: 'global -> b'
    }
    

    3、globalThis

    在以前,从不同的 JavaScript 环境中获取全局对象需要不同的语句。在 Web 中,可以通过 window、self 或者 frames 取到全局对象,但是在 Web Workers 中,只有 self 可以。在 Node.js 中,它们都无法获取,必须使用 global。

    在松散模式下,可以在函数中返回 this 来获取全局对象,但是在严格模式和模块环境下,this 会返回 undefined。

    function test1(){
      "use strict"
      return this;
    }
    function test2(){
      return this;
    }
    console.log(test1());//undefined
    console.log(test2());//Window {...}
    console.log(window.test1());//Window {...}
    

    globalThis 提供了一个标准的方式来获取不同环境下的全局 this 对象(也就是全局对象自身)。不像 window 或者 self 这些属性,它确保可以在有无窗口的各种环境下正常工作。所以,你可以安心的使用 globalThis,不必担心它的运行环境。为便于记忆,你只需要记住,全局作用域中的 this 就是 globalThis

    • 浏览器环境下
      console.log(globalThis === window);//true
      var a = 1;
      console.log(globalThis.a);//1
      
    • node环境下

      console.log(globalThis === global);//true
      var a = 1;
      globalThis.b = 2;
      console.log(globalThis.a);//undefined
      console.log(global.b);//2
      

    相关文章

      网友评论

          本文标题:全局作用域下的this

          本文链接:https://www.haomeiwen.com/subject/ticweltx.html