第3章 第3节 闭包(JavaScript闭包和闭包面试题)

最新推荐文章于 2021-02-22 14:17:26 发布
最新推荐文章于 2021-02-22 14:17:26 发布
阅读量305 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 面试 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/szmtjs10/article/details/102719383
版权

1.函数作用域

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包属性详解</title>
    </head>
<body >
<div id="div1" style="height: 100px;background: red;"></div>
</body>
</html>
<script type="text/javascript">
   var n=99;
   function outer() {
       var n=0;
       alert(n);
       }
   document.getElementById("div1").onclick=outer();
 </script>

运行结果：
在这里插入图片描述
访问的n是outer函数内部的不是全局的n，作用域链原理，先访问自己作用域的，没有才顺着链向上一层层找，直至找到，否则报错，找不到变量。

在这里插入图片描述

2.计数器，记录点击次数

第一种方法：这是使用全局变量实现，全局变量常驻内存，一直保存着

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包属性详解</title>
</head>

<body>
    <div id="div1" style="height: 100px;background: red;"></div>
    <div id="div2" style="height: 100px;margin: 10px;   background: green;"></div>
</body>

</html>
<script type="text/javascript">
    var n = 99;

    function outer() {

        return ++n;
    }

    document.getElementById("div1").onclick = function() {
        this.innerHTML = outer();
    }
</script>

在这里插入图片描述
第二种方式推导：全局变量使用总害怕其他地方有冲突，一直常驻内存，占用资源等弊端。

第1步骤：在outer函数内加n变量

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包属性详解</title>
</head>

<body>
    <div id="div1" style="height: 100px;background: red;"></div>
    <div id="div2" style="height: 100px;margin: 10px;   background: green;"></div>
</body>

</html>
<script type="text/javascript">
    var n = 99;

    function outer() {
        n=0;
        return ++n;
    }

    document.getElementById("div1").onclick = function() {
        this.innerHTML = outer();
    }
</script>

在这里插入图片描述
结果每次单击出现的结果都是一样的。因为每次单击调用outer函数时候，作用域中会重新创建一个n变量，而且n=0都要执行一次
第2步骤：如何让这个n保存在内存，且不重置值。考虑到作用域链，如果这个outer函数内部还有一个inner()函数，这个内部函数调用outer()的变量，那么JavaScript是不会回收这个变量n的。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包属性详解</title>
</head>

<body>
    <div id="div1" style="height: 100px;background: red;"></div>
    <div id="div2" style="height: 100px;margin: 10px;   background: green;"></div>
</body>

</html>
<script type="text/javascript">
    var n = 99;

    function outer() {
        n = 0;

        function inner() {
            return ++n;
        }
    }

    document.getElementById("div1").onclick = function() {
        this.innerHTML = outer();
    }
</script>

在这里插入图片描述

但显示打印的是undefined。运行查看发现单击调用的是outer()，它的函数体内没有返回值，
第3步骤：考虑到js中函数也可像变量一样当参数和返回值，所以把inner()整体做返回值，不但保留的n变量在作用域链，同时返回自加值。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包属性详解</title>
</head>

<body>
    <div id="div1" style="height: 100px;background: red;"></div>
    <div id="div2" style="height: 100px;margin: 10px;   background: green;"></div>
</body>

</html>
<script type="text/javascript">
    var n = 99;

    function outer() {
        n = 0;

        return function inner() {
            return ++n;
        }

    }

    document.getElementById("div1").onclick = function() {
        this.innerHTML = outer();
    }
</script>

在这里插入图片描述
但返回的是在这里插入图片描述
函数体，所以要在返回前，把函数赋给某个变量，得到结果
第4步骤：添加变量

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包属性详解</title>
</head>

<body>
    <div id="div1" style="height: 100px;background: red;"></div>
    <div id="div2" style="height: 100px;margin: 10px;   background: green;"></div>
</body>

