燕十八老师 JS高级学习笔记之作用域链

最新推荐文章于 2024-09-16 08:47:17 发布

蝙蝠侠1

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量111

点赞数

文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/pyzx19891212/article/details/126079852

版权

本文深入探讨了JavaScript中的作用域和变量声明。通过例子解释了变量查找的规则，从函数内部到外部直至全局作用域。强调了`var`声明的变量在词法分析阶段的作用，并指出不使用`var`进行赋值操作时变量的作用域特点。同时，介绍了JS代码的词法分析和运行期的区别，以及如何理解变量在不同阶段的状态。最后，通过示例分析了未声明变量的引用错误和作用域链的影响。

摘要由CSDN通过智能技术生成

作用域
在JS中，函数嵌套是非常普遍的，在函数嵌套中：对变量是如何寻找的？
答： 首先在函数内寻找，寻找不到，则在外层寻找 ...直到..全局（window）区域。

    // 例子1
    var c=5;
    function t1() {
      var d=6;
      function t2() {
        var e=7;
        alert(c+d+e);  //18
      }
      t2();
    }
    t1();

    // 例子2
    var c=5;
    function t1() {
      var d=6;
      function t2() {
        var e=7;
        var d=3;
        alert(c+d+e);  //15
      }
      t2();
    }
    t1();

对var的理解：

var的作用：声明变量。 var 是在函数运行的上下文中声明一个变量。如果不加var 仅仅是一个赋值操作但不要狭隘地理解为声明了一个变量。

    alert(window.d);  //undefined ------->window全局中没有d变量
    alert(window.e);  //undefined
    function t() {
      d=5;             //------------>变量不加var 仅仅是一个赋值操作
      var e=6;
    }
    t();
    alert(window.d);   //5
    alert(window.e);   //undefined

    function t1() {
      var d;
      function t2() {
        d=5;   //---->仅仅是一个赋值操作
        e=6;
      }
      t2();
    }
    t1();
    console.log(window.e);    //  6
    console.log(window.d);    //  undefined
    console.log(d);   //Uncaught ReferenceError: d is not defined

注意：以window.xxx引用全局变量，如果寻找不到，是作为某个属性不存在 返回undefined
如果直接以xxx引用全局变量 如果找不到 则会报错：Uncaught ReferenceError: xxx is not defined

作用域考试：这是一个极容易出错但是有很基础的JS面试题

    // 例子1
    // =============================================


    var str1='global';
    function t1() {
      console.log(str1);  //global
      console.log(str2);   //Uncaught ReferenceError: str2 is not defined
      str2='local';
    }
    t1();

分析:  console.log(str1)执行时，在t1内寻找str1找不到 于是往外找，在window上寻找到str1  打印global;
console.log(str2)执行时，在t1内寻找str2找不到 于是往外找 在window寻找str2 没有 于是报str2 is not defined错误
至于str2='local'，根本执行不到这里

    // 例子2
    // ==================================================
        var str1='global';
        function t1() {
          console.log(str1);  //global
          console.log(str2);   //undefined
          var str2='local';
        }
        t1();

以下该知识点非常重要！**********
JS代码的执行自上而下没有问题
但是JS代码在整理运行分为：
词法分析期和运行期
自上而下执行之前，先有一个“词法分析过程”！
以上面例2为例：
第1步：先分析t1函数  t1内部有局部变量str2  注意此时只是有分析出来，代码还没运行，函数未执行 故还没有赋值
第2步：执行t1函数
  console.log(str1);  //global
  console.log(str2);   //undefined
  var str2='local';  此时str2的值为local
  因此光知道作用域链的概念还不够，还要知道词法分析