패키지 제목

<script>
var x = 20;
var a = {
    x: 15,
    fn: function() {
        var x = 30;
        return function() {
            return x;
        };
    }
}
console.log(a.fn());//function
console.log(a.fn()());//20
console.log((a.fn())());//20
console.log((a.fn())() == a.fn()());//true
console.log(a.fn().call(this));//20
console.log(a.fn().call(a));//15
script>

이 문제의 난점은 익명 함수의 작용역이 전체적인 것이기 때문에 패키지 안에 있는this보다 윈도우 대상을 가리키는 것이다.a.fn ().call (a) 는this를 a 대상을 가리키기 때문에 출력된 x는 a.x입니다.
<script>
var x = 20;
var a = {
    x: 15,
    fn: function() {
        var x = 30;
        // !!!!!!
        var that = this;
        return function() {
            return that.x;
        };
    }
}
console.log(a.fn());//function
console.log(a.fn()());//15
console.log((a.fn())());//15
console.log((a.fn())() == a.fn()());//true
console.log(a.fn().call(this));//15
console.log(a.fn().call(a));//15
script>

여기서that를 사용하여this를 대체합니다. 그러면 이때that가 가리키는 것은 a대상입니다.console.log(a.fn().call(this)); 이건 20인 줄 알았는데 출력이 15.정확한 이해는this가 전역 대상을 가리키는 것으로 전해져도 되돌아오는 익명 함수의that는 a대상을 가리키는 것이다.
<script>
var x = 20;
var a = {
    x: 15,
    fn: function() {
        var x = 30;
        return function() {
            return x;
        };
    }
}
console.log(a.fn());//function
console.log(a.fn()());//30
console.log((a.fn())());//30
console.log((a.fn())() == a.fn()());//true
console.log(a.fn().call(this));//30
console.log(a.fn().call(a));//30
script>

이때 익명 함수는this가 아닌 x로 되돌아옵니다.x입니다. 그래서 작용역을 따라 위로 올라가면 국부 변수var x = 30가 발견되어 30을 출력합니다.
<script>
var x = 20;
var a = {
    x: 15,
    fn: function() {
        return function() {
            return x;
        };
    }
}
console.log(a.fn());//function
console.log(a.fn()());//20
console.log((a.fn())());//20
console.log((a.fn())() == a.fn()());//true
console.log(a.fn().call(this));//20
console.log(a.fn().call(a));//20
script>

분명히, 이때 익명 함수는 작용역을 따라 x를 찾고, 전역적인 변수 x만 있는 것을 발견하여 20으로 되돌아간다.

좋은 웹페이지 즐겨찾기