web.jpeg
閉包
- 閉包是一種特殊的函數(shù)。
生一個閉包
當一個內(nèi)部函數(shù)引用了外部函數(shù)的數(shù)據(jù)(變量/函數(shù))時, 那么內(nèi)部的函數(shù)就是閉包
所以只要滿足"是函數(shù)嵌套"诗舰、"內(nèi)部函數(shù)引用外部函數(shù)數(shù)據(jù)"
比如:一個函數(shù)A訪問另外一個函數(shù)B的數(shù)據(jù)
閉包的作用
- 可以間接訪問封閉空間私有數(shù)據(jù)
- 獲取數(shù)據(jù)只能通過指定的接口
- 在設(shè)置數(shù)據(jù)的時候可以進行校驗處理
- 延長變量的生命周期
注意: 當后續(xù)不需要使用閉包時候, 一定要手動將閉包設(shè)置為null, 否則會出現(xiàn)內(nèi)存泄漏
function fn(){
var a =10;
return function(){
a++;
return console.log(a);
};
}
//訪問 局部變量
var f = fn();
f();
f();
// 如果 return a ; 就是延長局部變量的聲明周期
- 通過指定的方法獲取數(shù)據(jù) 和 對數(shù)據(jù)的處理
- getName獲取數(shù)據(jù)
- setName設(shè)置處理數(shù)據(jù)
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);
}
}
}
}
惰性函數(shù)
//惰性函數(shù): 做一次性初始化的操作
function foo(){
//初始化操作
console.log("foo");
//更新函數(shù)的執(zhí)行內(nèi)容，更新函數(shù)體
foo = function(){
console.log("oo-foo");
}
}
foo();
foo();
立即執(zhí)行函數(shù)
- 通用格式:
()(); - 作用:
將局部變量轉(zhuǎn)化為全局變量
(function(window){
var name_cc = "測試";
window.name_cc = name_cc;
console.log(window);
})(window);
console.log(name_cc);
不同形式的立即執(zhí)行函數(shù)
//匿名函數(shù)
+function(){
console.log("1");
}();
//匿名函數(shù)
-function(){
console.log("2");
}();
//匿名函數(shù)
!function(){
console.log("3");
}();
函數(shù)節(jié)流
- 函數(shù)節(jié)流就是控制這個函數(shù)執(zhí)行的次數(shù)頻率
- 減少代碼執(zhí)行次數(shù), 提升網(wǎng)頁性能
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("函數(shù)節(jié)流---")
},200);
};
當瀏覽器的尺寸發(fā)生變化的時候谦炒，就只執(zhí)行
window.onresize函數(shù)刚梭，在執(zhí)行的時候flag = true而!falg為flase,隨著瀏覽器尺寸不斷的變化，window.onresize調(diào)用的頻率就會增加饥臂，當?shù)?200毫秒時就執(zhí)行一次setTimeout的函數(shù)
//函數(shù)節(jié)流的封裝
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);
}
}
函數(shù)防抖
- 函數(shù)防抖是優(yōu)化高頻率執(zhí)行js代碼的一種手段
- 可以讓被調(diào)用的函數(shù)在一次連續(xù)的高頻操作過程中只被
調(diào)用一次 - 作用: 減少代碼執(zhí)行次數(shù), 提升網(wǎng)頁性能
oninput 輸入時觸發(fā)/ onmousemove 鼠標移動觸發(fā) / onscroll 頁面滾動時觸發(fā) / onresize 頁面縮放時觸發(fā) 等事件
//函數(shù)防抖的封裝
//注意: 1.函數(shù)的會點
//2.this的指向
//3.原來的的事件對象
function debounce(callBack,delay) {
let timer = null;
return function () {
let self = this;
//偽數(shù)組
let args = arguments;
timer&& clearTimeout(timer);
timer = setTimeout(function () {
if (callBack){
//借用函數(shù)
callBack.apply(self,args);
};
},delay||300);
}
}
input.oninput = debounce(function () {
console.log(this);
console.log(arguments);
},200);
函數(shù)節(jié)流和函數(shù)防抖區(qū)別
- 函數(shù)節(jié)流是
減少連續(xù)的高頻操作函數(shù)執(zhí)行次數(shù)(例如連續(xù)調(diào)用10次, 可能只執(zhí)行3-4次) - 函數(shù)防抖是讓連續(xù)的高頻操作時函數(shù)
只執(zhí)行一次(例如連續(xù)調(diào)用10次, 但是只會執(zhí)行1次)
