ES6快速入门 - 作用域

最新推荐文章于 2023-10-24 15:17:02 发布

原创最新推荐文章于 2023-10-24 15:17:02 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

javascript高级 es5/es6 专栏收录该内容

43 篇文章

订阅专栏

本文探讨了JavaScript中不同版本的作用域实现方式，包括ES5的函数作用域和ES6的块级作用域，并通过具体代码示例展示了闭包的概念及其在实际编程中的应用。

// ES5中作用域
const callbacks =[];
for(var i = 0;i <= 2;i++){
    callbacks[i] = function(){
        return i * 2;                                               //  闭包
    }
}

console.log([
    callbacks[0](),
    callbacks[1](),
    callbacks[2](),
])

这里写图片描述

// ES6
const callback2= [];
for(let j = 0;j <= 2;j++){
    callback2[j] = function(){      //  大括号块级作用域
        return j * 2;
    }
}

console.log([
    callback2[0](),
    callback2[1](),
    callback2[2](),
]);

这里写图片描述

// 立即执行函数
// ES5实现
(() => {
    const foo = function(){
        return 1;
    }
    console.log('foo() === 1',foo() === 1);             // foo() === 1 true

    (() => {
        const foo = function(){
            return 2;
        }
        console.log('foo === 2',foo() === 2);           // foo === 2 true
    })()
})()

// ES6实现
{
    function foo(){
        return 1
    }
    console.log("foo() === 1",foo() === 1);         //..true
    {                                           //  新的作用域
        function foo(){
            return 2
        }
        console.log('foo() === 2',foo() === 2);     //..true
    }
    console.log("foo() === 1",foo() === 1);         //..true
}