JavaScript_Basic 지식에서 이 포인터가 가리키는 것이 무엇인지 탐색

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就会被这个空的对象替代。