[javascript] 자바 스크립트에서 범위 만들기-이상한 구문

이 “핵”을 이해하려면 몇 가지 사항을 이해해야합니다.

1. 왜 우리가하지 않는 이유 Array(5).map(...)
2. Function.prototype.apply인수를 처리 하는 방법
3. Array여러 인수를 처리하는 방법
4. Number함수가 인수를 처리 하는 방법
5. 무엇 Function.prototype.call합니까

그것들은 자바 스크립트의 고급 주제이므로 다소 길어질 것입니다. 위에서부터 시작하겠습니다. 안전 벨트 매세요!

1. 왜 안돼 Array(5).map?

실제로 배열은 무엇입니까? 정수 키를 포함하고 값에 매핑되는 일반 객체입니다. 그것은 마법의 length변수와 같은 다른 특별한 기능을 가지고 있지만 핵심 key => value은 다른 객체와 마찬가지로 규칙적인 맵입니다. 우리는 배열을 조금 가지고 놀자.

var arr = ['a', 'b', 'c'];
arr.hasOwnProperty(0); //true
arr[0]; //'a'
Object.keys(arr); //['0', '1', '2']
arr.length; //3, implies arr[3] === undefined

//we expand the array by 1 item
arr.length = 4;
arr[3]; //undefined
arr.hasOwnProperty(3); //false
Object.keys(arr); //['0', '1', '2']

우리는 배열의 항목 arr.length수와 key=>value배열이 가진 매핑 수 사이에 고유 한 차이를 얻 습니다 arr.length.

를 통해 배열을 확장 해도 새로운 매핑이 생성 arr.length 되지 않으므로key=>value 배열에 정의되지 않은 값이없고이 키가 없습니다 . 존재하지 않는 속성에 액세스하려고하면 어떻게됩니까? 당신은 얻을 undefined.

이제 머리를 약간 들어 올려 왜 같은 기능 arr.map이 이러한 속성을 거치지 않는지 볼 수 있습니다. 경우 arr[3]단순히 정의되지 않은, 그리고 키가 존재하고, 모든 배열 함수는 다른 값처럼 이상 갈 것입니다 :

//just to remind you
arr; //['a', 'b', 'c', undefined];
arr.length; //4
arr[4] = 'e';

arr; //['a', 'b', 'c', undefined, 'e'];
arr.length; //5
Object.keys(arr); //['0', '1', '2', '4']

arr.map(function (item) { return item.toUpperCase() });
//["A", "B", "C", undefined, "E"]

의도적으로 메소드 호출을 사용하여 키 자체가 결코 존재하지 않았다는 점을 추가로 입증했습니다. 호출 undefined.toUpperCase하면 오류가 발생했지만 그렇지 않았습니다. 그것을 증명하기 위해 :

arr[5] = undefined;
arr; //["a", "b", "c", undefined, "e", undefined]
arr.hasOwnProperty(5); //true
arr.map(function (item) { return item.toUpperCase() });
//TypeError: Cannot call method 'toUpperCase' of undefined

이제 우리는 내 요점에 도달합니다 Array(N). 15.4.2.2 절 에 프로세스가 설명되어 있습니다. 우리가 신경 쓰지 않는 많은 점보 점보가 있지만 줄 사이를 읽을 수 있다면 (또는 이것을 믿을 수는 있지만 모르는 경우) 기본적으로 다음과 같이 요약됩니다.

function Array(len) {
    var ret = [];
    ret.length = len;
    return ret;
}

( len임의의 값이 아니라 유효한 uint32 인 가정 (실제 사양에서 확인 됨)에서 작동 함 )

이제 왜 Array(5).map(...)작동하지 않는지 알 수 있습니다 len. 배열에서 항목을 정의 하지 않고 key => value매핑을 만들지 않고 단순히 length속성을 변경합니다 .

이제 우리는 그것을 막았으므로 두 번째 마술을 살펴 보겠습니다.

2. Function.prototype.apply작동 원리

어떤 apply일은 기본적으로 배열을하고, 함수 호출의 인수로 풀다된다. 즉, 다음은 거의 동일합니다.

function foo (a, b, c) {
    return a + b + c;
}
foo(0, 1, 2); //3
foo.apply(null, [0, 1, 2]); //3

이제 특수 변수를 apply간단히 기록하여 작동 방식을 쉽게 확인할 수 있습니다 arguments.

function log () {
    console.log(arguments);
}

log.apply(null, ['mary', 'had', 'a', 'little', 'lamb']);
 //["mary", "had", "a", "little", "lamb"]

