>[success] # 閉包的作用 ~~~ 1.閉包的作用 --- 緩存數據,延長作用域鏈 ~~~ >[danger] ##### 緩存數據案例 ~~~ 1.需求：現在需要一個參數累積相乘的方法，但是如果出現的結果， 期望可以直接從緩存中取，舉個例子'1*2*3' 已經算過值了，不希望 在走一遍'1*2*3'的邏輯 ~~~ * 不利用閉包的思想做 ~~~ let cache = {} let mult = function (...args) { const key = args.toString() if(cache[key]){ console.log('走了緩存') return cache[key] } let count = 1 args.forEach(item=>{ count = count * item }) // 賦值后會返回賦值的值 return cache[key] = count } console.log(mult(1,2,3)) console.log(mult(1,2,3)) 打印結果： 6 走了緩存 6 ~~~ * es5 ~~~ var cache = {} let mult = function(){ // 輸入任一參數 var key = Array.prototype.join.apply(arguments) if(cache [key]){ console.log('緩存') return cache[key] } var count = 1 for(var i=0,num;num = arguments[i++];){ count*=num } return cache[key] = count } console.log(mult(1,2,3)) console.log(mult(1,2,3)) ~~~ * 簡潔點寫法 ~~~ const cache = {} let mult = function(){ // 緩存 就需要有key 把參數變成 逗號 分割形式 const arry = [].slice.call(arguments) const key = arry.join() if(mult[key] === undefined){ mult[key] = arry.reduce((acc,curr) => {return acc*curr},1) } return mult[key] } ~~~ * 利用閉包的思想來做 ~~~ 1.將需要的緩存對象一并放進 '方法中'，這樣就可以方法復用 ~~~ ~~~ let mult = (function () { let cache = {} return function(...args){ const key = args.toString() if(cache[key]){ console.log('走了緩存') return cache[key] } let count = 1 args.forEach(item=>{ count = count * item }) // 賦值后會返回賦值的值 return cache[key] = count } })() console.log(mult(1,2,3)) console.log(mult(1,2,3)) 打印結果： 6 走了緩存 6 ~~~ * 再次改進 ~~~ 1.下面的好處是將搭函數中的一些代碼塊隊里出來封裝到小函數中，可以 方便代碼的復用或者也起到了代碼的注釋的作用 ~~~ ~~~ let mult = (function () { let cache = {} const calculate = function (args) { let count = 1 args.forEach(item=>{ count = count * item }) return count } return function(...args){ const key = args.toString() if(cache[key]){ console.log('走了緩存') return cache[key] } // 賦值后會返回賦值的值 return cache[key] = calculate(args) } })() console.log(mult(1,2,3)) console.log(mult(1,2,3)) 打印結果： 6 走了緩存 6 ~~~ * 利用點es6的知識 ~~~ let mult = (function () { let cache = {} let f = (accumulator, currentValue)=>a*b return (...args)=>{ let key = args.toString() if(Reflect.has(cache,key)){ console.log('1') return cache[key] } return cache[key] = args.reduce(f) } })() console.log(mult(1,2,3)) console.log(mult(1,2,3)) 打印結果： 6 1 6 ~~~ >[danger] ##### 延續局部變量壽命 ~~~ 1.前端需要給后臺上傳數據的時候我們都知道需要使用'img'屬性 可以實現原因既可以跨域有可以方便傳輸如下： 2.下面的report函數并不是每一次都成功發起了HTTP請求。丟失數據的原因是 img是report函數中的局部變量，當report函數的調用結束后，img局部變量隨即 被銷毀，而此時或許還沒來得及發出HTTP請求，所以此次請求就會丟失掉。 ~~~ ~~~ function report(sev, msg){ var img = new Image(); img.src = "log.php?sev=" + encodeURIComponent(sev) + "&msg=" + encodeURIComponent(msg); } ~~~ * 利用閉包修正問題 ~~~javascript var report = (function(){ var imgs = []; return function( src ){ var img = new Image(); imgs.push( img ); img.src = src; } })(); ~~~ >[danger] ##### 利用閉包做一個類型判斷 ~~~ 1.相比把函數當作參數傳遞，函數當作返回值輸出的應用場景也有很多。 讓函數繼續返回一個可執行的函數，意味著運算過程是可延續的 ~~~ * 正常寫的類型判斷，有多少寫多少 ~~~ var isString = function( obj ){ return Object.prototype.toString.call( obj ) === '[object String]'; }; var isArray = function( obj ){ return Object.prototype.toString.call( obj ) === '[object Array]'; }; var isNumber = function( obj ){ return Object.prototype.toString.call( obj ) === '[object Number]'; }; ~~~ * 利用閉包 ~~~ 1.實際上，這些函數的大部分實現都是相同的，不同的 只是Object.prototype.toString.call(obj)返回的字符串。為了避免多余的代碼，= 可以把這些字符串作為參數提前傳入isType函數。代碼如下： 2.下面這種寫法是 thunk 函數 一種體現，它的基本思路都是接收一定的參 數，會生產出定制化的函數，最后使用定制化的函數去完成想要實現的功能 ~~~ [thunk 函數](https://zhuanlan.zhihu.com/p/404060484) ~~~ 1.var isType = function( type ){ return function( obj ){ return Object.prototype.toString.call( obj ) === '[object '+ type +']'; } }; var isString = isType( 'String' ); var isArray = isType( 'Array' ); var isNumber = isType( 'Number' ); console.log( isArray( [ 1, 2, 3 ] ) ); // 輸出：true ~~~ * 利用循環批量注冊 ~~~ var Type = {}; for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; ){ (function( type ){ Type[ 'is' + type ] = function( obj ){ return Object.prototype.toString.call( obj ) === '[object '+ type +']'; } })( type ) }; Type.isArray( [] ); // 輸出：true Type.isString( "str" ); // 輸出：true ~~~