閉包實際場景應用

qiudaoermu發表於2018-06-12
閉包概念大家已經耳熟能詳了 可是如果在面試中被問到閉包應用 經常會陷入小尷尬 下面介紹下本人總結的實際應用場景 

具體場景

1.函式防抖 

比如要縮放視窗 觸發onresize 事件 需要在這時候做一件事情,但是我們希望拖動的時候只觸發一次,比如

window.onresize = function(){
    console.log('onresize')//只想觸發一次
}複製程式碼

一般方法vs閉包

window.onresize = function(){
debounce(fn,1000)
}
 var fn = function(){    console.log('fn')
}
var time = ''
function debounce(fn,timeLong){
        if(time){
            clearTimeout(time)
            time = ''
        }

        time =setTimeout(function(){
         fn()
        },timeLong)
}複製程式碼
window.onresize = debounce(fn,500)

function debounce(fn){
        var timer = null
        return function(){
        if(timer){     //timer第一次執行後會儲存在記憶體裡 永遠都是執行器 直到最後被觸發
           clearTimeout(timer)
            timer = null
        }
        timer = setTimeout(function(){

            fn()
        },1000)
        
        }
    
}
var fn = function(){

    console.log('fn')
}

複製程式碼

2.使用閉包設計單例模式

class CreateUser {
    constructor(name) {
        this.name = name;
        this.getName();
    }
    getName() {
         return this.name;
    }
}
// 代理實現單例模式
var ProxyMode = (function() {
    var instance = null;
    return function(name) {
        if(!instance) {
            instance = new CreateUser(name);
        }
        return instance;
    }
})();
// 測試單體模式的例項
var a = ProxyMode("aaa");
var b = ProxyMode("bbb");
// 因為單體模式是隻例項化一次，所以下面的例項是相等的
console.log(a === b);    //true複製程式碼

3.為多個元件獨立屬性

假如我現在要在頁面中使用echarts畫6個線狀圖，需要6個容器 

需要為每個容器元素宣告一個獨立id,不然會混亂

 constructor(){
 this.state = {id: "EchartsLine"+Util.clourse()};
 }
componentDidMount() {


    this.myEChart =echarts.init(document.getElementById(this.state.id));//不同id
   
}
複製程式碼
<div
    id={this.state.id}
    
    className='echarts-line'>
</div>

複製程式碼
clourse(){
    let clourse = (function(){
        var a = 1;
        return function(){
            return a++;
        }
    })(this);
    this.clourse = clourse;
}
//使用數字命名 不用害怕被篡改複製程式碼

4.設定私有變數

內部屬性 在java裡使用private就可以,但是js 還沒有這個東東

   let _width = Symbol();

    class Private {
        constructor(s) {
            this[_width] = s
        }

        foo() {
            console.log(this[_width])
        }

    }

    var p = new Private("50");
    p.foo();
    console.log(p[_width]);//可以拿到複製程式碼

    //賦值到閉包裡
    let sque = (function () {
        let _width = Symbol();

        class Squery {
            constructor(s) {
                this[_width] = s
            }

            foo() {
                console.log(this[_width])
            }
        }
        return Squery
    })();

    let ss = new sque(20);
    ss.foo();
    console.log(ss[_width])複製程式碼

5.拿到正確的值（老掉牙的問題了?）

for(var i=0;i<10;i++){
    setTimeout(function(){
        console.log(i)//10個10
    },1000)
}複製程式碼

遇到這種問題 如何用解決呢

for(var i=0;i<10;i++){
((j)=>{
  setTimeout(function(){
        console.log(j)//1-10
    },1000)})(i)
  
}複製程式碼

原理是 宣告瞭10個自執行函式，儲存當時的值到內部



相關文章