web.jpeg
闭包
- 闭包是一种特殊的函数。
生一个闭包
当一个内部函数引用了外部函数的数据(变量/函数)时, 那么内部的函数就是闭包
所以只要满足"是函数嵌套"、"内部函数引用外部函数数据"
比如:一个函数A访问另外一个函数B的数据
闭包的作用
- 可以间接访问封闭空间私有数据
- 获取数据只能通过指定的接口
- 在设置数据的时候可以进行校验处理
- 延长变量的生命周期
注意: 当后续不需要使用闭包时候, 一定要手动将闭包设置为null, 否则会出现内存泄漏
function fn(){
var a =10;
return function(){
a++;
return console.log(a);
};
}
//访问 局部变量
var f = fn();
f();
f();
// 如果 return a ; 就是延长局部变量的声明周期
- 通过指定的方法获取数据 和 对数据的处理
- getName获取数据
- setName设置处理数据
function demo (){
var name = "cc";
var age = 18;
return function(){
return {
getName:function(){
return name;
},
setName:function(newName){
if(newName){
name = newName;
}
return name;
},
getAge:function(){
return age;
},
setAge:function(newAge){
if(newAge < 0){
newAge = 0;
}
return (age = newAge);
}
}
}
}
惰性函数
//惰性函数: 做一次性初始化的操作
function foo(){
//初始化操作
console.log("foo");
//更新函数的执行内容，更新函数体
foo = function(){
console.log("oo-foo");
}
}
foo();
foo();
立即执行函数
- 通用格式:
()(); - 作用:
将局部变量转化为全局变量
(function(window){
var name_cc = "测试";
window.name_cc = name_cc;
console.log(window);
})(window);
console.log(name_cc);
不同形式的立即执行函数
//匿名函数
+function(){
console.log("1");
}();
//匿名函数
-function(){
console.log("2");
}();
//匿名函数
!function(){
console.log("3");
}();
函数节流
- 函数节流就是控制这个函数执行的次数频率
- 减少代码执行次数, 提升网页性能
let timer = null;
let flag = true;
window.onresize = function () {
if (!flag){
return
};
flag = false;
timer&&clearTimeout(timer);
timer = setTimeout(function () {
flag = true;
resetSize();
console.log("函数节流---")
},200);
};
当浏览器的尺寸发生变化的时候，就只执行
window.onresize函数，在执行的时候flag = true而!falg为flase,随着浏览器尺寸不断的变化，window.onresize调用的频率就会增加，当到200毫秒时就执行一次setTimeout的函数
//函数节流的封装
function throttle(callBack,delay) {
let timer = null;
let flag = true;
return function () {
//判断
if (!flag) return;
flag = false;
let self = this;
let args = arguments;
timer && clearTimeout(timer);
timer = setTimeout(function () {
flag = true;
callBack.apply(self,args);
},delay || 500);
}
}
函数防抖
- 函数防抖是优化高频率执行js代码的一种手段
- 可以让被调用的函数在一次连续的高频操作过程中只被
调用一次 - 作用: 减少代码执行次数, 提升网页性能
oninput 输入时触发/ onmousemove 鼠标移动触发 / onscroll 页面滚动时触发 / onresize 页面缩放时触发 等事件
//函数防抖的封装
//注意: 1.函数的会点
//2.this的指向
//3.原来的的事件对象
function debounce(callBack,delay) {
let timer = null;
return function () {
let self = this;
//伪数组
let args = arguments;
timer&& clearTimeout(timer);
timer = setTimeout(function () {
if (callBack){
//借用函数
callBack.apply(self,args);
};
},delay||300);
}
}
input.oninput = debounce(function () {
console.log(this);
console.log(arguments);
},200);
函数节流和函数防抖区别
- 函数节流是
减少连续的高频操作函数执行次数(例如连续调用10次, 可能只执行3-4次) - 函数防抖是让连续的高频操作时函数
只执行一次(例如连续调用10次, 但是只会执行1次)
