专栏首页AlbertYang的编程之路JavaScript进阶教程(5)-一文让你搞懂作用域链和闭包

JavaScript进阶教程(5)-一文让你搞懂作用域链和闭包

1 作用域

在JS中变量可以分为局部变量和全局变量,对于变量不熟悉的可以看一下我这篇文章:搞懂JavaScript全局变量与局部变量,看这篇文章就够了 作用域就是变量的使用范围,分为局部作用域和全局作用域,局部变量的使用范围为局部作用域,全局变量的使用范围是全局作用域。在 ECMAScript 2015 引入let 关键字之前,js中没有块级作用域---即在JS中一对花括号({})中定义的变量,依然可以在花括号外面使用。

{
  var num2 = 100;
}
console.log(num2); // >100

2 作用域链

当内部函数访问外部函数的变量时,采用的是链式查找的方式进行获取的,从里向外层层的搜索,搜索到了就直接使用,搜索到0级作用域的时候,如果还是没有找到这个变量,就报错。这种结构我们称为作用域链。

// 作用域链:变量的使用,从里向外,层层的搜索,搜索到了就直接使用
// 搜索到0级作用域的时候,如果还是没有找到这个变量,就会报错
var num = 10; //作用域链 级别:0

function f1() {
  var num2 = 20;

  function f2() {
    var num3 = 30;
    console.log(num); // >10
  }
  f2();
}
f1();

3 预解析

JS代码在浏览器中是由JS引擎进行解析执行的,分为两步,预解析和代码执行。预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升),浏览器JS代码运行之前,会把变量的声明和函数的声明提前(提升)到该作用域的最上面。

3.1 变量预解析

把所有变量的声明提升到当前作用域的最前面,不提升赋值操作。 示例:

console.log(num); // 没有报错,返回的是一个undefined
var num = 666;

预解析后:

// 预解析后:变量提升
var num;
console.log(num); // 所以返回的是一个undefined
num = 666;

3.2 函数预解析

将所有函数声明提升到当前作用域的最前面。 示例:

f1(); // 能够正常调用

function f1() {
  console.log("Albert唱歌太好听了");
}

预解析后:

function f1() {
  console.log("Albert唱歌太好听了");
}
f1(); //预解析后,代码是逐行执行的,执行到 f1()后,去调用函数 f1()

4 闭包

在专业书籍上对于闭包的解释为:Javascript的闭包是指一个函数与周围状态(词法环境)的引用捆绑在一起(封闭)的组合,在JavaScript中,每次创建函数时,都会同时创建闭包。闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰,即形成一个不销毁的栈环境。 这句话比较难以理解,对于闭包我的理解是,在函数A中,有一个函数B,在函数B中可以访问函数A中定义的变量或者是数据x,被访问的变量x可以和B函数一同存在。即使A函数已经运行结束,导致创建变量x的环境销毁,B函数中x变量也依然会存在,直到访问变量x的B函数被销毁,此时形成了闭包。如下面代码所示:

function A() {
  var x = 0;

  function B() {
    return ++x;
  }
  return B // 返回B函数
}

var B = A(); // 创建B函数
console.log(B()); // 1
console.log(B()); // 2
console.log(B()); // 3
console.log(B()); // 4
console.log("%c%s", "color:red", "*******---------*********");
// 创建新的B函数
B = A();
console.log(B()); // 1

4.1 闭包小案例:

// 普通的函数
function f1() {
  var num = 0;
  num++;
  return num;
}
console.log(f1());
console.log(f1());
console.log(f1());

console.log("%c%s", "color:red", "*******---------*********");
// 闭包
function f2() {
  var num = 0;
  return function() {
    num++;
    return num;
  }
}
var ff = f2();
console.log(ff()); // 1
console.log(ff()); // 2
console.log(ff()); // 3

4.2 闭包点赞案例

演示地址:https://www.albertyy.com/2020/9/like.html

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>闭包点赞案例:公众号AlbertYang</title>
    <style>
      ul {
        list-style-type: none;
      }

      li {
        float: left;
        margin-left: 10px;
        margin-bottom: 20px;
      }

      img {
        height: 300px;
      }

      input {
        margin-left: 30%;
      }