</html>
<script type="text/javascript">
    var n = 99;

    function outer() {
        var n = 0;
        return function inner() {
            return ++n;
        }
    }

    var counter = outer(); //outer()函数执行返回的就是inner()函数

    document.getElementById("div1").onclick = function() {
        this.innerHTML = counter(); //所以执行counter()函数就是执行inner()函数，inner()函数有的作用域链，counter()函数也能同样保留。
    }
</script>

在这里插入图片描述

在这里插入图片描述
这样外部函数counter通过调用inner访问到了outer里定义的n;
外部函数调用内部函数的变量，或者平辈函数调用另一个函数的变量。都称为闭包。
在这里插入图片描述

很类似：你同学要借你爸的车用，做法却是约你去郊游。

3.两个计数器，记录点击次数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包属性详解</title>
</head>
<body >
<div id="div1" style="height: 100px;background: red;"></div>
<div id="div2" style="height: 100px;margin: 10px;   background: green;"></div>
</body>

</html>
<script type="text/javascript">
    var n=99;
    function outer() {
        var n=0;
        return function inner() {
            return ++n;
        }
    }

    var counter=outer();

    document.getElementById("div1").onclick=function () {
        this.innerHTML=counter();
    }

    var counter2=outer();
    document.getElementById("div2").onclick=function () {
        this.innerHTML=counter2();
    }
</script>

在这里插入图片描述
counter()和counter2()，虽然都把outer()赋给他，但各做各的，counter()和counter2()各自在内存中引起建立两套不同的outer()和它内部的n和inner。

在这里插入图片描述

如何形象的理解这个内容呢？
我们可以以篮球投篮类比：

function  投篮（）{
        记分牌=0；
        计分变量=function 投进（）{
                记分牌=记分牌+2；
             }
        return   计分变量；
}

