js閉包的作用

在es6之前,js只具有函數(shù)作用域(缺少塊作用域),并通過閉包的內部的引用傳遞值。但是在es6之后,出現(xiàn)了let和const,實現(xiàn)了塊作用域。

函數(shù)套函數(shù)的方式可以創(chuàng)造出一個局部變量,這種方式就叫做閉包。

比如:

 function foo(){
     var local = 1
    function bar(){
       local++
    return local
   }
return bar
}
var func = foo()
func()

local和bar函數(shù)組成了一個閉包,外部不能直接獲取local的值,但是通過bar函數(shù)可以得到。

在實際應用中,比如在開發(fā)一款游戲,全局定義了主人公有幾條命,如果不希望別人不小心更改了這個值,就可以把它放在一個立即執(zhí)行的閉包里,有需要的時候調用閉包里的函數(shù)就可以了。

main.js

!function(){
   var lives = 50
   window.addLife = function(){  // 加一條命
     lives += 1
     console.log('現(xiàn)在有幾條life1--',lives)
   },
   window.decLife = function(){  // 減一條命
     lives -= 1
     console.log('現(xiàn)在有幾條life2--',lives)
   }
   window.getLife = function(){  // 獲取目前有多少條命
     return lives
   }
   console.log('現(xiàn)在有幾條life--',lives)
}()

helloWord.vue:

<template>
  <div class="hello">
    <p>顯示全局的Life:{{lifes}}</p>
    <button @click="addLife">加一條life</button>
    <button @click="decLife">減一條life</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      lifes:0
    }
  },
  mounted(){
     this.lifes = window.getLife()
  },
  method:{
    addLife(){
       window.addLife()
       this.lifes = window.getLife()
    },
     decLife(){
        window.decLife()
        this.lifes = window.getLife()
     },
  }
}
</script>

這樣就能通過調用函數(shù)的方式訪問和更改一個局部的生命值,從而避免產生全局變量,影響整體環(huán)境,增加代碼的兼容性。

由于匿名函數(shù)無法像普通函數(shù)一樣隨意調用,可以將它轉換為立即執(zhí)行函數(shù),以下為立即執(zhí)行函數(shù)的幾種寫法:

  • !fuction(){}()
  • ~fuction(){}()
  • +fuction(){}()
  • -fuction(){}()
  • void fuction(){}()
  • (fuction(){}())
  • (fuction(){})()
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容