JavaScript 충돌 방지 이 [번역]_javascript 기술

이 글은 주로 JavaScript에서 이것을 큐레이팅하고 데코링하는 방법에 대해 설명합니다. 트윗.

1. 안티 커링(Uncurring)

Uncurry는 다음 서명이 있는 메소드를 변환하는 것을 의미합니다:

obj.foo(arg1, arg2)를 다른 서명으로 변환 다음 서명이 있는 함수:

foo (obj, arg1, arg2) 이것의 사용법을 알고 싶다면 먼저 일반적인 방법을 이해해야 합니다.

2. 일반 방법( Generic method)

일반적으로 특정 메소드는 특정 유형의 객체 인스턴스에만 사용할 수 있지만, 다른 유형의 객체 인스턴스에도 사용할 수 있는 몇 가지 메소드가 있습니다. 예를 들면 다음과 같습니다. 🎜>

코드 복사 코드는 다음과 같습니다.

// 실제 단순화된 구현 버전:
Array.prototype.forEach = 함수(콜백) {
for(var i=0; iif (i in this) {
callback(this[i] , i);
}
}
}

이것은 forEach() 메서드의 암시적 매개변수로 간주될 수 있습니다. 다음 세 가지 규칙을 충족하는 객체는 forEach() 메서드를 호출할 수 있으며 암시적 this로 사용할 수 있습니다.

•길이 속성 있음: this.length

•인덱스로 객체 요소에 액세스하는 기능: this[i]

•속성 존재 확인 기능: 이
인수 객체의 i(다음을 포함) function 호출의 실제 매개변수는 모두 Array 인스턴스가 아니므로 forEach() 메서드를 직접 호출할 수 없습니다. 그러나 forEach() 메서드를 호출하기 위해서는 세 가지 조건을 충족해야 합니다. 숨겨진 this 매개변수를 명시적 매개변수로 포함하도록 만들기만 하면 됩니다. 다행히 모든 함수에는 다음과 같은 작업을 수행할 수 있는 call() 메서드가 있습니다.

코드 복사 코드는 다음과 같습니다.

function printArgs() {

배열 .prototype.forEach.call(인수, 함수(요소, 인덱스) {
     console.log(index ". " elem);
  });
}


forEach .call( )에는 forEach() 메서드보다 매개 변수가 하나 더 있습니다. 첫 번째 매개 변수는 지정된 이 값입니다.

코드 복사 코드는 다음과 같습니다:

> printArgs("a", "b")

0.a
1.b


JavaScript Common 메소드에서 유사한 여러 메소드를 이러한 방식으로 호출할 수 있으며 이러한 메소드의 대부분은 Array.prototype에서 제공됩니다.

3. 반항의 여러 용도

사용 사례 1: map()을 통해 메서드 호출 Array.prototype.map() 메서드를 사용하면 배열의 각 요소에 대해 함수를 호출할 수 있습니다. 그러나 함수 대신 메서드를 호출하려면 어떻게 해야 할까요? ? 예 이렇게 하려면 충돌 방지를 사용하세요.

코드 복사 코드는 다음과 같습니다.

> var toUpperCase = String.prototype.toUpperCase.uncurryThis();

> [ "foo", "bar", "baz" ].map(toUpperCase)
[ 'FOO', 'BAR ', 'BAZ' ]


사용 사례 2: 일반 메소드를 함수로 변환합니다. 예를 들어

과 같이 메소드를 함수로 변환합니다.

코드 복사 코드는 다음과 같습니다.

Array.forEach = Array.prototype.forEach.uncurryThis();

function printArgs( ) {
Array.forEach(arguments, function (elem, index) {
console.log(index ". " elem);
});
}


ECMAScript 사양 권장 사항의 향후 버전에는 이미 유사한

