我的JS笔记 -- 作用域

作者: 骷髅不会笑丶 | 来源:发表于2017-12-13 21:59 被阅读0次

JavaScript作用域学习笔记
变量作用域
JS作用域的练习
你不知道的JS-上卷
js 闭包
2019-08-13JS里面的作用域Scope
干货！月薪80k前端大佬面试笔记：JS闭包解析！
JavaScript作用域的理解
JS 作用域链、导入导出
JS的作用域

作用域和作用域链概念

作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

全局作用域，在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：
- 最外层函数和在最外层函数外面定义的变量拥有全局作用域；
- 所有末定义直接赋值的变量自动声明为拥有全局作用域；
- 浏览器环境中，所有window对象的属性拥有全局作用域；
局部作用域，局部作用域一般只在固定的代码片段内可访问到，在JS中一般是函数作用域；

作用域链，当代码在一个环境中执行时，会创建变量对象的一个作用域链，作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问。全局执行环境的变量对象始终都是作用域链中最后一个对象。

作用域规则

作用域有一套根据名称查找变量的规则。

实际情况中，通常需要同时顾及几个作用域，当一个块或函数嵌套在另一个块或函数中时，就发生了作用域的嵌套。因此，在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止。但不能通过向下搜索作用域链而进入另一个执行环境。

var a = 1;
function f() {
    var a = 2;
    var b = 3;
    console.log(a);
}
f(); // 2
a // 1
b // 报错

作用域工作模型

JS作用域的工作模型是词法作用域，词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变（大部分情况下是这样的）。

function f1() {
    console.log(a); 
}
f1(); // 输出undefined
function f2() {
    var a = 2;
    f1();
}
var a = 1;
f1(); // 1
f2(); // 1，因为f1定义时的作用域的a为全局的a = 1，说明函数不管在哪里调用都是基于它定义时的作用域

上面代码中，当函数执行时，会先查找所需的变量，作用域查找会在找到第一个匹配的标识符时停止。在多层的嵌套作用域中可以定义同名的标识符，这叫作“ 遮蔽效应”（内部的标识符“ 遮蔽”了外部的标识符）。抛开遮蔽效应，作用域查找始终从运行时所处的最内部作用域开始，逐级向外或者说向上进行，直到遇见第一个匹配的标识符为止。词法作用域规则会使函数在查找变量时从函数内部再到函数定义时的作用域，而不是从函数内部到函数使用时的作用域。所以无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。

函数作用域

JS中没有块级作用域，而是基于函数的作用域。函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）。

function f() {
    if (true) {
        var a = 1;
    }
    console.log(a);
}
f(); // 1，if不会生成新的作用域，所以a会泄露到当前函数作用域

利用函数作用域的特点，我们可以在任意代码片段外部添加包装函数，可以将内部的变量和函数定义“隐
藏”起来，外部作用域无法访问包装函数内部的任何内容。

var a = 1;
(function f() {
    var a = 2;
    console.log( a ); // 2，利用函数作用域包装代码，使函数内部变量不会被外部访问
})();
console.log(a); // 1

声明提升

var a = 1;
function f() {
    console.log(a); // undefined，不是1
    var a = 2;
    console.log(a); // 2
}
f();

// 上面代码解析为
function f() {
    var a;
    console.log(a); 
    a = 2;
    console.log(a);
}
var a;
a = 1;
f();

这个过程就是声明提升。

声明提升是因为JS在执行之前，会有一个预编译过程，预编译阶段生成变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译只有在解释执行阶段才会进行变量初始化。

声明提升原理

函数和变量的预解析特点：

函数声明会置顶
变量声明也会置顶
函数声明比变量声明更置顶：(函数在变量上面)
变量和赋值语句一起书写，在js引擎解析时，会将其拆成声明和赋值2部分，声明置顶，赋值保留在原来位置

声明过的变量不会重复声明

例一：

 conso.log(a); // function a() {}
 var a = 1;
 function a() {
     //
 };
 console.log(a); // 1

 // 上面代码解析为:
 function a() { // 先提升函数声明
     //
 }
 var a; // 函数声明已经有同名的，所以重复的var声明被忽略，但赋值不会
 console.log(a); // function a() {}
 a = 1; 
 console.log(a); // 1，函数声明在变量声明之前

例二：

 (function () {
     a = 1;
     alert(window.a); // undefined
     var a = 2; // JS预编译阶段会把变量声明即（var声明变量）和函数声明提升到作用域顶端
     alert(a); // 2
 })();

 // 上面代码解析
 (function () {
     var a; // a被提升到顶端后，a = 1就不是隐式声明全局变量了，而是给a赋值操作，所以window.a未声明为undefined
     a = 1;
     alert(window.a);
     a = 2;
     alert(a);
 })();

欺骗函数作用域

执行环境类型只有两种，全局和局部函数，但可以用其它方法欺骗函数作用域。

eval()，JavaScript中的eval(..)函数可以接受一个字符串为参数，并将其中的内容视为好像在书
写时就存在于程序中这个位置的代码并在运行到此位置执行参数代码。因为eval(..)可以在运行期修改书写期的词法作用域，存在安全问题，不建议使用。
```
  var a = 1;
  function f() {
      eval('var a = 2;'); // eval中的a遮蔽了全局中的a，让作用域弹出的a改变了
      console.log(a);
  }

  f(); // 2
```

with，with语句接收一个对象参数，表示with语句的对象作用域，with语句中的变量都会在这个指定的对象中查找。with会影响性能，不建议使用。

  var a = 0;
  var obj = {
      a: 1,
      b: 2
  };

  with(obj) {
      a = 2; // 会在obj中查找a属性
  }
  obj.a; // 2
  a //0
  
  with(obj) {
      c = 3; // 没有在指定对象中找到c，非严格模式下，with会在全局隐式创建一个全局变量
  }
  obj.c; // undefined
  c  // 3

更多文章在这里，觉得不错希望点个 star