从一个小题目谈谈js函数闭包

JasinYip 发布于2019-08-20 11:28 / 3069人阅读

摘要：先来看一个问题题目前端当然这里输出的是结果是前端如果现在将变成那么输出的结果就会变成解答其实这题并不是很难，第一句其实是定义了两个全局的变量，在利用的闭包内用重新定义了而没有重新定义我们知道在默认情况下如果不用定义的变量都会变成全局变量，所

先来看一个问题 题目

var str1 = str2 = "web";
(function () {
var str1 = str2 = "前端";
})();
console.log(str2);

当然这里输出的是结果是: 前端

如果现在将console.log(str2)变成consloe.log(str1),那么输出的结果就会变成 web

解答

其实这题并不是很难，第一句 var str1 = str2 = "web"; 其实是定义了两个全局的变量，在利用function的闭包内用 var 重新定义了 str1 而没有重新定义 str2

我们知道在默认情况下如果不用 var 定义的变量都会变成全局变量，所以此时在function闭包内的str2就是引用了全局变量，所以赋值操作当然也就能赋予全局变量 str2 所以输出 str2 结果是 "前端"

而 str1 用了 var 定义，就是在function闭包内的变量，闭包外自然不可以改变，所以输出的结果是 "web"

脑洞大开

其实每一次看到这种形式的代码

(function(){
})()

都觉得非常的新鲜，觉得这里有很多东西可以专研，所以在这里也总结一下这种形式的闭包。

解释前先看看

首先这种形式的闭包是人为的加上去，并不是说可以有什么神奇的 duangduang 的特效，而是可以避免很多本来是局部变量可以搞定的比较 low 的变量去污染全局的变量

其次在js中，是 没有块作用域 这种说法
首先我们回到C++,如果有一段代码是这样

    int number1=10;
    if(true){
      int number1 = 5;
    }
    cout<
这里的结果还是 10  
而在js代码之中
    var str1= "web";
    if(true){
        var str1="前端";
    };
    console.log(str1);
这里的结果就是 前端
因为 if{} 没有块作用域，所以内部的str1直接就重定义了外部全局的str1，所以输出的结果就只是"前端"了，而且这也污染了全局变量（那个等于"web"的str1已经不见了踪影）
而大 js 只有 函数作用域
所以我们要利用函数闭包
利用函数闭包能有效的封装局部的变量，而不污染全局作用域
    str1 = "web";
    (function () {
         var str1 = "前端";

         //str1剩下的功能
    )();
    console.log(str1);
此时输出的还是 web
所以我们利用了一个匿名函数 function(){} 并且让他自己调用自己执行函数内部的操作 并且 str1 也没有污染到外部的全局作用域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80595.html

从一道面试题谈谈函数柯里化(Currying)

摘要：忍者秘籍一书中，对于柯里化的定义如下在一个函数中首先填充几个参数然后再返回一个新函数的技术称为柯里化。回到我们的题目本身，其实根据测试用例我们可以发现，函数的要求就是接受单一函数，例如但是与柯里化不同之处在于，柯里化返回的一个新函数。　　欢迎大家再一次来到我的文章专栏:从面试题中我们能学到什么，各位同行小伙伴是否已经开始了悠闲的春节假期呢?在这里提前祝大家鸡年大吉吧~哈哈，之前有人说...

cppprimer 2019-08-20 13:55 评论0 收藏0
我遇到的前端面试题2017

摘要：箭头函数与传统函数的区别，主要集中在以下方面没有和绑定，这些值由最近一层非箭头函数决定。不能通过关键字调用，所以不能用作构造函数，否则程序会抛出错误。声明的全局变量不是全局对象的属性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首发于我的博客：http://blog.du...

muddyway 2019-08-01 17:35 评论0 收藏0
我遇到的前端面试题2017

摘要：箭头函数与传统函数的区别，主要集中在以下方面没有和绑定，这些值由最近一层非箭头函数决定。不能通过关键字调用，所以不能用作构造函数，否则程序会抛出错误。声明的全局变量不是全局对象的属性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首发于我的博客：http://blog.du...

Lucky_Boy 2019-08-21 16:22 评论0 收藏0
我遇到的前端面试题2017

摘要：箭头函数与传统函数的区别，主要集中在以下方面没有和绑定，这些值由最近一层非箭头函数决定。不能通过关键字调用，所以不能用作构造函数，否则程序会抛出错误。声明的全局变量不是全局对象的属性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首发于我的博客：http://blog.du...

forrest23 2019-08-29 13:23 评论0 收藏0
前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

答案自己谷歌或百度找。一、来源背景面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...

Kerr1Gan 2019-08-26 12:20 评论0 收藏0