前端開發(fā)需要了解的知識之-閉包

jhhfft 發(fā)布于2019-08-21 15:29 / 2344人閱讀

摘要：所以，父對象的所有變量，對子對象都是可見的，反之則不成立。參考資料阮一峰老師的學習閉包知乎上里的閉包是什么應用場景有哪些

什么是閉包

用一句話概括:函數外部可以訪問函數內部的變量(不懂沒關系,請往下面看)

閉包的原理 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外部讀取它的內部變量了嗎！

閉包的應用場景

//閉包自執(zhí)行
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...
來源：知乎
著作權歸作者所有。商業(yè)轉載請聯系作者獲得授權，非商業(yè)轉載請注明出處。

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云服務器云服務器前端開發(fā)需要掌握的技術前端開發(fā)基礎知識閉包知識前端開發(fā)需要掌握

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88205.html

JavaScript - 收藏集 - 掘金

摘要：插件開發(fā)前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優(yōu)雅的實現文件分片斷點續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

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

摘要：今天同學去面試，做了兩道面試題全部做錯了，發(fā)過來給道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。排序算法 -- JavaScript 標準參考教程（alpha） - 前端 - 掘金來自《JavaScript 標準參考教程（alpha）》，by 阮一峰目錄冒泡排序簡介算法實現選擇排序簡介算法實現 ... 圖例詳解那道 setTimeout 與循環(huán)閉包的經典面...

enali 2019-08-20 16:36 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協(xié)議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0
前端基礎

摘要：談起閉包，它可是兩個核心技術之一異步基于打造前端持續(xù)集成開發(fā)環(huán)境本文將以一個標準的項目為例，完全拋棄傳統(tǒng)的前端項目開發(fā)部署方式，基于容器技術打造一個精簡的前端持續(xù)集成的開發(fā)環(huán)境。這一次，徹底弄懂 JavaScript 執(zhí)行機制本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老鳥，不論是面試求職，還是日...

graf 2019-08-21 18:38 評論0 收藏0
javasscript - 收藏集 - 掘金

摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題...

Rango 2019-08-20 17:15 評論0 收藏0