浅谈JavaScript作用域

JavaScript作用域

什么是作用域

  • JavaScriptt的作用域通俗的将,就是指变量能够被访问到的范围
  • 作用域是用来确定在何处以及如何查找变量/标识符的规则
  • 作用域就是查找变量的地方

作用域分类

全局作用域

  • 全局作用域是挂载在window对象下的,在任何位置都可以访问到
  • 直接被赋值的变量默认为全局变量,拥有全局作用域

函数test执行时打印了变量b,在函数内部没有找到变量b时,会到函数外层中查找,找到了就停止查找并且输出。这种通过访问函数外部变量的方式称为全局作用域

// 全局作用域
var a = 1
function test() {
    console.log(a)    // 1
}
test()
console.log(a)    // 1

直接赋值的变量

name = 'xcc'
console.log(window.name)    // xcc

函数作用域

  • 在JavaScript中,函数内部定义的变量叫做函数变量,这个变量只能在函数内部访问到,它的作用域在函数内部,称为函数作用域
  • 函数内部的变量,在没有被其它位置引用时,会在函数执行完后被销毁

函数test1执行时打印了变量a,变量a是在函数内部定义的,这种在函数内部就访问到了变量的称为函数作用域

// 函数作用域
function test1() {
    var a = 1
    console.log(a)    // 1
}
test1()
console.log(a)    // ReferenceError: a is not defined

块级作用域(ES6新增)

  • 通过let关键字进行声明
  • 会有暂时性死区的特点,即在变量定义之前是不能被使用的

JavaScript中if语句for语句后面的{}里面包含的,就是快级作用域

console.log(name)    // ReferenceError: name is not defined
if(true) {
    var name = 'xcc'
    console.log(name)    // xcc
}
console.log(name)    // ReferenceError: name is not defined

作用域相关知识点

作用域链

在函数test的执行过程中,在查找a变量时,先在函数内部查找,没有找到,就到全局作用域中查找,有一个往外查找的过程。好像是顺着一条链条从上往下查找变量,这条链条我们称为作用域链

作用域嵌套

// 全局作用域
var a = 1
function fn1() {
    // 作用域3
    var b = 2
    function fn2() {
        // 作用域2
        var c = 3
        function fn3() {
            // 作用域1
            var d = 4
            console.log(a)
        }
    }
}

词法作用域

  • 词法作用域又叫静态作用域,函数的作用域在函数定义的时候就规定了,这个规则其实就是就近原则
  • 函数定义阶段决定了JavaScript查找变量的方式,而不是调用阶段
var name = 'xcc'
function foo() {
    console.log(name)    // xcc
}
function bar() {
    var name = 'xcc1'
    foo()
}
bar()

等价于

var name = 'xcc'
function foo() {
    console.log(name)    // xcc
}
foo()
function foo() {
    console.log(name)    // undefined
}
function bar() {
    var name = 'xcc1'
    foo()
}
bar()
var scope = 'global scope';
function checkscope(){
    var scope = 'local scope';
    function f(){
        return scope;
    }
    return f();
}
checkscope();    // local scope


var scope = 'global scope';
function checkscope(){
    var scope = 'local scope';
    function f(){
        return scope;
    }
    return f;
}
checkscope()()    // local scope

参考资料

posted @ 2021-04-25 23:57  小菜菜爱吃菜  阅读(68)  评论(0编辑  收藏  举报