关闭

ES6之块级作用域

时间: 2018-12-18阅读: 1062标签: 作用域

全局作用域和函数作用域

在ES5中,只全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域;亦或者循环中的变量泄露为全局变量。

例如:


//  1.函数作用域覆盖了全局作用域,发生了变量提升,函数声明大于var声明的变量,因此函数里面的a提到了前面,在打印a,初始化一个undefined给a,所以打印出了undefined。
var a = '1';
function fn() {
    console.log(a);
    if (3<2) {
        var a  = 3;
    }
}
fn(); // undefined
// 2.循环中的变量泄露为全局变量
for(var i=0;i<5;i++) {
    console.log(i);
}
console.log(i); // 5;


ES6的块级作用域

用let命令新增了块级作用域,外层作用域无法获取到内层作用域,非常安全明了。即使外层和内层都使用相同变量名,也都互不干扰。


// 1.外层作用域无法获取到内层作用域
function fn1() {
    let a = 41;
    if(1 == 1) {
        let a = 3;
        console.log(2,a); // 2 3
    }
    console.log(1,a); // 1 41
}
fn1();

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

// 2. 外层和内层都使用相同变量名,也都互不干扰
{  
    {
        let food = 'apple';
        console.log(food); // apple
    }
    let food = 'orange';
    console.log(food); // orange
}


块级作用域和和函数声明

在ES5中,函数只能在顶级作用域和函数作用域中声明,不能在块级作用域中声明。但是在ES6中,函数可以在块级作用域中声明。

但是会有一定的问题,因为函数声明会被提到代码的最前面。所以会报错,最好在ES6中用函数表达式来表示一个函数。

例如:


//1.函数声明报错
{
    if (4 < 2) {
        function fn() {
            console.log('我在函数里面!');
        }
    }
}
fn(); // Uncaught TypeError: fn is not a function
//2.函数表达式没错
{
    let fa = '111';
    let fn = function () {
        console.log('我在函数里面!');
    }
    console.log(fa,fn); // 111 ƒ () { console.log('我在函数里面!');}
}

注意:ES6中允许函数在块级作用域中可以声明的条件是必须在大括号里面,否则就会报错。

// 1.报错的情况
if (4>2) {
    let fn = function () {};
}

//2.报错的情况
if (4>2)
    let fn = function () {}; // Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1836

关闭

深入理解 JavaScript, 从作用域与作用域链开始

作用域是你的代码在运行时,某些特定部分中的变量,函数和对象的可访问性。换句话说,作用域决定了变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。

理解Js的作用域和作用域链

作用域和作用域链在Javascript和很多其它的编程语言中都是一种基础概念。但很多Javascript开发者并不真正理解它们,但这些概念对掌握Javascript至关重要。

javascript变量作用域有哪些?

变量的作用域指变量有效的范围,与变量定义的位置密切相关,作用域是从空间的角度来描述变量的,也可以理解为变量的可见性。在某个范围内变量是可见的,也就是说,变量是可用的。

JavaScript 预编译与作用域

JavaScript 预编译的过程和作用域的分析步骤是 JS 学习中重要的一环,能够帮助我们知道代码的执行顺序,更好理解闭包的概念;JavaScript 执行步骤:检查通篇的语法错误 -> 预编译 -> 解释执行

Js作用链、作用域

函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合

理解JavaScript中的作用域和上下文

JavaScript对于作用域(Scope)和上下文(Context)的实现是这门语言的一个非常独到的地方,部分归功于其独特的灵活性。 函数可以接收不同的的上下文和作用域

JavaScript中作用域链的概念及用途

之前我写过一篇关于JavaScript中的对象的一篇文章,里面也提到了作用域链的概念,相信大家对这个概念还是没有很深的理解,并且这个概念也是面试中经常问到的,因为这个概念实在太重要了

es6块级作用域

在JavaScript中使用var定义一个变量,无论是定义在全局作用域函数函数的局部作用域中,都会被提升到其作用域的顶部,这也是JavaScript定义变量的一个令人困惑的地方。由于es5没有像其它类C语言一样的块级作用域,因此es6增加了let定义变量,用来创建块级作用域。

CSS的私有作用域scoped和深度选择器/deep/和>>>

当给<style scoped> </style>添加 scoped 属性之后,它会给每一个class添加一个唯一的属性值,避免了出现类名重复,样式重叠被污染的问题,相当于限制了作用域,它的 CSS 只作用于当前组件

深入理解vue中scoped样式作用域的规则

vue中的样式作用域是通过属性选择器来实现的,例如同样一个类名,我们是通过 .类名[属性名] 来做区分的,我们这里主要是要搞清楚这里的属性名是怎么分配的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!