前端开发需要了解的知识之-闭包

jhhfft 发布于2019-08-21 15:29 / 2401人阅读

摘要：所以，父对象的所有变量，对子对象都是可见的，反之则不成立。参考资料阮一峰老师的学习闭包知乎上里的闭包是什么应用场景有哪些

什么是闭包

用一句话概括:函数外部可以访问函数内部的变量(不懂没关系,请往下面看)

闭包的原理 javascript作用域

对于函数外部的变量,函数内部可以访问

</>复制代码 
var n=1000;
function fn(){
    console.log(n);
}
fn();//输出1000

对于函数内部的变量,函数外部不可以访问

</>复制代码 
function fn(){
    var n=1000;
}
console.log(n)//n is not defined

如何从外部读取内部变量?

</>复制代码 
function fn(){
    var n=1000;
    function fn1(){
        return n;
    }
    return fn1;
}
var f=fn();
console.log(f());//1000

在上面的代码中，函数fn1就被包括在函数fn内部，这时fn内部的所有局部变量，对f1都是可见的。但是反过来就不行，f1内部的局部变量，对fn就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f1可以读取fn中的局部变量，那么只要把f1作为返回值，我们不就可以在fn外部读取它的内部变量了吗！

闭包的应用场景

</>复制代码 
//闭包自执行
var foo=function fn(){
    var n=1000;
    return {
        get_n:function(){
            return n;
        },
        set_n:function(new_n){
            n=new_n;
        }
    }
}();
//foo.n  访问不了,undefined
foo.set_n(999);//通过接口可以设置内部变量n
console.log(foo.get_n());//通过接口可以读取内部变量n

作者：甘洪翔
链接：https://www.zhihu.com/questio...
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

</>复制代码 
var Foo = function(){
      var name = "fooname";
      var age = 12;
      this.getName = function(){
          return name;
      };
      this.getAge = function(){
          return age;
      };
  };
  var foo = new Foo();
  foo.name;        //  => undefined
  foo.age;         //  => undefined
  foo.getName();   //  => "fooname"
  foo.getAge();    //  => 12

参考资料

阮一峰老师的:学习Javascript闭包（Closure）
知乎上:JavaScript 里的闭包是什么？应用场景有哪些？

GPU云服务器云服务器前端开发需要掌握的技术前端开发基础知识闭包知识前端开发需要掌握

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

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

JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同学去面试，做了两道面试题全部做错了，发过来给道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。排序算法 -- JavaScript 标准参考教程（alpha） - 前端 - 掘金来自《JavaScript 标准参考教程（alpha）》，by 阮一峰目录冒泡排序简介算法实现选择排序简介算法实现 ... 图例详解那道 setTimeout 与循环闭包的经典面...

enali 2019-08-20 16:36 评论0 收藏0
JS笔记

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。网络基础知识之 HTTP 协议详细介绍 HTT...

rottengeek 2019-08-22 13:58 评论0 收藏0
前端基础

摘要：谈起闭包，它可是两个核心技术之一异步基于打造前端持续集成开发环境本文将以一个标准的项目为例，完全抛弃传统的前端项目开发部署方式，基于容器技术打造一个精简的前端持续集成的开发环境。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日...

graf 2019-08-21 18:38 评论0 收藏0
javasscript - 收藏集 - 掘金

摘要：跨域请求详解从繁至简前端掘金什么是为什么要用是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。异步编程入门道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp？为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题...

Rango 2019-08-20 17:15 评论0 收藏0