JavaScript 매개변수의 배열 확장 [번역]_javascript 기술

역자 주: 이 글은 ECMAScript 6의 지식 포인트에 대해 이야기할 것입니다. ES5도 이해하지 못한다면 해야 합니다. CSS4, HTML6, 심지어 ES7 ES8까지 모두 계획을 시작했으니 서두르세요. 그렇지 않으면 탈락합니다!

때로는 배열을 여러 요소로 확장한 다음 이러한 요소를 함수 호출의 매개변수로 사용해야 합니다. JavaScript에서 Function.prototype.apply를 사용하여 이 확장 작업을 구현할 수 있습니다. 생성자를 실행할 때 적용할 수 없습니다. 이 글에서는 전개 연산이 무엇인지, new 연산자를 사용하면서 전개 연산을 수행하는 방법을 설명합니다.

1. Unpacking은 함수 호출이나 메서드 호출에서 또는 생성자를 실행할 때 필요한 매개변수를 제공하는 것을 의미합니다. Python에서는 이 작업을

unpacking

이라고 합니다. ECMAScript.next에는 이미 (확장 연산자) 확산 연산자 (접두사 ...로 표시)를 사용하여 이 확장 작업을 수행할 수 있습니다. 현재 JavaScript에서는 Function.prototype을 통해 동일한 효과를 얻을 수 있습니다. .적용 방법. 역자 주: 배열을 확장하기 위해 실제 매개변수 위치에 사용되는 것 외에도 확장 연산자를 형식 매개변수 위치에 사용하여 나머지 매개변수를 나타낼 수도 있습니다. 나머지 매개변수

2. 함수 매개변수 확장

Math.max() 메서드는 0부터 여러 숫자 유형 매개변수를 사용하여 최대값을 반환합니다. 확장 연산 기호를 사용하면 배열을 매개변수로 직접 사용할 수 있습니다:
Math.max(...[13, 7, 30])
이것은 다음 쓰기와 동일합니다

코드 복사 코드는 다음과 같습니다. Math.max(13, 7, 30)

현재 JavaScript에서는 apply()를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 🎜> > Math.max.apply(null, [13, 7, 30]) 30

apply 메소드의 기능은 다음과 같습니다. 호출 방법:

코드 복사

코드는 다음과 같습니다. func.apply(thisValue, [param1, param2, ...])

이를 대체하려면

코드를 복사하세요

코드는 다음과 같습니다: thisValue.func(param1, param2, ...)

func가 반드시 thisValue에 속하는 메서드는 아니라는 점에 유의해야 합니다. Apply는 이 메소드를 일시적으로 소유하게 할 수 있습니다.

Date 생성자는 여러 숫자 유형 매개변수를 허용하고 Date 객체를 생성합니다. 확장 연산자인 경우



코드 복사

코드는 다음과 같습니다.

new Date(...[2011, 11, 24]) // Christmas Eve 2011 그러나 이번에는 확장 작업을 구현하기 위해 적용 메서드를 사용할 수 없습니다. 새로운 작업:

코드 복사

코드는 다음과 같습니다.

> apply(null, [2011, 11, 24]) TypeError: function apply () { [네이티브 코드] }는 생성자가 아닙니다. 새 연산자는 Date.apply가 생성자가 될 것으로 예상합니다. 생성자. 이 표현식을 괄호로 묶더라도 근본적인 문제는 여전히 존재합니다. Apply가 함수 호출을 실행하면 매개 변수를 new 연산자에 전달할 수 없습니다.

3.1 해결 방법

단계 먼저 결과를 올바르게 만들어 보겠습니다. 잠시만 기다려주세요. 그런 다음 분리된 매개변수를 배열을 사용하여 대체하는 방법을 고려해보세요.

코드를 복사하세요
코드는 다음과 같습니다.


new (Date.bind(null, 2011, 11, 24))

먼저 매개변수 없는 함수(매개변수는 바인딩된 함수 내에 바인딩되어 있음)를 생성하기 위해 먼저 바인딩()을 사용한 다음 일반 생성자 호출과 마찬가지로 new를 사용하여 호출합니다. 서명은 다음과 같습니다.

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

func.bind(thisValue, arg1, arg2 , . ..)

bind 함수는 원래 함수인 func를 새로운 함수로 변환합니다. 이 새로운 함수의 값은 항상 thisValue로 지정된 값과 해당 초기 매개변수에는 arg1부터 끝까지의 모든 매개변수가 포함됩니다. 이 새 함수가 호출되면 새로 추가된 매개변수는 bind에 의해 바인딩된 기존 매개변수를 따릅니다. MDN에는 더 자세한 정보가 있습니다. 위의 예에서 첫 번째 매개변수는 null입니다. Date 함수에는 이 필요하지 않기 때문입니다. thisValue: 생성자로 호출되면 new 연산자는 바인드를 통해 지정된 thisValue.를 덮어씁니다.

