Javascript의 교체기, 생성기, 교체 프로토콜

This post was originally published on my website

만약 자바스크립트를 한동안 작성했다면, 자바스크립트에서 어떤 데이터 형식이 교체할 수 있는지 잘 알 수 있을 것입니다.만약 당신이 아니거나 정수리에서만 기억이 나지 않는다면 String,Array,Map,Set,TypedArray,Array와Map입니다.

But Varun, except String isn't everything here an implementation of Object?

확장 가능한 프로토콜

네가 이렇게 생각하는 것은 절대적으로 옳다.어쨌든그렇다면 무엇이 Set,TypedArray,Object와Symbol.iterator를 교체할 수 있지만 그렇지 않은 함수로 만들었을까?콘솔을 열어 봅시다.

Array.prototype[Symbol.iterator]
Map.prototype[Symbol.iterator]
Set.prototype[Symbol.iterator]
Int16Array.prototype[Symbol.iterator]
Object.prototype[Symbol.iterator]

마지막 문장을 제외하고는 줄마다 함수가 되돌아오는 것을 알아차렸을 것이다.모든 나머지 대상 유형은 원형 체인에 Object라는 속성이 있습니다.이 속성은 undefined에서 사용할 수 없기 때문에 되돌아갑니다Symbol.iterator.따라서 교체 가능한 대상에 대해iterable 프로토콜을 실현해야 한다. 이것은 주어진 대상이 원형 체인에 있어야 한다는 것을 의미한다Symbol.iterator.Object는 매개 변수가 없고 되돌아오는 함수이다.되돌아오는 Object 은 교체기 프로토콜의 약정에 따라야 한다.

반복자 프로토콜

교체기 프로토콜은 교체기의 대상에 대해 값을 되돌려 주는 표준 방식이 있다고 성명한다.Symbol.prototype에서 반환된 객체에 다음 두 가지 속성을 반환하는 방법next이 있는 경우 반복자 프로토콜을 따릅니다.

[부울 값] 완료
교체 서열이 완성되었는지 여부를 나타내는 브리 값

가치
교체할 때 되돌아오는 모든 값입니다.done가 true인 경우 옵션

저희가 지금까지 배운 걸 증명해 보도록 하겠습니다.

const map = new Map()
mapIterator = map[Symbol.iterator]()
mapIterator.next          // function next()

이것은 Map 실현을 의미한다

이식 가능 프로토콜

왜냐하면 그의 원사슬에는 Symbol.iterator이 있기 때문이다.

교체기 프로토콜

,iterable 프로토콜이 하나Object로 되돌아오기 때문에 그 중에는 방법next이 포함되어 있습니다.

실행 중인 교체 프로토콜

우리들은 우리의 이론으로 실제 데이터 유형을 테스트합시다

const string = "Hello"
const stringIterator = string[Symbol.iterator]()
stringIterator.next()       // Object { value: "H", done: false }
stringIterator.next()       // Object { value: "e", done: false }
stringIterator.next()       // Object { value: "l", done: false }
stringIterator.next()       // Object { value: "l", done: false }
stringIterator.next()       // Object { value: "o", done: false }
stringIterator.next()       // Object { value: undefined, done: true }

우리는 방금 Stringiterable와iterator 프로토콜을 실현했다는 것을 증명했다.많은 구조(예를 들어...of,spread,disstructuring,yield 등)가 백엔드에서 교체 프로토콜을 실현한다.다른 데이터 형식에 대해서도 같은 방법을 시도할 수 있습니다. 결과는 비슷할 것입니다.

const map = new Map()
map.set('a', 1)
map.set('b', 2)
const mapIterator = map[Symbol.iterator]()
[...mapIterator]

사용자 정의 교체 프로토콜

So basically my object should have a property Symbol.iterator which is a method and should return me an Object which should have a next method in it, calling which should give me a done and value property? That shouldn't be hard to create.

사실이 증명하듯이 사실은 결코 그렇지 않다.😄

const customIteratationProtocol = (start, end) => ({
    [Symbol.iterator]: () => {
        let startIndex = start;
        return {
            next: () => {
                if(startIndex !== end){
                    return {
                        value: startIndex += 1,
                        done: false
                    }
                }
                return {
                    done: true
                }
            }
        }
    }
});

const customIteratationProtocolInstance = customIteratationProtocol(1, 3);
const customIterationProtocolObj = customIteratationProtocolInstance[Symbol.iterator]()
customIteratationProtocolInstance.next();  // Object { value: 2, done: false }
customIteratationProtocolInstance.next();  // Object { value: 3, done: false }
customIteratationProtocolInstance.next();  // Object { done: true }

iterable 프로토콜이나 교체기 프로토콜을 실현할 수 있지만, 이러한 대상이iterable 구조로 사용되어야 한다면, 실행 중 오류가 발생할 수 있습니다.iterable 프로토콜을 실현하지만 교체기 프로토콜을 실현하지 않는 대상을 비양구iterable라고 한다.

발전기

JavaScript의 생성기는 특수한 함수로서 실행이 연속되지 않습니다.함수 구조에서 내부 상태를 만들 수 있습니다.이 함수의 값은 yield 키워드를 만났을 때만 되돌아옵니다.생성기는 function* 문법에 의해 정의된다.생성기 함수는 n회 실례화할 수 있지만, 모든 실례화 대상은 생성기에서 한 번만 교체할 수 있다.그러나 화살표 함수가 있는 생성기는 사용할 수 없습니다.

function* myGenerator(n) {
    let index = n;
    while(true) {
        yield index += 1;
    }
}
const myGeneratorObj = myGenerator(2);
myGeneratorObj.next().value;      // 3
myGeneratorObj.next().value;      // 4
myGeneratorObj.next().value;      // 5

발전기는 정말 쓸모가 있습니까?😕

비록 교체기는 자바스크립트 엔진의 좋은 개념이지만, 나는 개인적으로 자바스크립트에서 생성기를 사용한 적이 없다.마찬가지로 자바스크립트와 같은 전형적인 언어에서 나는 ES6 생성기가 해결하려고 하는 용례를 정말 이해하지 못한다.내가 보기에 생성기는 언어에 많은 복잡성을 가져왔다. 원인은 다음과 같다.

구조 함수 만들기

그리고 이 구조 함수

에서 방법을 만듭니다.

이 값은 최종적으로 이 방법 호출

의 대상 내부에 위치한다
이것은 성능 비용을 초래하고 일회용 물건을 많이 도입했다.나는 우리가 간단한 함수 공장을 도입함으로써 발전기를 폐지할 수 있다고 생각한다.위의 예는 개작할 수 있다

const myGenerator = n => {
    let index = n;
    return () => index += 1;
}
const gen = myGenerator(2);
gen();      // 3
gen();      // 4
gen();      // 5

결론

JavaScript는 엔진 덮개 아래에서 많은 것을 실행합니다.교체는 그중의 하나일 뿐이다.교체기와 생성기에 대한 더 많은 정보를 알고 싶으시면 공식 사이트MDN docs를 방문하시기 바랍니다.나는 너의 이 문장에 대한 견해를 매우 듣고 싶다.그 밖에 특정한 용례가 있다면 발전기가 당신을 위해 해결할 것입니다. 저도 기꺼이 듣겠습니다.즐거운 코딩!😁