前言
大家好 我是歌谣 今天给大家带来的是关于闭包的学习 首先 去创建一个新项目
环境配置
npm init -y
yarn add vite -D
修改page.json配置端口
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite --port 3002"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vite": "^4.4.9"
}
}
代码演示
console.log("geyao")
function test() {
var a = 1;
var b = 2;
function test2() {
console.log(a, b)
}
debugger
test2()
}
test()
debugger代码
代码演示return
console.log("geyao")
function test() {
var a = 1;
var b = 2;
function test2() {
console.log(a, b)
}
return test2
}
const test2=test()
debugger
test2()
debugger代码
非闭包
function test2(){
console.log("123")
}
function test(){
var a=1;
return test2()
}
计算案例
function calculator(initnumber){
var num=Number(initnumber) || 0
function changeNumber(value){
num += value
}
function add(value){
changeNumber(value)
}
function minus(value){
changeNumber(-value)
}
function value(){
return num
}
return {
add,
minus,
value
}
}
const cal=calculator(100)
console.log(cal.value())
cal.add(5)
console.log(cal.value())
cal.minus(50)
console.log(cal.value())
运行结果
节流案例
<input id="textInput">
<script type="module" src="./indexdemo3.js">
</script>
const oInput=document.getElementById('textInput')
oInput.addEventListener('input',throttle(handler,800),false)
function handler(){
console.log(this.value)
}
function throttle(handler,delay){
var delay=delay||1000
var initTime=new Date().getTime();
return function(args){
var ctx=this
var currentTime=new Date().getTime()
if(currentTime-initTime>=delay){
handler.call(ctx,args)
initTime=currentTime
}
}
}
运行结果