关于闭包(壹)

 前言

 大家好 我是歌谣 今天给大家带来的是关于闭包的学习 首先 去创建一个新项目

环境配置

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
        }
    }
}

 运行结果

总结