在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(){})()