补个基础:闭包和this指针调用
//定义了一个普通的函数 const search(){ console.log(search) } //定义了一个防抖函数 function debounce(fn,delay){ let timer null return (...args){ clearTimeout(timer) timersetTimeout((){ //为什么要apply改变指针指向 fn.apply(this,args) console.log(this) },delay) } } //定义了一个btn变量 const btn { click:null } //定义了一个kk变量直接等于防抖函数的返回值 let kk debounce(search,100) //把btn的click属性等于防抖函数的返回值 btn.click debounce(search,100) //这里是调用 btn.click() kk() //请问打印的结果是什么 是window两个都是window为什么这里涉及两个知识点第一个叫做闭包第二个叫做this的指针指向调用它的这句话到底是什么意思闭包是什么一、闭包解决了什么核心问题 JS 里普通函数执行完内部变量会被自动销毁但有些场景我们需要保留变量 私有化变量不让外部随便改只暴露指定方法操作 持久化状态函数执行完变量依然保留下次调用能接着用 避免全局变量污染不用把变量挂在全局更安全 举个例子// 创建一个闭包函数functionmakeCounter(){// 这个变量就是【闭包私有变量】// 外部绝对访问不到不会被销毁let count0;// 返回一个内部函数形成闭包returnfunction(){count;returncount;};}// 创建第一个计数器constcounter1makeCounter();console.log(counter1());// 1console.log(counter1());// 2console.log(counter1());// 3// 创建第二个计数器完全独立互不干扰constcounter2makeCounter();console.log(counter2());// 1console.log(counter2());// 2因为你没有销毁这个counter2所以counter2内部的count依然存在会导致内存的被占用也就是内存的泄露 怎么释放 conter2null就可以了被置为null的会被垃圾回收器自动回收释放空间// 外部无法修改内部 count// console.log(count); // 报错count is not defined再举个例子比如防抖防抖就是我点了很多次我只希望执行最后一次 如果是一个普通的点击函数一定是点了8次调用了8次。但是我加个计时器点一次我重置一次计时器直到最后一次。 举个例子 有人进来电梯就重新计时 一直有人进门就一直不关 最后没人进了等几秒门才关上constsearch(){console.log(search)}//定义了一个防抖函数functiondebounce(fn,delay){let timernullreturn(...args){clearTimeout(timer)timersetTimeout((){//为什么要apply改变指针指向fn.apply(this,args)console.log(this)},delay)}}//定义了一个btn变量constbtn{click:null}//定义了一个kk变量直接等于防抖函数的返回值let kkdebounce(search,100)//把btn的click属性等于防抖函数的返回值btn.clickdebounce(search,100)console.log(this)的结果 如果是js环境运行全局是window如果是node.js是运行时环境就是global window和node.js只要没结束那你的变量就没销毁。一直在 那么这两个为什么是window和global呢this不是指向调用的东西吗我们读一读这个防抖函数//定义了一个普通函数constsearch(){console.log(search)}//定义了一个防抖函数functiondebounce(fn,delay){let timernullreturn(...args){//这个return了一个函数clearTimeout(timer)timersetTimeout((){//为什么要apply改变指针指向fn.apply(this,args)console.log(this)},delay)}}//定义了一个btn变量constbtn{click:null}//定义了一个kk变量直接等于防抖函数的返回值所以kk是一个函数还没调用的函数let kkdebounce(search,100)//把btn的click属性等于防抖函数的返回值也是一个函数还没调用的函数btn.clickdebounce(search,100)kk()//加个括号才是调用了btn.click()//加个括号才是调用了。打印结果是windowwindow为什么不是btn调用的吗怎么改变呢改成btn呢就是改成普通函数结束所以看this一定要看箭头函数和被谁调用的这里是btn.clickdebounce(search,100),所以debounce是一个函数 被赋值给了btn.click然后加上括号btn.click()才是调用了 也就是btn调用了它的click函数。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2473383.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!