//arguments is a pseudo-array itself, so we can use it as well
(function () {
    log.apply(null, arguments);
})('mary', 'had', 'a', 'little', 'lamb');
 //["mary", "had", "a", "little", "lamb"]

//a NodeList, like the one returned from DOM methods, is also a pseudo-array
log.apply(null, document.getElementsByTagName('script'));
 //[script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script]

//carefully look at the following two
log.apply(null, Array(5));
//[undefined, undefined, undefined, undefined, undefined]
//note that the above are not undefined keys - but the value undefined itself!

log.apply(null, {length : 5});
//[undefined, undefined, undefined, undefined, undefined]

마지막 두 번째 예에서 내 주장을 쉽게 증명할 수 있습니다.

function ahaExclamationMark () {
    console.log(arguments.length);
    console.log(arguments.hasOwnProperty(0));
}

ahaExclamationMark.apply(null, Array(2)); //2, true

(예, 말장난 의도). key => value매핑은 우리가 넘어 갔다 배열에 존재하지 않았을 수 apply있지만, 확실히 존재하는 arguments변수입니다. 마지막 예제가 작동하는 것과 같은 이유입니다. 전달하는 객체에는 키가 없지만에 있습니다 arguments.

왜 그런 겁니까? 에서 살펴 보자 절 15.3.4.3 , Function.prototype.apply정의된다. 대부분 우리가 신경 쓰지 않는 것들이지만 흥미로운 부분은 다음과 같습니다.

4. len은 인수 “length”로 argArray의 [[Get]] 내부 메소드를 호출 한 결과입니다.

기본적으로 다음을 의미 argArray.length합니다. 그런 다음 스펙은 항목에 대해 간단한 for루프 를 수행하여 해당 값을 length만듭니다 list( list일부 부두이지만 기본적으로 배열 임). 매우 느슨한 코드 측면에서 :

Function.prototype.apply = function (thisArg, argArray) {
    var len = argArray.length,
        argList = [];

    for (var i = 0; i < len; i += 1) {
        argList[i] = argArray[i];
    }

    //yeah...
    superMagicalFunctionInvocation(this, thisArg, argList);
};

따라서이 argArray경우 모방에 필요한 것은 length속성 이있는 객체입니다 . 이제 값이 정의되지 않은 이유를 알 수 있지만 키가 설정되어 있지 않은 경우 arguments: key=>value매핑을 만듭니다 .

휴, 그래서 이것은 이전 부분보다 짧지 않았을 것입니다. 그러나 우리가 끝나면 케이크가 생길 것이므로 인내심을 가지십시오! 그러나 다음 섹션 (짧은 약속) 후에 표현을 해부 할 수 있습니다. 잊어 버린 경우 문제는 다음과 같은 작동 방식입니다.

Array.apply(null, { length: 5 }).map(Number.call, Number);

3. Array여러 인수를 처리하는 방법

그래서! 우리는에 length인수를 전달할 때 어떤 일이 발생하는지 보았지만 Array표현식에서 여러 가지를 인수 ( undefined정확하게 는 5의 배열 )로 전달합니다. 15.4.2.1 절 에 수행 할 작업이 나와 있습니다. 마지막 단락은 우리에게 중요한 전부이며, 정말 이상하게 표현 되지만, 다음과 같이 요약됩니다.

function Array () {
    var ret = [];
    ret.length = arguments.length;

    for (var i = 0; i < arguments.length; i += 1) {
        ret[i] = arguments[i];
    }

    return ret;
}

Array(0, 1, 2); //[0, 1, 2]
Array.apply(null, [0, 1, 2]); //[0, 1, 2]
Array.apply(null, Array(2)); //[undefined, undefined]
Array.apply(null, {length:2}); //[undefined, undefined]

타다! 정의되지 않은 여러 값의 배열을 가져 와서 정의되지 않은 값의 배열을 반환합니다.

표현의 첫 부분

마지막으로 다음을 해독 할 수 있습니다.

Array.apply(null, { length: 5 })

우리는 5 개의 정의되지 않은 값을 가진 배열을 반환하고 키가 모두 존재한다는 것을 알았습니다.

이제 표현의 두 번째 부분으로

[undefined, undefined, undefined, undefined, undefined].map(Number.call, Number)

잘 알려지지 않은 해킹에 크게 의존하지 않기 때문에이 방법은 더 쉽고 복잡하지 않은 부분입니다.

4. Number입력을 다루는 방법

Number(something)( 섹션 15.7.1 )을 수행하면 something숫자 로 변환 되며 그게 전부입니다. 그 방법은 특히 문자열의 경우 약간 복잡하지만 관심이있는 경우 섹션 9.3 에 작업이 정의되어 있습니다.