2단계.바인드에 배열을 전달하려고 합니다. 따라서 apply를 다시 사용하여 배열을 확장된 매개변수로 변환하고 바인드 함수에 전달합니다.

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

new(기능 .prototype.bind .apply(
Date, [null].concat([2011, 11, 24])))

Function 함수에서 Apply 메서드를 호출합니다. 프로토타입.bind, with 두 개의 매개변수가 있습니다:

• 첫 번째 매개변수: 이 값은 Date로 지정되며 이는 위에 작성된 Date.bind(...)와 동일합니다.
• 두 번째 매개변수: 바인드 메소드에 전달된 매개변수인 null과 다음 배열[2011, 11, 24]을 연결하여 새로운 배열을 구성합니다.


3.2 라이브러리 함수 Mozilla는 위 작업을 라이브러리 메소드로 캡슐화할 것을 제안합니다.

그들의 제안을 바탕으로 다음 코드를 약간 수정했습니다.

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

if (!Function.prototype.construct) {
Function.prototype.construct = function(argArray) {
if (! Array.isArray(argArray)) {
throw new TypeError("인자는 배열이어야 합니다.")
}
var constr = this;
var nullaryFunc = Function.prototype.bind.apply(
constr, [null].concat(argArray))
return new nullaryFunc()};
}


실행:

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

> Date.construct([2011, 11, 24])

2011년 12월 24일 토요일 00:00:00 GMT 0100 (CET)


3.3 A 겉으로는 더 간단한 솔루션

new 연산자의 작업을 수동으로 구현할 수 있습니다. 예:

코드를 복사하세요. 코드는 다음과 같습니다.

var foo = new Foo("abc")

는 실제로

코드 복사 코드는 다음과 같습니다. var foo = Object.create(Foo.prototype)

Foo.call(foo, " abc");

이 원칙에 따라 간단한 라이브러리 메소드를 작성할 수 있습니다:

코드 복사 코드는 다음과 같습니다. Function.prototype.construct = function(argArray) {

var constr = this; var inst = Object.create(constr.prototype) ;

constr.apply(inst, argArray)
반환
};
아쉽게도 Date를 일반 함수로 호출하는 것은 생성자로 호출하는 것과 같습니다. call() 및 apply() 메서드의 첫 번째 매개 변수로 지정된 this 값을 무시하고 항상 A를 생성하고 반환합니다.

번역가의 메모: 작성자는 여기서 Date를 일반 함수로 호출하는 것과 생성자로 호출하는 것은 완전히 다릅니다. new가 없으면 매개변수가 있든 없든 Date()는 현재 시간의 문자열을 반환합니다. 즉, (new Date()).toString()

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

> Date.construct([2011, 11, 24])
{}

번역자 참고 사항: 내장 생성자에서 Array(), Function(), RegExp(), Error() 등의 생성자를 호출하면 new를 추가하든 안 하든 거의 동일합니다. 예를 들어 Array(10)도 배열을 생성하지만 Number(), String을 생성합니다. (), 부울()은 new를 추가하지 않고 원래 값을 반환하는 형식 변환 함수입니다.

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

>typeof Number("1")
"number"
>typeof new Number( "1")
"object"

보시다시피 Date() 메서드를 실행할 때 우리가 작성한 constructor() 메서드가 예상대로 작동하지 않고 그 외에 다른 메서드도 있습니다. 내장 생성자도 Date와 동일하게 동작합니다. 그러나 라이브러리에서 사용자 정의 생성자를 작동하는 경우 이 메서드는 기본적으로 정상적으로 작동할 수 있습니다. 소수의 생성자는 기본값을 반환하는 대신 사용자가 지정한 개체 값을 반환합니다. 자동으로 생성된 인스턴스)

번역가의 참고 사항: 생성자의 return 문이 개체 값을 반환하는 한 기본값인 this 값을 덮어씁니다.

코드 복사 코드는 다음과 같습니다. function Func1(){

　 this.value = "this"; }

}

function Func2(){
this.value = "this"; return 1}function Func3(){ this.value = "this";}>new Func1() // 반환된 {}는 기본값을 포함하는 객체 값입니다.{}>new Func2() //반환된 1은 원래 값이므로 기본값은 this.{value: "this"}>new Func3 ( ) //return문이 없고, 기본적으로 undefound가 기본적으로 반환되므로 원시값인 this가 그대로 반환됩니다.{value:"this"}>new Func3 //매개변수가 없는 경우, 괄호는 생략 가능합니다.{value:"this "}