关于闭包(壹)

爱学习的前端歌谣

发布于 2023-10-18 11:11:01

1240

发布于 2023-10-18 11:11:01

文章被收录于专栏：前端小歌谣

前言

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

环境配置

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

运行结果