5. 게임 Function.prototype.call

call인 apply정의의 형제, 섹션 15.3.4.4는 . 인수 배열을 취하는 대신 수신 된 인수를 가져 와서 전달합니다.

둘 이상의 체인을 연결 call하면 이상한 일이 발생합니다.

function log () {
    console.log(this, arguments);
}
log.call.call(log, {a:4}, {a:5});
//{a:4}, [{a:5}]
//^---^  ^-----^
// this   arguments

이것은 당신이 무슨 일이 일어나고 있는지 파악할 때까지 가치가 있습니다. log.call다른 함수의 call메소드 와 동등한 함수일 뿐이며 call그 자체로 메소드도 있습니다.

log.call === log.call.call; //true
log.call === Function.call; //true

그리고 무엇을 call합니까? 그것은 thisArg많은 인수를 받아들이고 부모 함수를 호출합니다. 우리는 그것을 통해 정의 할 수 있습니다 apply (다시 느슨한 코드는 작동하지 않습니다).

Function.prototype.call = function (thisArg) {
    var args = arguments.slice(1); //I wish that'd work
    return this.apply(thisArg, args);
};

이것이 어떻게 진행되는지 추적합시다.

log.call.call(log, {a:4}, {a:5});
  this = log.call
  thisArg = log
  args = [{a:4}, {a:5}]

  log.call.apply(log, [{a:4}, {a:5}])

    log.call({a:4}, {a:5})
      this = log
      thisArg = {a:4}
      args = [{a:5}]

      log.apply({a:4}, [{a:5}])

후반부 또는 .map전부

아직 끝나지 않았습니다. 대부분의 배열 메소드에 함수를 제공하면 어떻게되는지 보자 :

function log () {
    console.log(this, arguments);
}

var arr = ['a', 'b', 'c'];
arr.forEach(log);
//window, ['a', 0, ['a', 'b', 'c']]
//window, ['b', 1, ['a', 'b', 'c']]
//window, ['c', 2, ['a', 'b', 'c']]
//^----^  ^-----------------------^
// this         arguments

직접 this인수를 제공하지 않으면 기본값은 window입니다. 콜백에 인수가 제공되는 순서를 기록하고 다시 11로 이상하게합시다.

arr.forEach(log.call, log);
//'a', [0, ['a', 'b', 'c']]
//'b', [1, ['a', 'b', 'c']]
//'b', [2, ['a', 'b', 'c']]
// ^    ^

우와 우와 우와 .. 조금 백업하자. 무슨 일이야? 우리가 볼 수있는 섹션 15.4.4.18 , forEach정의, 다음이 거의 발생 :

var callback = log.call,
    thisArg = log;

for (var i = 0; i < arr.length; i += 1) {
    callback.call(thisArg, arr[i], i, arr);
}

그래서 우리는 이것을 얻습니다.

log.call.call(log, arr[i], i, arr);
//After one `.call`, it cascades to:
log.call(arr[i], i, arr);
//Further cascading to:
log(i, arr);

이제 우리는 어떻게 .map(Number.call, Number)작동 하는지 볼 수 있습니다 :

Number.call.call(Number, arr[i], i, arr);
Number.call(arr[i], i, arr);
Number(i, arr);

i현재 인덱스 의 변환을 숫자로 반환합니다 .

결론적으로,

표현식

Array.apply(null, { length: 5 }).map(Number.call, Number);

두 부분으로 작동합니다.

var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2

첫 번째 부분은 5 개의 정의되지 않은 항목으로 구성된 배열을 만듭니다. 두 번째는 해당 배열을 넘고 인덱스를 가져 와서 요소 인덱스 배열을 만듭니다.

[0, 1, 2, 3, 4]

답변

var arr = Array.apply(null, { length: 5 }); // Create an array of 5 `undefined` values

arr.map(Number.call, Number); // Calculate and return a number based on the index passed

var arr = [undefined, undefined, undefined, undefined, undefined];
arr.map(Number.call, Number); // Calculate and return a number based on the index passed

var arr = Array.apply(null, { length: 5 }); 

function foo(a,b,c){
    ...
    return ...
}

function bar(a,b,c){
    return this
}
var arr2 = [3,4,5]
var newArr2 = arr2.map(bar, 9);
//newArr2 is equal to [9,9,9]

function baz(a,b,c){
    return b
}
var newArr3 = arr2.map(baz,9);
//newArr3 is equal to [0,1,2]

function qux(a,b,c){
    return a
}
var newArr4 = arr2.map(qux,9);
//newArr4 is equal to [3,4,5]