Closure 闭包
Node.js Closure 闭包
Categories:
什麽是 Closure ?
- 当你有个
想保护起来
的状态,但又会不停地修改该状态,就可以使用闭包回传指定的修改方法,所以闭包接收的就是一个 function 内容。 - 一般 function 执行完之后,裡面的资源就会全部被释放掉( 垃圾回收机制 ),而 Closure 可以保存着裡面的状态
若资源不释放可能会造成 memory leak 问题,要注意
Closure 的好处
- 可以保存状态
- 不需要用到容易汙染的全域变数,也可以让外部修改到状态。
闭包是个 捕捉了外部函式变数
(或使之继续存活)的函式
const foo = () => {
let name = 'hi';
// closure 闭包函式
const bar = () => {
// 使用外层变数
// KJ
console.log(name);
}
bar();
}
foo();
基本上函式离开执行环境时,也会同时将佔用的记忆体空间给释放出来
。
例如以上 name 变数
应该在执行完毕就会在 memory (记忆体) 中被清掉。
但因为 closure 特性此 name 变数
还会继续被保留
运用 closure 特性让变数可以一直被保留并且做运算
var storyWriter = function(){
var story = "";
var addWords = function(string){
story = story + string
return story.trim();
}
var erase = function(){
story = "";
}
return {
addWords: addWords,
erase: erase
}
}
let writer = storyWriter();
writer.addWords('444');
writer.addWords('555');
let words = writer.addWords('666');
// 444555666
console.log(words);
取用变数范围
const globalVariable = `global variable`;
const outerFunc = (outerParam) => {
const outerVariable = `outer variable`;
let innerFunc = (innerParam) => {
const innerVariable = `inner variable`;
// 可取用全域变数
console.log(`[inner] globalVariable: ${globalVariable}`)
// 可取用外层变数
console.log(`[inner] outerVariable: ${outerVariable}`)
// 可取用本身变数
console.log(`[inner] innerVariable: ${innerVariable}`)
// 可取用外层参数
console.log(`[inner] outerParam: ${outerParam}`);
// 可取用本身参数
console.log(`[inner] innerParam: ${innerParam}`);
}
// 呼叫内部函式
innerFunc(`inner param`);
// 可取用全域变数
console.log(`<outer> globalVariable: ${globalVariable}`)
// 可取用本身变数
console.log(`<outer> outerVariable: ${outerVariable}`)
// 可取用本身参数
console.log(`<outer> outerParam: ${outerParam}`);
}
outerFunc(`outer param`);
// [inner] globalVariable: global variable
// [inner] outerVariable: outer variable
// [inner] innerVariable: inner variable
// [inner] outerParam: outer param
// [inner] innerParam: inner param
// <outer> globalVariable: global variable
// <outer> outerVariable: outer variable
// <outer> outerParam: outer param
闭包内的 this 变数
var myCar = {
color: `Blue`,
logColor: function() {
var self = this;
// In logColor — this.color: Blue
console.log(`In logColor — this.color: ` + this.color);
// In logColor — self.color: Blue
console.log(`In logColor — self.color: ` + self.color);
(function() {
// In IIFE — this.color: undefined
console.log(`In IIFE — this.color: ` + this.color);
// In IIFE — self.color: Blue
console.log(`In IIFE — self.color: ` + self.color)}
)()
},
}
myCar.logColor();
函数用新写法会变成不是
undefined
????
var myCar = {
color: `Blue`,
logColor: function() {
var self = this;
// In logColor — this.color: Blue
console.log(`In logColor — this.color: ` + this.color);
// In logColor — self.color: Blue
console.log(`In logColor — self.color: ` + self.color);
(() => {
// In IIFE — this.color: Blue
console.log(`In IIFE — this.color: ` + this.color);
// In IIFE — self.color: Blue
console.log(`In IIFE — self.color: ` + self.color)}
)()
},
}
myCar.logColor();
Closure 应用
快取,拿来避免重複的运算
// 假设 complex 要花费很多时间
function complex(num) {
console.log('caculating');
return num * num * num;
}
function Cache(func) {
let ans = {};
return function (num) {
if (ans[num]) {
// ans 有存过,直接回传
return ans[num];
}
// 没存过,丢入 ans 并回传
return ans[num] = func(num);
}
}
const CachedComplex = Cache(complex);
// 'caculating',1000 => 跑运算结果
console.log(CachedComplex(10));
// 1000 => 直接拿值
console.log(CachedComplex(10));
// 1000 => 直接拿值
console.log(CachedComplex(10));