js函數(shù)閉包了解一下

Forelax 發(fā)布于2019-08-26 10:38 / 2837人閱讀

摘要：?jiǎn)栴}匿名函數(shù)的執(zhí)行具有全局性，所以閉包函數(shù)的一般指向，因?yàn)槔锩娴拈]包函數(shù)是在作用域下執(zhí)行的，也就是說(shuō)，指向可以改寫(xiě)成如下，內(nèi)存泄漏問(wèn)題如果閉包在作用域鏈中保存著元素，則該元素內(nèi)存將無(wú)法自動(dòng)銷毀。

介紹你下你理解的閉包？不管怎樣！我最近聽(tīng)到很多次！感覺(jué)是不好好總結(jié)一下沒(méi)法面對(duì)那些犀利的追問(wèn)！
如果覺(jué)得閉包理解的很透徹，就直接跳到最后看題目！

1.閉包概念

小紅書(shū)的解釋閉包是有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。明白了嗎？就是一個(gè)函數(shù)，一個(gè)可以訪問(wèn)其他函數(shù)中變量的函數(shù)。所以常見(jiàn)的創(chuàng)建閉包的方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。

function bag(num){
    return function(){
        return num
    }
}
var bagc = bag(12)
console.log(bagc()) //12

可以看到在bag內(nèi)部的匿名函數(shù)可以訪問(wèn)外部bag函數(shù)的變量num。

2.閉包的用處

閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。

function f1(){

　    var n=999;

　　   nAdd=function(){n+=1}

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

}

var result=f1();

result(); // 999 

nAdd(); //變量n被保存了

result(); // 1000

上面是阮一峰在文檔中的一個(gè)例子，讀取函數(shù)內(nèi)部變量我覺(jué)得用處一般吧，讓變量保持在內(nèi)存中的用處倒是不少，像經(jīng)常使用的that=this等。下面看一個(gè)常見(jiàn)的問(wèn)題：

 for(var i = 0;i <10;i++){
     setTimeout(()=>{
        console.log(i)
     },1000)
  }
  //上面的代碼我們希望按照索引值打印，結(jié)果卻打印了10個(gè)10，為什么就不解釋了，i是全局變量。
  //換成下面的寫(xiě)法，就能解決問(wèn)題，正是因?yàn)殚]包 讓變量的值始終保持在內(nèi)存中，每個(gè)i都存在了num這個(gè)局部變量中    
        
  for(var i = 0;i <10;i++){
      (function(num){
         setTimeout(()=>{
            console.log(num)
         },1000)
       })(i)
   }

3.使用閉包需要注意的點(diǎn)

閉包雖然在解決一些問(wèn)題上有好處，但是由此引發(fā)的一些問(wèn)題要注意，而且由于閉包會(huì)攜帶外部函數(shù)作用域，所以內(nèi)存占用比較大，所以盡量少用、慎用閉包。

1.變量問(wèn)題

正是因?yàn)殚]包可以使用外部變量，所以下面的代碼中，返回的匿名函數(shù)中對(duì)變量i的使用將會(huì)是最終的值，數(shù)組中存放的函數(shù)的返回值將都會(huì)是10。

