ES5和ES6做用域

時間 2019-11-12

標籤 es5 es6 欄目 JavaScript 简体版

原文原文鏈接

ES5和ES6做用域

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

<head>
    <meta charset="UTF-8">
    <title>ES5和ES6的區別</title>
</head>

<body>
    <script type="text/javascript">
    //ES5 中做用域，
    const callbacks = []
    //i是經過var定義的 是全局變量
    for (var i = 0; i <= 2; i++) {
        //閉包的做用域是全局
        callbacks[i] = function() {
            return i * 2 //callbacks中的return i*2，是對變量的引用，而不是對函數變量值的引用。函數體中是一個變量，而不是一個值
        }
    }
    console.table([
        callbacks[0](), //6,for循環執行完畢，i=3，調用callback的時候 i=3
        callbacks[1](), //6
        callbacks[2](), //6
    ]);
    console.log([
        callbacks[0](),
        callbacks[1](),
        callbacks[2](),
    ]);

    //ES6  做用域
    const callbacks2 = []
    //用let聲明的變量有塊做用域的概念
    for (let j = 0; j <= 2; j++) {
        callbacks2[j] = function() {
            return j * 2 //閉包取決於當前的塊做用域，每循環一次，它就從新生成新的做用域
        }
    }
    console.table([
        callbacks2[0](), //0
        callbacks2[1](), //2
        callbacks2[2](), //4
    ]);

    //ES5 es5中要執行當即執行函數（(function(){},()），才能對做用域進行隔離。
    ((function() {
        const foo = function() {
            return 1;
        }
        console.log("foo === 1", foo() === 1);
        ((function() {
            const foo = function() {
                return 2;
            }
            console.log("foo === 2", foo() === 2);
        })())
        console.log("foo === 1", foo() === 1);
    })())
    //ES6  es6:{}表示一個新的做用域，{}能夠對做用域進行隔離。
    {
        function foo() {
            return 1;
        }
        console.log("foo === 1", foo() === 1); {
            function foo() {
                return 2;
            }
        }
        console.log("foo === 2", foo() === 2);

    }

    //ES3,ES5寫法
    var evens = [1, 2, 3, 4, 5];
    var odds = evens.map(function(v) { //遍歷
        return v + 1
    });
    console.log(evens, odds)
    //ES6箭頭函數
    {
        let evens = [1, 2, 3, 4, 5];
        let odds = evens.map(v => v + 1);
        console.log(evens, odds)
    }
    /*
    *箭頭函數與普通函數的區別，在於this的綁定

    */
    //ES3,ES5，this指向是該函數被調用的對象
    {
        var factory = function() {
            this.a = 'a';
            this.b = 'b';
            this.c = {
                a: 'a+',
                b: function() {
                    return this.a
                }
            }
        }
        console.log(new factory().c.b()); //a+
    }
    //ES6  this指向定義時的this
    {
        var factory = function() {
            this.a = 'a';
            this.b = 'b';
            this.c = {
                a: 'a+',
                b: () => {
                    return this.a
                }
            }
        }
        console.log(new factory().c.b()); //a
    }
    /*
     **默認參數
     */
    {
        //ES3,ES5默認參數寫法
        function f(x, y, z) {
            if (y === undefined) {
                y = 7;
            }
            if (z === undefined) {
                z = 42;
            }
            return x + y + z;

        }
        console.log(f(1)); //50
        console.log(f(1, 3)); //46
    } {
        //ES6  默認參數寫法
        function f(x, y = 7, z = 42) {
            return x + y + z;
        }
        console.log(f(1)); //50
        console.log(f(1, 3)); //46
    } {
        //es6 檢查X默認參數是否賦值了
        //先聲明一個函數
        function checkParameter() {
            // throw new Error阻止js運行
            throw new Error('can\'t be empty')
        }

        function f(x = checkParameter(), y = 7, z = 42) {
            return x + y + z;
        }
        console.log(f(2));
        try {
            f();
        } catch (e) {
            console.log(e)
        } finally {}
    } {
        // ES3,ES5  可變參數
        function f() {
            var a = Array.prototype.slice.call(arguments); //僞數組，獲取當前的參數列表
            var sum = 0; //初始值
            a.forEach(function(item) {
                sum += item * 1; //求和運算
            })
            return sum;
        }
        console.log(f(1, 2, 3))
    } {
        //ES6 可變參數寫法
        //...a表明擴展運算符，可變參數的列表
        function f(...a) {
            var sum = 0;
            a.forEach(item => {
                sum += item * 1; //求和運算
            })
            return sum;

        }
        console.log(f(1, 2, 3))
    }
    /*
    **合併數組
    */
    {
        //es5 合併數組
        var params = ['hi','true',7];
        var other = [1,2].concat(params);
        console.log(other)
    }
    {
        //es6 利用擴展運算符合並數組寫法
        var params = ['hi','true',7];
        var other = [1,2,...params];
        console.log(other)
    }
    </script>
</body>

</html>