作用域

Posted 2021-09-16 Infogami

一,作用域定义

定义变量的区域，作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。
因为采用词法作用域，函数的作用域在函数定义的时候就决定了。
与词法作用域相对的是动态作用域，函数的作用域在函数调用的时候才决定。

var value = 1;
function foo() {
    console.log(value);
}
function bar() {
    var value = 2;
    foo();
}
bar();

⑴采用用词法作用域：读取foo函数时，会先确定被访问变量的；从当前函数作用中找value变量，没有则往上层对象中去找。按这个逻辑怎找到全局变量value=1;所以执行foo函数时，value=1。
⑵采用动态作用域：执行foo函数时，才会去寻找value变量；依然是从foo函数内部查找是否有局部变量value。如果没有，就从调用函数的作用域，也就是bar函数内部查找value变量，所以最后会打印2

二,js作用域

ECMAScript6之前只有全局作用域和函数作用域。之后引入看了块级作用域。

三,留下一个《javascript权威指南》中的例子

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

四,不要在块级作用域里面声明函数

• Chrome运行分析

  var a
  if(true){ // 断点 Scope Global  a: undefined
      a = 5 
      // Call Stack 进入anonymous   
      // Scope 
          // Block   a： function a(){}  在 if 的块级作用域 中 a 被提升为一个函数 并赋值
          //Global  a: undefined
      function a() {};
      // 执行到这儿的时候 块内的a 被赋值为5
      // Scope 
          // Block   a： 5  在 if 的块级作用域 中 a 被赋值为 5
          // global a: undefined
      a= 0
      // 执行到这儿的时候 
      // Scope 
          // Block   a： 5  在 if 的块级作用域 中 a 被赋值为 5
          // global a: 5
      console.log(a)
       // Scope 
          // Block   a： 0  在 if 的块级作用域 中 a 被赋值为 5
          // global a: 5
      // 此时在if 块级的作用域内的a 为0  Block 0  console.log(会立即执行) 输出0
  }
  console.log(a)

  看下mdn的建议

• 不同浏览器下的测试结果

  var hoisted = "foo" in this
  console.log(`foo name:${foo?\'ascension\':\'not be ascension\'},typeof foo:${typeof foo}`)
  if(false){
      function foo(){ return 1 }
  }
  //Chrome中,\'foo\'变量被提升,但typeof 为undefined
  
  //Firefox中,\'foo\'变量被提升,但typeof 为undefined
  
  //Edge中,\'foo\'变量未被提升,但typeof 为undefined
  
  //Safari中,\'foo\'变量被提升,但typeof 为function
  
  //即使把上面条件改成false也是一样,这是历史遗留的问题