[javascript] JavaScript 함수 별칭이 작동하지 않는 것 같습니다.

이 특정 행동을 이해하기 위해 깊이 파고 들었고 좋은 설명을 찾은 것 같습니다.

별칭을 사용할 수없는 이유를 알아보기 전에 document.getElementByIdJavaScript 함수 / 객체의 작동 방식을 설명하려고합니다.

JavaScript 함수를 호출 할 때마다 JavaScript 인터프리터는 범위를 결정하고이를 함수에 전달합니다.

다음 기능을 고려하십시오.

function sum(a, b)
{
    return a + b;
}

sum(10, 20); // returns 30;

이 함수는 Window 범위에서 선언되며이를 호출 this하면 sum 함수 내부의 값이 전역 Window개체가됩니다.

‘sum’함수의 경우 ‘this’가 사용하지 않기 때문에 값이 무엇인지는 중요하지 않습니다.

---

다음 기능을 고려하십시오.

function Person(birthDate)
{
    this.birthDate = birthDate;
    this.getAge = function() { return new Date().getFullYear() - this.birthDate.getFullYear(); };
}

var dave = new Person(new Date(1909, 1, 1));
dave.getAge(); //returns 100.

당신이 dave.getAge 함수를 호출 할 때, 자바 스크립트 인터프리터는 당신이에 getAge 함수를 호출하는 것을보고 dave는 설정 때문에, 객체 this로 dave하고, 호출 getAge기능. getAge()올바르게 반환 100됩니다.

---

JavaScript에서 apply메서드를 사용하여 범위를 지정할 수 있음을 알 수 있습니다 . 시도해 봅시다.

var dave = new Person(new Date(1909, 1, 1)); //Age 100 in 2009
var bob = new Person(new Date(1809, 1, 1)); //Age 200 in 2009

dave.getAge.apply(bob); //returns 200.

위 줄에서 JavaScript가 범위를 결정하도록하는 대신 수동으로 범위를 bob객체 로 전달 합니다. getAge이제 개체 에 대해 200‘생각’했음에도 불구하고 반환됩니다 .getAgedave

---

위의 모든 것의 요점은 무엇입니까? 함수는 JavaScript 객체에 ‘느슨하게’연결됩니다. 예를 들어 할 수 있습니다.

var dave = new Person(new Date(1909, 1, 1));
var bob = new Person(new Date(1809, 1, 1));

bob.getAge = function() { return -1; };

bob.getAge(); //returns -1
dave.getAge(); //returns 100

---

다음 단계로 넘어 갑시다.

var dave = new Person(new Date(1909, 1, 1));
var ageMethod = dave.getAge;

dave.getAge(); //returns 100;
ageMethod(); //returns ?????

ageMethod실행하면 오류가 발생합니다! 어떻게 된 거예요?

주의 깊게 내 위의 포인트를 읽는다면, 당신은주의 할 dave.getAge메소드가 호출되었습니다 dave로 this자바 스크립트의 ‘범위’판별 할 수 없습니다 반면 개체를 ageMethod실행합니다. 그래서 글로벌 ‘창’을 ‘this’로 전달했습니다. 이제 속성 window이 없으므로 실행이 실패합니다.birthDateageMethod

이 문제를 해결하는 방법? 단순한,

ageMethod.apply(dave); //returns 100.

---

위의 모든 내용이 이해가 되었습니까? 그렇다면 별칭을 사용할 수없는 이유를 설명 할 수 있습니다 document.getElementById.

var $ = document.getElementById;

$('someElement');

$로 호출 window로 this하고있는 경우 getElementById구현이 기대 this될 document, 그것은 실패합니다.

다시이 문제를 해결하려면 다음을 수행 할 수 있습니다.

$.apply(document, ['someElement']);

그렇다면 Internet Explorer에서 작동하는 이유는 무엇입니까?

getElementByIdIE 의 내부 구현을 모르지만 jQuery 소스 ( inArray메서드 구현) 의 주석은 IE에서 window == document. 이 경우 앨리어싱 document.getElementById은 IE에서 작동합니다.

이것을 더 설명하기 위해 나는 정교한 예를 만들었습니다. Person아래 기능을 살펴보십시오 .

function Person(birthDate)
{
    var self = this;

    this.birthDate = birthDate;

    this.getAge = function()
    {
        //Let's make sure that getAge method was invoked 
        //with an object which was constructed from our Person function.
        if(this.constructor == Person)
            return new Date().getFullYear() - this.birthDate.getFullYear();
        else
            return -1;
    };

    //Smarter version of getAge function, it will always refer to the object
    //it was created with.
    this.getAgeSmarter = function()
    {
        return self.getAge();
    };

    //Smartest version of getAge function.
    //It will try to use the most appropriate scope.
    this.getAgeSmartest = function()
    {
        var scope = this.constructor == Person ? this : self;
        return scope.getAge();
    };

}

Person위 의 기능에 대해 다양한 getAge메서드가 작동 하는 방식은 다음과 같습니다.

Person함수를 사용하여 두 개의 객체를 만들어 보겠습니다 .

var yogi = new Person(new Date(1909, 1,1)); //Age is 100
var anotherYogi = new Person(new Date(1809, 1, 1)); //Age is 200

---

console.log(yogi.getAge()); //Output: 100.

곧바로 getAge 메소드는 yogi객체를로 가져오고 this출력 100합니다.

---

var ageAlias = yogi.getAge;
console.log(ageAlias()); //Output: -1

자바 스크립트 인터프리터는 window객체를로 설정 this하고 getAge메서드는 -1.

---

console.log(ageAlias.apply(yogi)); //Output: 100

올바른 범위를 설정하면 ageAlias방법 을 사용할 수 있습니다 .

---

console.log(ageAlias.apply(anotherYogi)); //Output: 200

다른 사람 개체를 전달해도 나이를 올바르게 계산합니다.

var ageSmarterAlias = yogi.getAgeSmarter;
console.log(ageSmarterAlias()); //Output: 100

이 ageSmarter함수는 원래 this객체를 캡처 하므로 이제 올바른 범위를 제공하는 것에 대해 걱정할 필요가 없습니다.

---

console.log(ageSmarterAlias.apply(anotherYogi)); //Output: 100 !!!

문제 ageSmarter는 범위를 다른 개체로 설정할 수 없다는 것입니다.

---

var ageSmartestAlias = yogi.getAgeSmartest;
console.log(ageSmartestAlias()); //Output: 100
console.log(ageSmartestAlias.apply(document)); //Output: 100

ageSmartest유효 범위가 공급되면 함수는 원래의 범위를 이용할 것이다.

---

console.log(ageSmartestAlias.apply(anotherYogi)); //Output: 200

여전히 다른 Person개체를 에 전달할 수 있습니다 getAgeSmartest. 🙂