</style>
  </head>
  <body>
    <ul>
      <li><img src="1.jpg" alt=""><br /><input type="button" value="(1)赞"></li>
      <li><img src="2.jpg" alt=""><br /><input type="button" value="(1)赞"></li>
      <li><img src="3.jpg" alt=""><br /><input type="button" value="(1)赞"></li>
      <li><img src="4.jpg" alt=""><br /><input type="button" value="(1)赞"></li>
      <li><img src="5.jpg" alt=""><br /><input type="button" value="(1)赞"></li>
      <li><img src="6.jpg" alt=""><br /><input type="button" value="(1)赞"></li>
    </ul>
  </body>
  <script>
    // 根据标签名字获取元素
    function my$(tagName) {
      return document.getElementsByTagName(tagName);
    }
    // 闭包缓存数据
    function getValue() {
      var value = 2;
      return function() {
        // 每一次点击的时候,都应该改变当前点击按钮的value值
        this.value = "(" + (value++) + ")赞";
      }
    }
    //获取所有的按钮
    var btnObjs = my$("input");
    //循环遍历每个按钮,注册点击事件
    for (var i = 0; i < btnObjs.length; i++) {
      //注册事件
      btnObjs[i].onclick = getValue();
    }
</script>
</html>

5 闭包的作用

闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来。这显然类似于面向对象编程。在面向对象编程中,对象允许我们将某些数据(对象的属性)与一个或者多个方法相关联。在一些编程语言中,比如 Java,是支持将方法声明为私有的(private),即它们只能被同一个类中的其它方法所调用。而 JavaScript 没有这种原生支持,但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问:还提供了管理全局命名空间的强大能力,避免非核心的方法弄乱了代码的公共接口部分。下面我们计数器为例,代码如下:

var myCounter = function() {
  var privateCounter = 0;

  function changeBy(val) {
    privateCounter += val;
  }

  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);

    },
    value: function() {
      return privateCounter;
    }
  }
};

var Counter1 = myCounter();
var Counter2 = myCounter();
console.log(Counter1.value()); /* 计数器1现在为 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* 计数器1现在为 2 */
Counter1.decrement();
console.log(Counter1.value()); /* 计数器1现在为 1 */

console.log(Counter2.value()); /* 计数器2现在为 0 */
Counter2.increment();
console.log(Counter2.value()); /* 计数器2现在为 1 */

在上边的代码中我们创建了一个匿名函数含两个私有项:名为 privateCounter 的变量和名为 changeBy 的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问,Counter.increment,Counter.decrement 和Counter.value,这三个公共函数共享同一个环境的闭包,多亏 JavaScript 的词法作用域,它们都可以访问 privateCounter 变量和 changeBy 函数。我们把匿名函数储存在一个变量myCounter 中,并用它来创建多个计数器,每次创建都会同时创建闭包,因为每个闭包都有它自己的词法环境,每个闭包都是引用自己词法作用域内的变量 privateCounter ,所以两个计数器 Counter1 和 Counter2 是各自独立的。以这种方式使用闭包,提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。

6 闭包导致的一些问题

在 ECMAScript 2015 引入let 关键字之前,在循环中有一个常见的闭包创建问题。请看以下代码:

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>公众号AlbertYang</title>
        </head>
        <body>
                <p id="help">提示信息</p>
                <p>E-mail: <input type="text" id="email" name="email"></p>
                <p>Name: <input type="text" id="name" name="name"></p>
                <p>Age: <input type="text" id="age" name="age"></p>
 
        </body>
        <script>
                function showHelp(help) {
                        document.getElementById('help').innerHTML = help;
                }
 
                function setupHelp() {
                        var helpText = [{
                                        'id': 'email',
                                        'help': '你的邮件地址'
                                },
                                {
                                        'id': 'name',
                                        'help': '你的名字'
                                },
                                {
                                        'id': 'age',
                                        'help': '你的年龄'
                                }
                        ];
 
                        for (var i = 0; i < helpText.length; i++) {
                                var item = helpText[i];
                                document.getElementById(item.id).onfocus = function() {
                                        showHelp(item.help);
                                }
                        }
                }
                setupHelp();
</script>
</html>

