共计 1712 个字符,预计需要花费 5 分钟才能阅读完成。
何为闭包
一个函数包裹另一个函数,被包裹的函数成为闭包函数,内部函数为闭包函数提供了一个闭包作用域???
根本案例
function outer() {
let bar = 'foo'
function inner() {
debugger
console.log(bar) // 闭包函数用到了内部函数的变量 bar
}
return inner
}
let foo = outer() // 执行内部函数返回外部函数
foo() // 执行外部函数
所以,闭包函数必须要被内部变量持有???
例二
function outer() {
let bar = 'foo'
function inner() {
debugger
console.log(bar)
}
inner() // 间接在内部函数中执行了闭包函数 inner}
outer()
所以,被包裹的闭包函数是否被内部变量持有并不是造成闭包的条件
例三
function outer() {
let bar = 'foo'
function inner() {console.log(bar)
}
function hello() {
// hello 没有应用内部 outer 函数的变量
debugger
}
hello()}
outer()
仍旧造成了闭包,因为 闭包作用域是外部所有闭包函数共享的,只有有一个外部函数应用到了内部函数的变量即可造成闭包
所以造成闭包的条件: 存在外部函数应用内部函数中定义的变量
利用场景
防抖和节流
见具体文章 https://segmentfault.com/a/11…
给元素伪数组增加事件
let li = document.querySelectorAll('li');
for(var i = 0; i < li.length; i++) {(function(i){li[i].onclick = function() {alert(i);
}
})(i)
}
柯里化
概念:把承受多个参数的函数变换成承受繁多参数的函数,并且返回承受余下的参数而且返回后果的新函数的技术
function currying(fn,...res1) {return function(...res2) {return fn.apply(null, res1.concat(res2))
}
}
function sayHello(name, age, fruit) {console.log(console.log(` 我叫 ${name}, 我 ${age} 岁了, 我喜爱吃 ${fruit}`))
}
const curryingShowMsg1 = currying(sayHello, '小明')
curryingShowMsg1(22, '苹果') // 我叫 小明, 我 22 岁了, 我喜爱吃 苹果
高级柯里化函数
function curryingHelper(fn, len) {
const length = len || fn.length // 第一遍运行 length 是函数 fn 一共须要的参数个数,当前是残余所须要的参数个数
return function(...rest) {
return rest.length >= length // 查看是否传入了 fn 所需足够的参数
? fn.apply(this, rest)
: curryingHelper(currying.apply(this, [fn].concat(rest)), length - rest.length) // 在通用 currying 函数根底上
}
}
function sayHello(name, age, fruit) {console.log(` 我叫 ${name}, 我 ${age} 岁了, 我喜爱吃 ${fruit}`) }
const betterShowMsg = curryingHelper(sayHello)
betterShowMsg('小衰', 20, '西瓜') // 我叫 小衰, 我 20 岁了, 我喜爱吃 西瓜
betterShowMsg('小猪')(25, '南瓜') // 我叫 小猪, 我 25 岁了, 我喜爱吃 南瓜
betterShowMsg('小明', 22)('倭瓜') // 我叫 小明, 我 22 岁了, 我喜爱吃 倭瓜
betterShowMsg('小拽')(28)('冬瓜') // 我叫 小拽, 我 28 岁了, 我喜爱吃 冬瓜
毛病
可能会引起内存泄露,具体见 https://segmentfault.com/a/11…
正文完
发表至: javascript
2021-03-22