underscore 소스 코드 분석의 기초 방법

underscore 소스 코드 분석의 기초 방법
본 고 는 underscore 소스 코드 분석 시리즈 의 두 번 째 편 으로 주로 underscore 에서 일부 기초 방법의 실현 을 소개 한다.
mixin
지난 글 underscore 전체 구조 분석 에서 우 리 는위의 방법 은 두 가지 마 운 트 방식 이 있 습 니 다. 하 나 는 마 운 트 입 니 다.구조 함수 상.map (arr) 의 형식 을 직접 호출 합 니 다.prototype 에서(arr). map () 의 형식 이 인 스 턴 스 로 호출 되 었 습 니 다.
언 더 스 코 리 아 소스 코드 를 한 번 뒤 져 보면 언 더 스 코 리 아 에 있 는 방법 이 바로 걸 려 있 음 을 알 수 있 습 니 다구조 함수 에서 이 루어 지지 만 mixin 방법 으로위의 방법 을 로 확장 합 니 다.prototype 위 에 있 습 니 다. 이 방법 들 은 직접 호출 할 수도 있 고 인 스 턴 스 를 통 해 호출 할 수도 있 습 니 다.

_.mixin = function(obj) {
    //   obj      
    _.each(_.functions(obj), function(name) {
        //        
        var func = _[name] = obj[name];
        _.prototype[name] = function() {
            //              
            var args = [this._wrapped];
            //         push    （       ，   func       ）
            push.apply(args, arguments);
            //     apply     func，       result
            return result(this, func.apply(_, args));
        };
    });
};

_.mixin(_);

이 코드 에서 알 수 있 듯 이 mixin 방법 은위의 모든 방법 은 옮 겨 다 니 는 형식 으로 마 운 트 되 었 습 니 다.prototype 위 에.
구조 함수 호출 과 원형 호출 의 차 이 는 어디 에 있 습 니까?맞습니다. 호출 방식 과 전 삼 이 차이 가 있 습 니 다. 구조 함수 호출 시 처리 할 값 을 첫 번 째 매개 변수 로 전달 하고 원형 호출 시 처리 할 값 을 에 전달 합 니 다.구조 함수 로 인 스 턴 스 를 만 듭 니 다.

var arr = [1, 2, 3]
var func = function(item) {
    console.log(item);
}
//        arr        
_.each(arr, func)
//        ，arr       _         
_(arr).each(func)
//     ，     
_.chain(arr).each(func)

지난 절 에서 우 리 는 하 나 를 만 들 고 있다 는 것 을 알 고 있다.의 인 스 턴 스 를 사용 할 때 this.wrapped 는 들 어 오 는 값 을 저장 하기 때문에 mixin 에 있 는 이 문장: var args = [this. wrapped];우 리 를args 배열 의 첫 번 째 항목 에 값 을 넣 은 다음 arguments 도 args 배열 에 넣 고 apply 방법 으로 현재 옮 겨 다 니 는 방법 (이 예 에서 each) 을 실행 합 니 다. 이때 each 방법 에 전 달 된 것 은 arr 와 func 입 니 다. 원래 와 직접 입 니 다.each 호출 each 입력 매개 변수 순 서 는 같 습 니 다 (underscore 의 방법 첫 번 째 항목 은 기본적으로 처리 해 야 할 데이터 입 니 다).
체인 호출
그럼 위 에 마지막 return result (this, func. apply (, args), result 는 무엇 을 합 니까?
먼저 result 소스 코드 를 살 펴 보 겠 습 니 다.

var result = function(instance, obj) {
    //             ，   ，                     ，    ，           
    return instance._chain ? _(obj).chain() : obj;
};
_.chain = function(obj) {
    //       
    var instance = _(obj);
    //        _chain           
    instance._chain = true;
    return instance;
};

우 리 는 underscore 에서 도 jQuery 와 유사 한 체인 호출 이 있다 는 것 을 알 고 있 습 니 다. 체인 호출 의 예 를 살 펴 보 겠 습 니 다.

var arr = [1, 2, 3]
var newArr = _.chain(a).map(function(item) {
    return item + 1
}).filter(function(item) {
    return item > 2
}).value()

체인 호출 의 관건 은 매번 방법 을 실행 한 후에 다른 방법 을 계속 호출 할 수 있 도록 인 스 턴 스 를 되 돌려 야 한 다 는 것 이다.chain 방법 은 들 어 오 는 obj 로 을 만 듭 니 다.의 인 스 턴 스, 이 인 스 턴 스 는 원형 상의 방법 을 호출 할 수 있 습 니 다.위의 mixin 의 실현 을 보면 원형 방법 을 호출 할 때마다 실 행 된 결 과 를 result 방법 에 전달 합 니 다. result 내부 에서 체인 호출 (chain) 을 사 용 했 는 지 여 부 를 판단 합 니 다. 체인 식 이 라면 결과 체인 화 (chain 에 들 어가 새로운 인 스 턴 스 를 만 듭 니 다) 를 되 돌려 줍 니 다.체인 호출 은 반드시 마지막 에 value 방법 을 실행 해 야 합 니 다. 그렇지 않 으 면 마지막 으로 대상 (마지막 으로 만 든 인 스 턴 스) 을 되 돌려 줍 니 다.
배열 함수
underscore 구조 방법 에 있어 push, pop, shift 등 배열 방법 을 직접적 으로 실현 하지 않 았 지만 체인 호출 을 할 때 이런 방법 을 사용 해 야 하기 때문에 원형 적 으로 이런 방법 에 대해 포장 을 했 고 실현 방법 은 mixin 과 유사 하 며 여 기 는 더 이상 설명 하지 않 습 니 다.

_.each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
    var method = ArrayProto[name];
    _.prototype[name] = function() {
    var obj = this._wrapped;
    method.apply(obj, arguments);
    //           ie  bug？
    if ((name === 'shift' || name === 'splice') && obj.length === 0) delete obj[0];
        return result(this, obj);
    };
});

_.each(['concat', 'join', 'slice'], function(name) {
    var method = ArrayProto[name];
    _.prototype[name] = function() {
        return result(this, method.apply(this._wrapped, arguments));
    };
});