上边代码中,我们在数组 helpText 中定义了三个提示信息,每一个都关联于对应的文档中的input 的 ID。通过循环依次为相应input添加了一个 onfocus 事件处理函数,以便显示帮助信息。运行这段代码后,您会发现它没有达到想要的效果。无论焦点在哪个input上,显示的都是关于年龄的信息。 演示地址:https://www.albertyy.com/2020/7/closure1.html 我们想要的正确效果:https://www.albertyy.com/2020/7/closure2.html

这是因为赋值给 onfocus 的是闭包。这些闭包是由他们的函数定义和在 setupHelp 作用域中捕获的环境所组成的。这三个闭包在循环中被创建,但他们共享了同一个词法作用域,在这个作用域中存在一个变量item。这里因为变量item使用var进行声明,由于变量提升(item可以在函数setupHelp的任何地方使用),所以item具有函数作用域。当onfocus的回调执行时,item.help的值被决定。由于循环在onfocus 事件触发之前早已执行完毕,变量对象item(被三个闭包所共享)已经指向了helpText的最后一项。要解决这个问题,有以下几个方法。

6.1 第一:使用更多的闭包

function showHelp(help) {
        document.getElementById('help').innerHTML = help;
}

function makeHelpCallback(help) {
        return function() {
                showHelp(help);
        };
}

function setupHelp() {
        var helpText = [{
                        'id': 'email',
                        'help': '你的邮件地址'
                },
                {
                        'id': 'name',
                        'help': '你的名字'
                },
                {
                        'id': 'age',
                        'help': '你的年龄'
                }
        ];

        for (var i = 0; i &lt; helpText.length; i++) {
                var item = helpText[i];
                document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
        }
}
setupHelp();

这段代码可以正常的执行了。这是因为所有的回调不再共享同一个环境, makeHelpCallback 函数为每一个回调创建一个新的词法环境。在这些环境中,help 指向 helpText 数组中对应的字符串。

6.2 第二种方法:使用了匿名闭包

function showHelp(help) {
        document.getElementById('help').innerHTML = help;
}

function setupHelp() {
        var helpText = [{
                        'id': 'email',
                        'help': '你的邮件地址'
                },
                {
                        'id': 'name',
                        'help': '你的名字'
                },
                {
                        'id': 'age',
                        'help': '你的年龄'
                }
        ];

        for (var i = 0; i &lt; helpText.length; i++) {
                (function() {
                        var item = helpText[i];
                        document.getElementById(item.id).onfocus = function() {
                                showHelp(item.help);
                        }
                })(); // 马上把当前循环项的item与事件回调相关联起来
        }
}
setupHelp();

6.3 第三种方法:使用用ES2015引入的let关键词

function showHelp(help) {
        document.getElementById('help').innerHTML = help;
}

function setupHelp() {
        var helpText = [{
                        'id': 'email',
                        'help': '你的邮件地址'
                },
                {
                        'id': 'name',
                        'help': '你的名字'
                },
                {
                        'id': 'age',
                        'help': '你的年龄'
                }
        ];

        for (var i = 0; i &lt; helpText.length; i++) {
                let item = helpText[i]; //使用let代替var
                document.getElementById(item.id).onfocus = function() {
                        showHelp(item.help);
                }
        }
}
setupHelp();

这个里使用let而不是var,因为let是具有块作用域的变量,即它所声明的变量只在所在的代码块({})内有效,因此每个闭包都绑定了块作用域的变量,这意味着不再需要额外的闭包。

6.4 第四种方法:使用 forEach()来遍历

function showHelp(help) {
        document.getElementById('help').innerHTML = help;
}

function setupHelp() {
        var helpText = [{
                        'id': 'email',
                        'help': '你的邮件地址'
                },
                {
                        'id': 'name',
                        'help': '你的名字'
                },
                {
                        'id': 'age',
                        'help': '你的年龄'
                }
        ];

        helpText.forEach(function(text) {
                document.getElementById(text.id).onfocus = function() {
                        showHelp(text.help);
                }
        });
}
setupHelp();

7 性能

由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题。如果不是某些特定任务需要使用闭包,最好不要使用闭包。例如,在创建新的对象或者类时,方法通常应该放到原型对象中,而不是定义到对象的构造函数中。原因是这将导致每次构造函数被调用时,方法都会被重新赋值一次(也就是说,对于每一个实例对象,geName和 getMessage都是一模一样的内容, 每生成一个实例,都必须为重复的内容,多占用一些内存,如果实例对象很多,会造成极大的内存浪费)。

