前端歌谣-第三课-关于闭包（壹）

前言

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

环境配置

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

运行结果