function test() {
   var result = [];
   for(var i = 0; i<10; i++）{
      result.[i] = function () {
         return i;
      }
   }
   return result
}

需要將上述代碼改寫(xiě)成如下：

function test() {
   var result = [];
   for(var i = 0; i<10; i++）{
      result.[i] = function (num) {
         return function() {
           console.info(num);  
         }
      }(i)
   }
   return result
}

此時(shí)訪問(wèn)的num，是上層函數(shù)執(zhí)行環(huán)境的num，數(shù)組有10個(gè)函數(shù)對(duì)象，每個(gè)對(duì)象的執(zhí)行環(huán)境下的number都不一樣。

2.this問(wèn)題

匿名函數(shù)的執(zhí)行具有全局性，所以閉包函數(shù)的this一般指向window；

var object = {
     name: "object"，
     getName:function() {
        return function() {
             console.info(this.name)
        }
    }
}
object.getName()()    // underfined
// 因?yàn)槔锩娴拈]包函數(shù)是在window作用域下執(zhí)行的，也就是說(shuō)，this指向windows

可以改寫(xiě)成如下：

var object = {
     name: "object"，
     getName:function() {
        var that = this;
        return function() {
             console.info(that.name)
        }
    }
}
object.getName()()    // object

3.內(nèi)存泄漏問(wèn)題

如果閉包在作用域鏈中保存著html元素，則該元素內(nèi)存將無(wú)法自動(dòng)銷毀。

function  showId() {
    var el = document.getElementById("app")
    el.onclick = function(){
      aler(el.id)   // 這樣會(huì)導(dǎo)致閉包引用外層的el，當(dāng)執(zhí)行完showId后，el無(wú)法釋放
    }
}

// 改成下面
function  showId() {
    var el = document.getElementById("app")
    var id  = el.id
    el.onclick = function(){
      aler(id)   // 這樣會(huì)導(dǎo)致閉包引用外層的el，當(dāng)執(zhí)行完showId后，el無(wú)法釋放
    }
    el = null    // 主動(dòng)釋放el
}

4.閉包練習(xí)題

好了，看到這里是不是感覺(jué)對(duì)閉包理解的很到位了？別著急，看看這兩個(gè)小問(wèn)題測(cè)試一下！

1.與函數(shù)調(diào)用結(jié)合

var Test = {
    close:function(val){
        return function (z){
            return ++ val +z
        }
    }
}
var getClose = function(val){
    return Test[val]
}                         
var fn = getClose("close")
var cover = fn(100)
console.log(cover(200)) 
console.log(cover(300))
console.log(fn(100)(200))
console.log(fn(100)(200))
console.log(getClose("close")(100)(300))

//輸出結(jié)果見(jiàn)結(jié)尾處

2.與dom結(jié)合

var container1 = document.getElementById("container1")
var container2 = document.getElementById("container2")
var container3 = document.getElementById("container3")
var container4 = document.getElementById("container4")
var container5 = document.getElementById("container5")

var innerHTML = "window的html"
var events = {
    innerHTML:"我是events",
    getHtml:function (){
        console.log(this.innerHTML)
    },
    setFun:function(){
        return this.getHtml
    },
    proxy:function(){
        var self = this;
        return function(){
            self.getHtml()
        }
    }
}
container1.onclick = events.getHtml; 
container2.onclick = events.setFun();
container3.onclick = events.proxy();
container4.onclick = function(){
    window.setTimeout(events.setFun(),0)
}
container5.onclick = function(){
    window.setTimeout(events.proxy(),0)
}

還ok？有沒(méi)有被繞暈！暈了就打開(kāi)電腦敲吧

看一下輸出結(jié)果吧
第一題：401 402 301 301 401
第二題：container container2 我是events window的html 我是events

云服務(wù)器 GPU云服務(wù)器 PHP閉包函數(shù) 閉包函數(shù)python js閉包 js閉包的理解

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/106511.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Forelax

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow安裝步驟

閱讀 1255·2023-04-26 02:38
tensorflow是

閱讀 941·2023-04-25 20:13
Java設(shè)計(jì)模式之（三）——建造者模式

閱讀 3594·2021-11-19 11:31
通訊錄式的吸頂效果

閱讀 2401·2019-08-30 15:55
讓多個(gè)元素貼邊平分布局

閱讀 2726·2019-08-30 14:11
關(guān)于IT培訓(xùn)機(jī)構(gòu)的個(gè)人看法

閱讀 3163·2019-08-30 13:45
基于vue的日歷APP

閱讀 1379·2019-08-29 18:41
前端小姐姐學(xué)PHP之（一）

閱讀 1151·2019-08-29 16:18

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

js函數(shù)閉包了解一下

相關(guān)文章

**前端基礎(chǔ)進(jìn)階（六）：在chrome開(kāi)發(fā)者工具中觀察函數(shù)調(diào)用棧、作用域鏈與閉包**

閉包不能吃...

JavaScript - 收藏集 - 掘金

一次搞定this和閉包

10個(gè)流行的JavaScript面試題

發(fā)表評(píng)論

0條評(píng)論

Forelax

男|高級(jí)講師

TA的文章

tensorflow安裝步驟

tensorflow是

Java設(shè)計(jì)模式之（三）——建造者模式

通訊錄式的吸頂效果

讓多個(gè)元素貼邊平分布局

關(guān)于IT培訓(xùn)機(jī)構(gòu)的個(gè)人看法

基于vue的日歷APP

前端小姐姐學(xué)PHP之（一）

最新活動(dòng)