JavaScript에서 이 포인터가 가리키는 것이 무엇인지에 대한 철저한 이해

우선 this가 가리키는 대상은 함수가 정의된 시점에서 판단할 수 없다는 점을 말씀드리고 싶습니다. 라고 (이 문장에는 문제가 있는데 왜 문제가 있는지는 나중에 설명하겠습니다. 인터넷에 있는 대부분의 글에서는 이렇게 말하고 있지만, 그렇게 이해하는데 문제가 없는 경우가 많겠지만, 실제로는 그렇게 이해하는 것은 정확하지 않기 때문에 이것을 이해할 때 불확실한 느낌이 있을 것입니다.) 다음에는 이 문제를 깊이 있게 살펴보겠습니다.

이것을 왜 배워야 할까요? 함수형 프로그래밍이나 객체지향 프로그래밍을 공부했다면 그것이 무엇에 사용되는지 확실히 아실 겁니다. 공부하지 않았다면 당분간 이 글을 읽을 필요는 없습니다. 관심이 있다면 그것은 js입니다.

예제 1:

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();

위에서 말한 내용에 따르면 이는 궁극적으로 이를 호출하는 개체를 가리킵니다. 여기서 a 함수는 실제로 Window 개체가 가리킬 수 있습니다. 입증하다.

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this);　　//Window
}
window.a();

사실 Alert도 윈도우의 속성이고 윈도우별로 클릭되는 코드이기도 합니다.

예시 2:

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);  //追梦子
    }
}
o.fn();

여기서는 o.fn()을 통해 fn을 호출하므로 자연스러운 점은 o라는 점을 다시 한 번 강조합니다. 포인트는 함수가 생성될 때 결정될 수 없습니다. 호출하는 사람이 누구인지는 알 수 있습니다.

실제로 예제 1과 예제 2는 충분히 정확하지 않습니다. 다음 예제는 위의 이론을 뒤집을 수 있습니다.

이를 완전히 이해하려면 다음 몇 가지 예제를 읽어야 합니다.

예제 3:

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    }
}
window.o.fn();

이 코드는 위의 코드와 거의 동일하지만 왜 위의 이론에 따르면 이것이 궁극적으로 이를 호출하는 개체를 가리키는 경우 여기에서는 창은 js의 전역 개체이고 우리가 만드는 변수는 실제로 창 추가 속성을 위한 것입니다. 여기에서 창 도트 o 개체를 사용할 수 있습니다.

위 코드에서 이것이 왜 창을 가리키지 않는지는 설명하지 않겠습니다.

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();

여기서도 객체 o를 지적하고 있는데 이것도 실행이 안 되는군요. 그러면 제가 처음에 한 말이 틀렸다고 단정하실 겁니까? 사실은 그렇지 않습니다. 단지 제가 처음에 말한 내용이 정확하지 않았을 뿐입니다. 다음에는 이 내용이 지적하는 문제를 충분히 이해하셨으리라 믿습니다.

사례 1: 함수에 이것이 있지만 상위 수준 개체에서 호출되지 않으면 이는 창을 가리킵니다. 여기서 주목해야 할 점은 엄격한 버전의 js에서는 다음과 같습니다. 이는 window.window 이외의 다른 항목을 가리키지만 여기서는 엄격한 버전에 대해 논의하지 않습니다. 더 알고 싶다면 온라인으로 검색해 보세요.

사례 2: 함수에 this가 있고 이 함수가 상위 개체에 의해 호출되면 this는 상위 개체를 가리킵니다.

사례 3: 함수에 이것이 있으면 이 함수는 가장 바깥쪽 객체에 의해 호출되지만, 이는 그 위에 있는 객체만 가리킨다는 것을 증명할 수 있습니다. 믿을 수 없다면 계속해서 몇 가지 예를 살펴보겠습니다.

var o = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

객체 b에 a 속성이 없더라도 this도 객체 b를 가리킵니다. 왜냐하면 이 객체에 원하는 것이 있는지 여부에 관계없이 상위 수준 객체만 가리킬 것이기 때문입니다.

또 다른 특별한 경우가 있습니다. 예 4:

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

여기서는 창을 가리킵니다. 사실, 문장을 이해하지 못했기 때문이기도 하고, 이것도 중요합니다.

이는 항상 마지막으로 호출한 개체, 즉 실행 시 호출한 사람을 가리킵니다. 예제 4에서 함수 fn은 개체 b에 의해 참조되지만 fn이 변수 j에 할당되면 그렇지 않습니다. 실행되므로 궁극적으로 window를 가리킵니다. 이는 fn을 직접 실행하는 예제 3과 다릅니다.

사실은 같은 내용이지만 상황에 따라 다른 점을 지적하게 됩니다. 위의 요약에는 약간의 실수가 있어 오류라고 할 수는 없지만 상황에 따라 상황이 달라집니다. 상황이 있어서 한꺼번에 설명할 수는 없고, 천천히 체험해 볼 수만 있을 뿐입니다.

생성자 버전:

function Fn(){
    this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

　　这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a，为什么我说a是对象，因为用了new关键字就是创建一个对象实例，理解这句话可以想想我们的例子3，我们这里用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象Fn中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。

　　除了上面的这些以外，我们还可以自行改变this的指向，关于自行改变this的指向请看JavaScript中call,apply,bind方法的总结这篇文章，详细的说明了我们如何手动更改this的指向。

　　更新一个小问题当this碰到return时

function fn()  
{  
    this.user = '追梦子';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined

　　再看一个

function fn()  
{  
    this.user = '追梦子';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined

　　再来

function fn()  
{  
    this.user = '追梦子';  
    return 1;
}
var a = new fn;  
console.log(a.user); //追梦子

function fn()  
{  
    this.user = '追梦子';  
    return undefined;
}
var a = new fn;  
console.log(a.user); //追梦子

　　什么意思呢？

　　如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

function fn()  
{  
    this.user = '追梦子';  
    return undefined;
}
var a = new fn;  
console.log(a); //fn {user: "追梦子"}

　　还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

function fn()  
{  
    this.user = '追梦子';  
    return null;
}
var a = new fn;  
console.log(a.user); //追梦子

　　知识点补充：

　　1.在严格版中的默认的this不再是window，而是undefined。

　　2.new操作符会改变函数this的指向问题，虽然我们上面讲解过了，但是并没有深入的讨论这个问题，网上也很少说，所以在这里有必要说一下。

function fn(){
    this.num = 1;
}
var a = new fn();
console.log(a.num); //1

　　为什么this会指向a？首先new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。

 以上就是JavaScript中this指针指向的彻底理解的内容，更多相关内容请关注PHP中文网（www.php.cn）！