이것, 이것, 이것에 대해 다시 javascript로 논의하십시오. 초 포괄적 (클래식)_javascript 기술

JavaScript는 스크립팅 언어이므로 많은 사람들이 배우기 쉽다고 생각합니다. 반대로 JavaScript는 함수형 프로그래밍, 클로저, 프로토타입 기반 상속 등과 같은 고급 기능을 지원합니다. 이 기사에서는 JavaScript의 this 키워드라는 한 가지 예만 사용하고 다양한 상황에서의 의미를 간단하고 이해하기 쉽게 분석하고 이러한 상황의 이유와 Dojo와 같은 JavaScript 도구에서 제공하는 바인딩 방법을 설명합니다. . JavaScript의 this 키워드를 올바르게 마스터해야만 JavaScript 언어의 문턱에 들어갈 수 있다고 할 수 있습니다.

js에서 이 부분에 대해서는 많은 분들이 설명을 해주셨는데, 정말 고급스러워 보이는데요?

먼저 Script Home의 고급 제품을 인용하세요. 예, 이건

알겠습니다. 답답한 설명은 이렇습니다

인수: 이는 변수나 속성이 아니며 값을 할당할 수 없습니다. 항상 이를 호출하는 개체를 가리킵니다

너무 모호한 느낌이 듭니다. 가장 중요한 점만 기억하세요. "항상 그것을 호출하는 객체를 가리킨다"는 것입니다. 따라서 이것을 호출하는 객체를 찾으면 이것이 누구를 가리키는지 알 수 있을 것입니다.

1.

alert(this); 

보세요, 뭐가 뜨나요? "객체 창"인가요? 간단히 말해서 어떤 객체인가요?

alert(this === window); 

결과가 'true'이므로 이제 이를 호출하는 객체는 window입니다

2.

var test = function(){
  alert(this);
}
test(); 

위에 뜬 내용이 "alert(this)"와 같은 것인지 맞춰보세요

var test = function(){
  alert(this === window);
 }
test(); 

위 코드를 실행하면 'true'가 뜨나요?

이걸로 끝인가요?

그렇게 간단하다면 왜 그렇게 많은 사람들이 이 새에 대해 이야기하는 걸까요?

3.

또 오세요

var test = function(){
  alert(this === window);
 }
new test(); 

야, 이번엔 왜 '거짓'이야?

"이것은 항상 이를 호출하는 개체를 가리킨다"는 점을 기억하세요. "1"에서 이 코드를 호출하는 직접 개체는 "2"이지만 전역 개체입니다. 이에 대한 호출은 여전히 ​​"창"입니다(함수는 객체이지만 다른 객체에 의해 호출되므로 혼동하지 마십시오). 이때는 "new"가 사용됩니다. 이것은 실제로 변경된 생성자입니다. 생성자는 생성될 때 새로운 빈 개체를 생성합니다. 즉, "new test()"는 새 개체를 생성한 다음 이 개체는 "test" 함수의 코드를 가리킵니다. 이는 더 이상 창 개체가 아니지만 이 생성자에 의해 생성된 새 개체입니다.

4.

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
test.b(); 

위의 주장으로 이제 명확해졌습니다!

5.

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b(); 

그래서 결과가 "거짓"이라고 생각하지 않는 것입니다. 틀린 것입니다. 비록 'test1'의 값이 'test'이지만 'test1'은 여전히 ​​'test'의 대상이 아닙니다. 새로운 객체, 지금은 둘 다 동일한 객체를 가리킨다는 것을 이해하실 것입니다. 다음은 증거로 아래 코드입니다.

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test.a = 2;
alert(test1.a); 

1이 나오면 와서 혼내세요

6.단지 전체

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test);
   }
  }
 }
test.b.b1(); 

이것이 '참'인가요, '거짓'인가요?

위 이론에 따르면, 현재 "this"는 더 이상 'test'에 의해 직접 호출되지 않고 다음 코드에서 알 수 있듯이 'test.b'에 의해 호출됩니다.

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test.b);
   }
  }
 }
test.b.b1(); 

7. 복잡하게 만드는 것이 좋습니다

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test(); 

위 이론에 따르면 'innerTest'는 'test'에 의해 호출되고 'this'는 'test'를 가리킨다고 생각하지 않나요?

글쎄요, 실수는 누가 'innerTest'를 호출했는지에 있습니다. 사실 이 함수들은 모두 'window' 객체에 의해 호출됩니다. 수천 개의 레이어를 중첩하더라도 각 함수는 'window' 객체에 의해 호출됩니다. . 증거로서의 코드

var test = function(){
  var innerTest = function(){
   alert(this === window);
   var innerTest1 = function(){
    alert(this === window);
   }
   innerTest1();
  }
  innerTest();
 }
test(); 

8. 또 하나의 특별한

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1); 

이 함수의 기능은 "객체의 메소드를 호출하고 현재 객체를 다른 객체로 바꾸는 것"이므로 당연히 'window' 객체가 'test1'으로 대체됩니다. 'false'입니다. 증명할 다음 코드는 다음과 같습니다.

var test = function(){
  alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1); 

그러면 '전화' 같은 것도 비슷해지겠죠

9. 리터럴 상속과 다른 또 다른 프로토타입 상속

var test = function(){
 }
 var my = function(){
  this.a = function(){
   alert(this === mytest2);
  }
 }
 var mytest = new my();
 test.prototype = mytest;
 var mytest2 = new test();
 mytest2.a(); 

10. 남은 것은 아마도 'dom' 객체일 것입니다

<script>
  var mytest = function(context){
   alert(context.getAttribute('id'));
   alert(this === window);
  }
 </script>
 <div id="test" onclick="mytest(this)">aaaa</div> 

위 내용을 읽으신 후 이해하셔야 할 점은 '이것'이 각각 셴마를 의미한다는 것입니다