제3장 폐쇄와 고급 함수

5560 단어

제3장 폐쇄와 고급 함수


3.1 패키지 닫기


3.1.1 변수의 작용역


3.1.2 변수의 생존주기

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)
}
var a = Type.isArray([]);//true
var b = Type.isString('str');//true
console.log(a);
console.log(b);

3.1.3 폐쇄의 더 많은 역할


1 패키지 변수
var mult = (function(){
    var cache = {};
    var calculate = function(){
        for(var i = 0, l = arguments.length; i<1; i++){
            a = a*arguments[i];
        }
        return a;
    };
    return function(){
        var args = Array.pototype.join.call(arguments,',');
        if(args in cache){
            return cache[args];
        }
        return cache[args] = calculate.apply(null,arguments);
    }
})()

2 국부 변수의 수명 연장

3.1.4 패키지 및 대상 설계

var extent = function(){
    var value = 0;
    return {
        call : function(){
            value++;
            console.log(value);
        }
    }
}

var extent = extent();
extent.call();
extent.call();
extent.call();

// 

var extent = {
    value:0,
    call:function(){
        this.value++;
        console.log(this.value);
    }
}
extent.call();//1
extent.call();//2
extent.call();//3


// 
var Exent = function(){
    this.value = 0;
}
Exent.prototype.call = function(){
    this.value+;
    console.log(this.value);
}
var extent = new Exent;
extent.call();//1
extent.call();//2
extent.call();//3

3.1.5 클러치로 명령 모드 구현




    
    Document




    
        var Tv = {
            open:function(){
                console.log(" ");
            },
            close:function(){
                console.log(" ")
            }
        };
        var OpenTvCommand = function(receiver){
            this.receiver = receiver;
        }
        OpenTvCommand.prototype.execute = function(){
            this.receiver.open();
        }
        OpenTvCommand.prototype.undo = function(receiver){
            this.receiver.close();
        }
        var setCommand = function(command){
            document.getElementById('execute').onclick = function(){
                command.execute();
            }
            document.getElementById('undo').onclick = function(){
                command.undo();
            }
        };
        setCommand(new OpenTvCommand(Tv));
        // , ( ) 

    



패키지 버전
var Tv = {
    open:function(){
        console.log(' ');
    },
    close:function(){
        console.log(' ');
    }
};

var createCommand = function(receiver){
    var execute = function(){
        return receiver.open();
    }
    var undo = function(){
        return receiver.close();
    }
    return {
        execute:execute,
        undo:undo
    }
};

var setCommand = function(command){
    document.getElementById('execute').onclick = function(){
        command.execute();
    }
    document.getElementById('undo').onclick = function(){
        command.undo();
    }
};
setCommand(createCommand(Tv));

3.1.3 클로즈업 및 메모리 관리


C++ COM 객체로 BOM 및 DOM COM 객체의 스팸 수집 메커니즘은 참조 계수 정책을 사용합니다.
순환 인용 중인 변수를null로 설정

3.2 고급 함수


3.2.1 함수를 매개 변수로 전달


1 콜백 함수
var appendDiv = function(){
    for(var i = 0; i<100; i++){
        var div = document.createElement('div');
        div.innerHTML = i;
        document.body.appendChild(div);
        if(typeof callback === 'function'){
            callback(div);
        }
    }
}
appendDiv(function(){
    node.style.display = 'none'
});

2Array.prototype.sort
[1,4,3].sort(function(a,b){
    return a-b;
})   //[1,3,4]

[1,4,3].sort(function(a,b){
    return b-a;
}) //[4,3,1]

3.2.2 함수를 반환값으로 출력


1 데이터의 유형 판단
var isType = function(type) {
    return function(obj){
        return Object.prototype.toString.call(obj) ==='[object ' + type+']';
    }
}
var isString = isType('Sting');
var isArray = isType('Array');
var isNumber = isType('Number');
console.log(isArray([1,2,3])); //true 

2getSingle
var getSingle = function(fn){
    var ret;
    return function(){
        return ret || (ret = fn.apply(this,arguments))
    }
}

var getSingle = getSingle(function(){
    return document.createElement('script');
})

var script1 = getSingle();
var script2 = getSingle();
console.log(script1===script2); 

3.2.3 고급 함수 AOP 구현

Function.prototype.before = function(beforefn){
    var _self = this;
    return function(){
        beforefn.apply(this,arguments);
        return _self.apply(this,arguments);
    }
}

Function.prototype.after = function(afterfn){
    var _self = this;
    return function(){
        var ret = _self.apply(this,arguments);
        afterfn.apply(this,arguments);
        return ret;
    }
};

var func = function(){
    console.log(2);
}
func = func.before(function(){
    console.log(1);
}).after(function(){
    console.log(3);
});
func();

좋은 웹페이지 즐겨찾기