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을 호출하면 o.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();
여기서도 Object o를 지적하고 있는데 이것도 실행이 안 되는군요. 그러면 제가 처음에 한 말이 틀렸다고 단정하실 겁니까? 사실은 그렇지 않습니다. 단지 제가 처음에 말한 내용이 정확하지 않았을 뿐입니다. 다음에는 이 내용이 지적하는 문제를 충분히 이해하셨으리라 믿습니다.
사례 1: 함수에 이것이 있지만 상위 수준 개체에서 호출되지 않으면 이는 창을 가리킵니다. 여기서 주목해야 할 점은 엄격한 버전의 js에서는 그렇지 않다는 것입니다. 창을 가리킵니다. 그러나 여기서는 엄격한 버전에 대해 논의하지 않습니다. 더 알고 싶다면 온라인으로 검색할 수 있습니다.
사례 2: 함수에 this가 있고 이 함수가 상위 개체에 의해 호출되면 this는 상위 개체를 가리킵니다.
사례 3: 여러 개체를 포함하는 함수에 이것이 있는 경우, 가장 바깥쪽 개체에 의해 함수가 호출되더라도 이는 위의 개체만 가리킨다는 것을 믿을 수 없다면 증명할 수 있습니다. 그렇다면 계속해서 몇 가지 예를 살펴보겠습니다.
var o = { a:10, b:{ // a:12, fn:function(){ console.log(this.a); //undefined } } } o.b.fn();
객체 b에는 a 속성이 없지만 이 객체도 객체 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就会被这个空的对象替代。