《ES6标准入门（第3版）》学习笔记4：chapter_2-3 顶层对象的属性 and 2-4 global对象-CSDN博客

本文链接：https://blog.csdn.net/weixin_44582681/article/details/100944927

让学习“上瘾”，成为更好的自己！！！

一，顶层对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>顶层对象的属性</title>
</head>
<body>
    
    <script>
    /*
    顶层对象： a, 浏览器环境 -- window对象
              b, Node环境 -- global对象
    
    
    */
    // ES5中，顶层对象的属性与全局变量时等价的
    // window.a = 23;
    // var a = 23;
    
    //【问题】顶层对象的属性与全局变量有关 --> JavaScript语言最大的设计败笔之一
    // 1, 无法在编译时Juin提示变量未声明的错误，只有运行时才知道（因为全局变量可能是顶层对象的属性创造出来的，而属性的创造是动态的） 
    // 2, 很容易就创建了全局变量
    // 3, 顶层对象的属性到处可以读写，不利于模块化编程
    // 4, window对象有实体含义，指的是浏览器窗口对象
    
    // 【改变】ES6 --> 1, var and function 命令声明的全局变量依旧是顶层对象的属性（保存兼容性）
    //                2, let, const and class命令声明的全局变量不属于顶层对象的属性
    

    var a = 1;
    console.log(window.a);  // 1

    let b = 23;
    console.log(window.b);  // undefined
    
    




    </script>



</body>
</html>

二，global对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>global对象</title>
</head>

<body>

    <script>
        /*
        1，ES5的顶层对象本身也是一个问题，因为他在各种实现中是不统一的

        2，同一段代码为了能够在各种环境中都取到顶层对象，目前一般使用this变量，但也存在局限性

        综述，很难找到一种方法可以在所有的情况下都取到顶层对象

    
    */
        // 以下两种方法勉强可以实现：

        // 方法一
        (typeof window !== 'undefined'? window: (typeof process === 'object' && typeof require === 'function' && typeof global === 'object')? global: this);


        // 方法二
        var getGlobal = function () {
                if (typeof self !== 'undefined') {
                    return self;
                }
                if (typeof window !== 'undefined') {
                    return window;
                }
                if (typeof global !== 'undefined') {
                    return global;
                }
                throw new Error('unable to locate global object');
        };

        // 【提案】在JavaScript语言标准中引入global作为顶层对象，也就是说，在所有的环境下，global是存在的，都可以拿到顶层对象

        // CommonJS的写法；
        require('system.global/shim')();

        // ES6写法
        import shim from 'system.global/shim';shim();

        // 上面的代码保证，在各种环境中global对象都是存在的

        // CommonJS的写法；
        var global = require('system.global')();


        // ES6写法
        import getGlobal from 'system.global';
        const global = getGlobal();

        // 上面的代码将顶层对象放入变量global中

    </script>



</body>

</html>