2017-01-15 10 views
0

ES5에서 모듈 패턴을 사용할 때 this.methodName을 호출하면 return 객체에 methodName이 부여됩니다. (ES6와)ES6을 사용하여 반환 객체 (모듈 패턴)에서 "공용"함수에 액세스하는 방법은 무엇입니까?

var moduleOld = (function() { 
    //private 
    var privateArray = [1,2,3,4]; 

    return { 
     getItemCount: function() { 
     return privateArray.length; 
     }, 

     getTotal: function() { 
     return this.getItemCount(); 
     } 
    }; 
    })(); 

    //output 
    console.log(moduleOld.getTotal()); //4 <-- Now, I want the same results with ES6 syntax 

새로운 방법 :

let moduleES6 = (()=> { 
    //private 
    let privateArray = [1,2,3,4]; 

    return { 
     getItemCount:()=> { 
     return privateArray.length; 
     }, 

     getTotal:()=> { 
     return this.getItemCount(); 
     } 
    }; 
    })(); 

    //output 
    console.log("es6 ", moduleES6.getTotal()); //Uncaught TypeError: this.getItemCount is not a function 

있습니다 방법 그러나 ES6에은 (ES5와)

오래된 방법 .... 지금은 조금 다르다 주위 ...

let moduleES6_2 = (()=> { 
    //private 
    let privateArray = [1,2,3,4]; 

    return { 
     getItemCount:()=> { 
     return privateArray.length; 
     }, 

     getTotal:()=> { 
     return moduleES6_2.getItemCount(); // I changed "this" to the module name, i.e. moduleES6_2 
     } 
    }; 
    })(); 

    //output 
    console.log("es6 calling by module name: ", moduleES6_2.getTotal()); //works! But what if I change the module's name? Then I have to also change the function call in the getTotal function. 

이 방법은 모듈의 이름을 변경하면 문제가 많이 안 :

let moduleES6_3 = (()=> { 
    //private 
    let privateArray = [1,2,3,4]; 
    function getItemCount() { 
     return privateArray.length; 
    } 
    return { 
     //getItemCount: getItemCount, 
     getTotal:()=> { 
     return getItemCount(); // I am calling the private method. Not the public method! 
     } 
    }; 
    })(); 

    //output 
    console.log("es6 by private method: ", moduleES6_3.getTotal()); //works! But I don't really use the method in the return object, but rather the private declared method. 

ES6을 사용하여 반환 객체 (모듈 패턴)의 "public"함수에 액세스하려면 어떻게합니까?

let moduleES6 = (()=> { 
    //private 
    let privateArray = [1,2,3,4]; 
    function getItemCount() { 
     return privateArray.length; 
    } 
    return { 
     getItemCount:()=> { 
     return privateArray.length; 
     }, 
     getTotal:()=> { 
     return this.getItemCount();//<-- how to access the public getItemCount method? 
     } 
    }; 
    })(); 
+1

이 ('import','export' 친구) 언어의 부분 때문에 필요에가 없습니다 "모듈 패턴"과 같은 해킹. – georg

+0

@georg AFAIK 가져 오기 및 내보내기는 모든 브라우저에서 기본적으로 지원되지 않습니다. Chrome 53.0.2785.143 (64 비트) – thadeuszlay

+0

_ "새로운 방식 (ES6 사용)"_ 새로운 방식은 아니며 다른 방식입니다. 방법으로서의 화살표 기능은 거의 의미가 없습니다. – zeroflagL

답변

0

당신은 getItemCount()처럼 객체 메소드에 대한 약식 구문을 사용할 수 있습니다 : ES6 모듈에서

let moduleES6 = (()=> { 
    //private 
    let privateArray = [1,2,3,4]; 

    return { 
    getItemCount() { 
     return privateArray.length; 
    }, 

    getTotal() { 
     return this.getItemCount(); 
    } 
    }; 
})(); 

moduleES6.getTotal() //4 
+0

죄송합니다. 실제로 다른 것을 찾기 위해 바쁘기 때문에 다음을 재확인 할 수 없습니다 : 'this'포인터에 영향을 미치는 화살표 함수를 사용하는 것이 문제라고 생각됩니다. 그래서 그것을 고치려면 function() {...} 스타일을 사용하거나 hackerdave의 접근법을 사용하십시오. (나는 개인적으로 hackerdave의 접근법을 사용할 것이다.) –

+0

@MarkBirbeck 객체 리터럴의 getTotal() {은'getTotal : function ....'에 대한 단축키이다. 적절한 '이'를 얻기 위해 필요한 것. 대답은 정확하지만 ES6 모듈 방식이 바람직합니다. – estus