单击div=function 投篮();
szmtjs10
关注
专栏目录
面试题-闭包
m0_67180694的博客
10-20 2009
闭包，闭包与立即执行函数，闭包面试题
一道JS前端闭包面试题解析
11-23
问题 代码A function fun(n,o){ console.log(o); return { fun:function(m){//[2] return fun(m,n);//[1] } } } var a=fun(0); a.fun(1); a.fun(2); a.fun(3); var b=fun(0).fun(1).fun(2).fun(3); var c=fun(0).fun(1); c.fun(2); c.fun(3); 求出程序输出 这是一个闭包测试题 转换为等价代码 return返回的对象的fun属性对应一个新建的函数对象，这个函
大部分人都会做错的经典JS闭包面试题
yan372397390的专栏
12-25 533
注：小编是一个有轻微处女座情节的人，所以很多内容为了方便阅读和格式美观，我都做成了图片，上传后头条都压缩了图片质量，但是不影响大家阅读，因为可以点击放大，哇哈哈！ 目录 由工作中演变而来的面试题 JS中有几种函数 创建函数的几种方式 三个fun函数的关系是什么？ 函数作用域链的问题 到底在
图解JavaScript闭包面试题
ONE0101的博客
09-12 205
由于最近在学习关于闭包相关的知识，并且闭包这个知识点让我有点搞不太清楚其具体的定义，所以在网上也查阅了很多大佬的讲解和对闭包的一个定义。 最后感觉还是MDN上的说法感觉比较好理解一些，对闭包还是不太理解的道友可以尝试看一看。 MDN上是这样说的：闭包是函数和声明该函数的词法环境的组合 原地址：https://developer.mozilla.org/zh-CN/docs/W...
JavaScript 闭包 面试题
weixin_30600197的博客
03-27 102
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...
分享一道关于闭包、bind和this的面试题
08-31
本文将通过一道具体的面试题来探讨这三个概念，并提供三种不同的解决方案。 首先，我们来看一下问题背景：我们需要为一个`<ul>`元素中的每个`<li>`子元素添加点击事件，当点击时，弹出对应`<li>`的索引值。这个问题...
JavaScript一道经典闭包面试题
chuangpare155193的博客
03-07 156
functionfun(n,o){ console.log(o); return{ fun:function(m){ returnfun(m,n); } }; } vara=fun(0);a.fun(1);a.f...
JavaScript闭包面试题详解
aiyx16521的博客
11-05 462
说说它们的输出情况 第一题 var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { return function () { return this.name; }; } }; console.log(object.getNameFunc()()); // The window // var f = obje
javascript闭包经典面试题
weixin_38166633的博客
06-29 1164
function fun(n,o) {    console.log(o)    return {      fun:function(m){        return fun(m,n);      }    }; } var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3); var
js闭包面试题
编程之路
02-22 1022
一个闭包面试题 function fun(n,o){ console.log(o); return { fun:function(m){ return fun(m,n); } }; } var a = fun(0);a.fun(1);a.fun(2);a.fun(3); var b = fun(0).fun(1).fun(2).fun(3); var c = fun(0).fun(1);c.fun(
Javascript中的闭包详解（closure）和相关面试题
青颜的天空的博客
06-15 649
闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。 一、变量的作用域 要理解闭包，首先必须理解Javascript特殊的变量作用域：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 var n=999; 　　function f1(){ 　　　　alert(n); 　　} 　　f1(); // 999
JavaScript（七）：闭包及相关面试题
qq_38763173的博客
03-01 165
如何产生闭包(条件) 函数嵌套 内部函数引用外部函数的局部变量 使用了外部函数（调用了外部函数） 闭包是什么 理解一: 闭包是嵌套的内部函数(绝大部分人) 理解二: 包含被引用变量(函数)的对象(极少数人) 理解三： 所谓的闭包是一个引用关系，该引用关系存在于内部函数中，引用的是外部函数的变量的对象(深入理解) 常见的闭包 将函数作为另一个函数的返回值 将函数作为实参传递给另一个函数调用...
Javascript闭包实例详解和常见面试题
高先生的猫
05-09 376
一.什么是闭包 闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数) 闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在函数执行完之后依旧保持没有被垃圾回收处理掉 二. 闭包的实例 // 创建闭包最常见的方式函数作为返回值 function foo() { var name = "kebi"; return function() { console.log(name); }; } var
再学Javascript的闭包及面试题
醉意流年的博客
09-10 184
1. 如何产生闭包(条件)? * 函数嵌套 * 内部函数引用外部函数的局部变量 * 使用内部函数 2. 闭包到底是什么? * 理解一: 闭包是嵌套的内部函数(绝大部分人) * 理解二: 包含被引用变量(函数)的对象(极少数人) * 理解三： 所谓的闭包是一个引用关系，该引用关系存在于内部函数中，引用的是外部函数的变量的对象(深入理解) 闭包 闭包形成的条件 - 函数嵌套 - 内部函数引用外部函数的局部变量 - 内部函数被使用，注意： 函数变量提升的时候如果内.
前端面试题——js闭包
Catie
09-21 845
要求：利用闭包原理模拟计数器 function count(){ //... } var f = count(); f(); //输出1 f(); //输出2 f(); //输出3 ... 答案： function count(){ var i=0; return function(){ console.log(++i); } }
闭包面试题
weixin_42069386的博客
01-26 919
  function a() {                      //外部闭包域 ,一个名为 a 的 Function 对象     var p = 0;                      //私有变量 p     var innerA = function () {      //内部闭包域 ,一个名为 innerA 的 Function 对象     console.lo...
深度解析：一不小心就做错的JavaScript闭包面试题
"本文主要探讨了JavaScript中的一个经典面试题，涉及到闭包的概念以及函数的性质，通过三个示例代码解析了闭包在函数调用中的行为。文章中还提到了JS中的两种函数类型——具名函数和匿名函数，并提供了获取函数名称...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

szmtjs10

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值