배열 방법
이 많이 있습니다.번역자 참고: Firefox는 이미 ,
Array.forEach 및 기타를 구현했습니다. Array.map<br>4. uncurryThis() 구현 <br><strong>다음은 uncurryThis 메소드를 구현하는 세 가지 방법입니다. <br></strong>구현 1: Wrendan Eich<br> <br><br><div class="codetitle"> <span>코드 복사<a style="CURSOR: pointer" data="60855" class="copybut" id="copybut60855" onclick="doCopy('code60855')"><u></u> 코드는 다음과 같습니다.</a></span> </div>Function.prototype.uncurryThis = function() { <div class="codebody" id="code60855">var f = this; <br>return 함수() { <br>var a = 인수 <br>return f.apply(a[0], [].slice.call(a, 1)); >} <br>};<br>구현 2: 카레 방지 함수를 호출하는 것은 원래 메서드에서 해당 call() 메서드를 호출하는 것과 동일합니다. 이 call() 메서드는 다음과 같이 바인드() 메서드를 통해 빌릴 수 있습니다. <br><div class="codetitle"> <span> <a style="CURSOR: pointer" data="87558" class="copybut" id="copybut87558" onclick="doCopy('code87558')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code87558"> <br>Function.prototype.uncurryThis = function() { <br>이를 반환합니다. 바인딩(this); <br>}; <br> </div> <br>구현 3: 정의된 표준 메서드는 너무 많은 외부 메서드에 의존하지 않는 것이 가장 좋습니다. 또한, 바인딩() 메서드는 ECMAScript에서만 사용할 수 있습니다. 5. 그래서 위의 구현 2를 다음과 같이 다시 작성했습니다. <br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="7449" class="copybut" id="copybut7449" onclick="doCopy('code7449')"><u>코드 복사 </u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code7449"> <br>Function.prototype.uncurryThis = function () { <br>var f = this; <br>return function () { <br>return f.call.apply(f, 인수) <br>} ; <br>}; <br> </div> <br>위 코드는 여전히 call() 메소드를 암시적으로 차용하고 있습니다. <br><br><strong>5. 이를 수정하세요. ><br>uncurryThis()의 역연산을 curryThis()라고 합니다. 원래 함수의 첫 번째 매개변수를 암시적 this 매개변수로 변환합니다. </strong><br><div class="codetitle"><span><a style="CURSOR: pointer" data="74336" class="copybut" id="copybut74336" onclick="doCopy('code74336')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code74336">function(self, arg) { <br>return self.foo arg; <br><br> <br>커링하면 </div> <br><br><div class="codetitle"> <span>코드 복사<a style="CURSOR: pointer" data="73673" class="copybut" id="copybut73673" onclick="doCopy('code73673')"><u></u> 코드는 다음과 같습니다.</a></span> </div>function(arg) { <div class="codebody" id="code73673">return this.foo arg; <br>} <br><br> <br>사용 사례: 메서드가 this 값을 포함된 함수에 전달하도록 합니다. 원문: </div> <br><br><div class="codetitle"><span> 코드 복사<a style="CURSOR: pointer" data="49106" class="copybut" id="copybut49106" onclick="doCopy('code49106')"><u></u> 코드는 다음과 같습니다. </a></span></div>var obj = {<div class="codebody" id="code49106"> method : function (arg) {<br> var self = this; // 중첩된 함수가 this에 액세스하도록 허용<br> someFunction(..., function() {<br> var self = this; // 중첩된 함수에서 function access this<br> });<br> },<br> otherMethod: function (arg) { ... }<br>}<br><br><br>커링 후에는 다음과 같이 작성할 수 있습니다. </div> <br> <br><div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="22807" class="copybut" id="copybut22807" onclick="doCopy('code22807')"><u></u> 코드는 다음과 같습니다.</a></span></div>var obj = {<div class="codebody" id="code22807"> 메서드: 함수(self, arg) { // 추가 매개변수 `self`<br>                                                                                                >                                                       🎜> otherMethod: function (arg) { ... }<br>}<br><br><br>암시적 매개변수 this를 다음으로 변환합니다. 즉, 동적 매개변수 self를 정적 변수 self로 변환합니다. 이 매개변수를 항상 명시적 매개변수로 사용하면 JavaScript가 더 간단해집니다.<br> <br>curryThis() 구현:<br><br> </div> <br>코드 복사<p><br></p> <div class="codetitle"> 코드는 다음과 같습니다.<span><a style="CURSOR: pointer" data="75145" class="copybut" id="copybut75145" onclick="doCopy('code75145')"><u>함수 .prototype.curryThis = function () {</u> var f = this;</a> return function () {</span> var a = Array.prototype.slice.call(arguments);</div> a.unshift(this );<div class="codebody" id="code75145">       return f.apply(null, a);<br>   };<br>};<br><br><br> <br><br>6. 함수 프로토타입을 확장하고 싶지 않은 경우 <br><br> </div>위에서 구현한 메소드는 모두 내장 생성자 Function()의 프로토타입에 추가되어 독립적인 함수로 쉽게 다시 작성할 수 있습니다.<p><strong></strong></p> 코드 복사<p><br></p> <div class="codetitle"> 코드는 다음과 같습니다.<span><div class="codebody" id="code18130"> <br>function uncurryThis(f) {<br> return function () {<br> return f.call.apply(f, 인수)<br> };<br>}<br>function curryThis(f ) {<br> return function () {<br> var a = Array.prototype.slice.call(arguments);<br> a.unshift(this);<br> return f.apply(null, a); <br> };<br>}<br> </div> <p><strong>7. 기존 신뢰할 수 없는 코드에서는 안전하게 uncurryThis()를 사용하세요 </strong></p> <p>Mark Miller<tt>uncurryThis()를 예로 설명</tt>"<a href="http://wiki.ecmascript.org/doku.php?id=conventions:safe_meta_programming" target="_blank">안전한 메타프로그래밍</a>":<br><br>번역자 참고 사항: Currying this는 함수를 변환하기 위한 것입니다. 첫 번째 매개변수는 변환됩니다. this를 메서드에서 this로 변환하는 것은 메서드의 this를 함수의 첫 번째 매개변수로 변환하는 것입니다.</p></span> </div> </div>