请看以下代码:

function MyObject(name, message) {
        this.name = name.toString();
        this.message = message.toString();

        this.getName = function() {
                return this.name;
        };

        this.getMessage = function() {
                return this.message;
        };
}

在上面的代码中,我们并没有利用到闭包的好处,因此可以避免使用闭包。

修改如下:

function MyObject(name, message) {
        this.name = name.toString();
        this.message = message.toString();
}
MyObject.prototype = {
        getName: function() {
                return this.name;
        },
        getMessage: function() {
                return this.message;
        }
};

如果我们不想重新定义原型,可修改如下:

function MyObject(name, message) {
        this.name = name.toString();
        this.message = message.toString();
}

MyObject.prototype.getName = function() {
        return this.name;
};

MyObject.prototype.getMessage = function() {
        return this.message;
};

思考:为了测试你是否理解闭包请看下面两段代码,请思考它们的运行结果是什么?并在留言区给出你的答案。

代码一:

var name = "Window";
var object = {
  name: "Object",

  getNameFunc: function() {
    return function() {
      return this.name;
    };
  }
};
console.log(object.getNameFunc()());

代码二:

var name = "Window";
var object = {
  name: "Object",
  getNameFunc: function() {
    var that = this;
    return function() {
      return that.name;
    };
  }
};
console.log(object.getNameFunc()());

8 总结

内部函数访问外部函数的变量时,采用的是链式查找的方式进行获取的,从里向外层层的搜索,搜索到了就直接使用,搜索到0级作用域的时候,如果还是没有找到这个变量,就报错,这种结构我们称为作用域链。本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁 局部变量是在函数中,函数使用结束后,局部变量就会被自动的释放,但是产生闭包后,里面的局部变量的使用作用域链就会被延长,闭包的作用是缓存数据这是闭包的优点也是缺点,这会导致变量不能及时的释放。如果想要缓存数据,就把这个数据放在外层的函数和里层的函数的中间位置。由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不要滥用闭包。

本文分享自微信公众号 - AlbertYang(AlbertYang666),作者:AlbertYang

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 什么是JavaScript 的闭包???

    Javascript的闭包是指一个函数与周围状态(词法环境)的引用捆绑在一起(封闭)的组合,在JavaScript中,每次创建函数时,都会同时创建闭包。闭包是一...

    AlbertYang
  • 黑客帝国中代码雨如何实现?用 canvas 轻松实现代码雨炫酷效果!

    演示地址:https://www.albertyy.com/2020/7/codeRain.html

    AlbertYang
  • 设计模式(11)[JS版]-JavaScript中的注解之装饰器模式

    装饰器模式模式动态地扩展了(装饰)一个对象的行为,同时又不改变其结构。在运行时添加新的行为的能力是由一个装饰器对象来完成的,它 "包裹 "了原始对象,用来提供额...

    AlbertYang
  • Layui常见问题

    为什么表单不显示?当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以...

    二十三年蝉
  • 网络基础笔记

    通过网络,和其他连接到网络上的用户一起共享网络资源,如磁盘上的文件、打印机、调制解调器等

    kevinfaith
  • React List Diff

    对treeA做以上3步,就能得到treeA',树的规模较小时,一眼就能看出来,回想下是怎么做到的:

    ayqy贾杰
  • JQuery部分功能底层实现

    越陌度阡
  • network review 01

    网络的知识想复习一遍,MOOC上有一些高水平的课,网易教育的负责人和哈工大关系很好,哈工大的一些课都搬到了网易的在线教育,希望国内的在线教育越办越好。

    changan
  • ARP欺骗常见姿势及多机ARP欺骗

    ARP欺骗是一个老生常谈的话题,翻看各位师傅的文章,大多数都是在使用arpspoof(当然,同样看到过使用Python写一款类似的工具的文章)进行单机欺骗。本文...

    FB客服
  • 如何使JavaScript更高效

    传统的 Web 页面不会包含很多脚本,至少不会太影响 Web 页面的性能。然而,Web 页面变得越来越像应用程序,脚本对其的影响也越来越大。随着越来越多的应用采...

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券