知食记
搜索文档…
⌃K

闭包

定义

闭包是指那些能够访问自由变量的函数。
自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量。
var a = 1;
function foo() {
console.log(a);
}
foo();
上例函数 foo + foo 函数访问的自由变量 a也算是闭包。所以在《JavaScript权威指南》中就讲到:从技术的角度讲,所有的JavaScript函数都是闭包
但是从实践上意义的闭包定义为:
  1. 1.
    即使创建它的上下文已经销毁,它仍然存在(比如,内部函数从父函数中返回)
  2. 2.
    在代码中引用了自由变量

闭包的例子

function foo() {
var a = 2;
function bar() {
console.log( a );
}
return bar;
}
var baz = foo();
baz(); // 2 —— 朋友,这就是闭包的效果。
在 foo() 执行后,通常会期待 foo() 的整个内部作用域都被销毁,因为我们知道引擎有垃 圾回收器用来释放不再使用的内存空间。由于看上去 foo() 的内容不会再被使用,所以很 自然地会考虑对其进行 回收 。
而闭包的“神奇”之处正是可以阻止这件事情的发生。事实上内部作用域 没有被回收。谁在使用这个内部作用域?原来是 bar() 本身在使用。
拜 bar() 所声明的位置所赐,它拥有涵盖 foo() 内部作用域的闭包,使得该作用域能够一 直存活,以供 bar() 在之后任何时间进行引用。
bar() 依然持有对该作用域的引用,而这个引用就叫作闭包。

陷阱1

for ( var i=1; i<=5; i++) {
setTimeout( function timer() {
console.log( i );
}, i*1000 );
}
上诉代码,最后只会连续的输出6,而不是1到5。
这背后的原因是根据作用域的工作原理,实际情况是尽管循环中的五个函数是在各个迭代中分别定义的, 但是它们都 被封闭在一个共享的全局作用域中 ,因此实际上只有一个 i
这样说的话, 当然所有函数共享一个 i 的引用。循环结构让我们误以为背后还有更复杂的机制在起作用,但实际上没有。如果将延迟函数的回调重复定义五次,完全不使用循环, 那它同这段代码是完全等价的。
个人更多的理解是,参考event-loop机制,setTimeout是宏任务,不会被同步执行,会先注册。又由于在i*1000所有同步执行完后,真正执行timer时,i值已经被改变了
解决问题的方式是,更改成立即执行函数
for(var i=1;i<=5;i++){
(function(j){
setTimeout( function timer() {
console.log( j );
}, j*1000 );
})(i)
}
当然,更酷的是es6的写法:
for ( let i=1; i<=5; i++) {
setTimeout( function timer() {
console.log( i );
}, i*1000 );
}

陷阱2

function Foo() {
var i = 0;
return function() {
console.log(i++);
}
}
var f1 = Foo(),
f2 = Foo();
f1();
f1();
f2();
道题考察闭包引用类型对象的知识点: 1.一般来说函数执行完后它的局部变量就会随着函数调用结束被销毁,但是此题foo函数返回了一个匿名函数的引用(即一个闭包),它可以访问到foo()被调用产生的环境,而局部变量i一直处在这个环境中,只要一个环境有可能被访问到,它就不会被销毁,所以说闭包有延续变量作用域的功能。这就好理解为什么:
f1();//0
f1();//1
2.我一开始认为f1和f2都=foo()是都指向了同一个function引用类型,所以顺理成章就会答错认为:
f2();//2
但其实foo()返回的是一个匿名函数,所以f1,f2相当于指向了两个不同的函数对象,所以结果也就顺理成章的变为:
f2();//0

注意

如果上面的代码改成下面,结果会改变
const Foo = (function() {
var i = 0;
return function() {
console.log(i++);
}
})()
var f1 = Foo,
f2 = Foo;
f1(); // 0
f1(); // 1
f2(); // 2
其本质区别为, Foo变成立即运行函数,已经生成了确定的匿名函数地址,再分别分配给 f1和 f2

闭包的应用场景

vue 源码中 全局Api中的$watch方法中使用闭包
// 根据Vue的$watch原理实现的简易版$watch
Vue.prototype.$watch = function(exp, cb, options = {immediate: true, deep: false}) {
let watcher = new Watcher(this, exp, cb, options);
return () => {
watcher.unWatch();
};
}
应用
let obj = {
name: 'kiner',
age: 20
};
// 监听obj.name的改变
let unWatchName = this.$watch("obj.name",function(newVal, oldVal){
console.log(`新值:${newVal};旧值:${oldVal}`);
});
// 取消监听,取消后,obj.name的改变不再会通知
unWatchName()
这样实现的巧妙之处在于,我们无须关心要调用谁去取消监听,你怎么监听的,他就给你返回一个取消监听的方法,直接调用这个方法取消就可以了。

闭包应用

节流

防抖

缓存

const Id2NameMap = {};
const getNameById = function (id) {
if (Id2NameMap[id]) return Id2NameMap[id];
return new Promise(resolve => {
mockGetNameById(id, function (name) {
Id2NameMap[id] = name;
resolve(name);
})
});
}
Promise.resolve(getNameById(id)).then(name => {
console.log(name);
});

Once

/**
* Ensure a function is called only once.
*/
export function once (fn: Function): Function {
let called = false
return function () {
if (!called) {
called = true
fn.apply(this, arguments)
}
}
}
最近更新 2yr ago