Javascript에서 이 키워드의 사용법에 대한 자세한 설명

이것은 매우 오해하기 쉽고 잘못 사용하는 Javascript의 기능입니다. 따라서 다음 글에서는 자바스크립트에서 가리키는 이 키워드의 문제점에 대한 관련 정보를 주로 소개합니다. 글의 테스트 문제는 이에 대한 친숙도를 테스트하는 데 도움이 될 수 있습니다.

서문

Javascript는 객체 기반 동적 언어입니다. 즉, 모든 것이 객체입니다. 아주 전형적인 예는 함수도 일반 객체로 간주한다는 것입니다. Javascript는 특정 디자인 패턴을 통해 객체지향 프로그래밍을 구현할 수 있는데, 여기서 이 "포인터"는 객체지향 프로그래밍을 구현하는 데 매우 중요한 기능입니다. 이 글에서는 Javascript에서 this 키워드가 가리키는 관련 내용을 자세히 소개합니다. 먼저 작은 테스트를 해보겠습니다. 모든 답변이 정확하다면 축하합니다. 더 이상 읽을 필요가 없습니다.

시험 문제

첫 번째 문제

<script>
 var str = &#39;zhangsan&#39;;

 function demo() {
  var str = &#39;lisi&#39;;
  alert(this.str);
 }
 window.demo(); // ??

 var obj = {
  str: "wangwu",
  say: function() {
   alert(this.str);
  }
 }
 obj.say(); // ??

 var fun = obj.say;
 window.fun(); // ??
</script>

두 번째 문제

<script>
 var username = &#39;zhangsan&#39;;

 (function() {
  var username = &#39;lisi&#39;;
  alert(this.username); // ??
 })()

 function demo() {
  var username = &#39;wangwu&#39;;

  function test() {
   alert(this.username);
  }

  test(); // ??
 }
 demo();
</script>

세 번째 문제

<script>
 function Person() {
  this.username = &#39;zhangsan&#39;;
  this.say = function() {
   alert(&#39;我叫&#39; + this.username);
  }
 }

 var p = new Person();
 p.say(); // ??

 var p1 = new Person();
 p1.say(); // ??
</script>

네번째 질문

<script>
 var username = &#39;zhangsan&#39;;

 function demo() {
  alert(this.username)
 }

 var obj1 = {
  username: "lisi"
 };
 var obj2 = {
  username: "wangwu"
 };

 demo(); // ??
 demo(obj1); // ??
 demo(obj2); // ??
 demo.call(obj1); // ?? 
 demo.apply(obj2); // ??
</script>

Answer

• 첫 번째 질문: zhangsan wangwu zhangsan

• 두 번째 질문: zhangsan zhangsan

• 질문 3: 내 이름은 z 입니다 항산 제 이름은 장산이에요

• 질문 4 : Zhangsan Zhangsan Zhangsan Lisi Wangwu

(아래를 아래로, 아래에 자세한 분석이 있습니다)

이

• 이 객체를 호출하는 객체를 가리킨다. /익명 함수 자체 호출(창을 가리킴)

• 새

• apply/call 호출에 의해 생성된 개체

• 1. 호출 함수를 가리키는 개체

<script>
 // this:指向调用函数的对象
 var str = &#39;zhangsan&#39;;

 function demo() {
  var str = &#39;lisi&#39;;

  //this->window
  console.log(this);
  alert(this.str);
 }
 window.demo(); // zhangsan

 var obj = {
  str: "wangwu",
  say: function() {
   // this->obj
   alert(this.str);
  }
 }
 obj.say(); // wangwu

 var fun = obj.say;
 window.fun(); // zhangsan
</script>

전역 함수(demo)는 window 개체의 메서드에 속하므로,

• obj는 say 메서드를 호출하고, 이는

• fun( )는 전역 함수이고, The fun이라는 문장은 obj에서 간단한 함수를 받아서 호출하지 않습니다(obj.say()가 호출되는 함수입니다). 이때 fun은 함수(function(){alert)입니다. (this.str);}), 그런 다음 fun()이 함수를 호출하면 this는 함수를 호출한 창

• 을 가리키고, 다음은 who

• 을 가리킵니다. 2. 객체 없는 함수 호출/익명 함수 self-call->이것은 window

<script>
 // 2.匿名函数自执行|匿名函数|无主函数 this->window
 var username = &#39;zhangsan&#39;;

 // 匿名函数自执行 this->window
 (function() {
  var username = &#39;lisi&#39;;
  console.log(this); // window
  alert(this.username); // zhangsan
 })()

 function demo() {
  var username = &#39;wangwu&#39;;

  // 无主函数 this->window
  function test() {
   // this->window
   alert(this.username);
  }

  test(); // zhangsan
 }
 demo();
</script>

anonymous 함수에 이름이 없기 때문에 window

• test()에 연결됩니다. 물론 테스트 후에는 윈도우에서 호출되지 않으며, 데모에서도 호출되지 않습니다. 아무도 신경쓰지 않으면 윈도우를 가리킵니다. 이는 호출하는 소유자가 없는 메인리스 함수와 동일합니다. 3. new로 생성된 객체 가치를 얻으려면 new를 사용하여 함수의 속성과 메서드를 사용하세요

• 4. 호출 적용/호출

우선 apply()/call()이 무엇인지 이해합시다 이다?
apply()/call(): 마지막으로 함수가 호출되지만 내부 this는 thisObj

<script>
 // 3.通过new的对象：this指向产生的对象
 // 函数
 function Person() {
  // 属性
  this.username = &#39;zhangsan&#39;;
  // 方法
  this.say = function() {
   // this->p
   console.log(this); // Person对象
   alert(&#39;我叫&#39; + this.username);
  }
 }

 // 实例化出一个对象:p就具有了username属性和say方法
 var p = new Person();
 console.log(p); // Person对象
 console.log(p.username); // zhangsan
 p.say(); // 我叫zhangsan

 // this->p1
 var p1 = new Person();
 p1.say(); // Person对象 我叫zhangsan
</script>

• 을 가리킵니다. 참고:

1. 함수 내부는 thisObj를 가리킵니다(객체의 내부 포인터 변경)

2. thisObj가 매개변수를 전달하지 않으면 기본값은 전역 객체입니다.

3.

Contact : 함수는 같고 첫 번째 인자는 모두 thisObj

차이점 : 전달된 인자가 더 있는 경우
call()의 실제 인자는 하나씩 나열

실제 인자는 apply()는 모두 두 번째 배열 매개변수에 위치합니다

apply()/call()을 이해하는 예:

function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])
function.apply([thisObj[,argArray]])

이것의 네 번째 사용 예

<script>
 // apply()/call()
 function demo() {
  console.log(123);
 }

 // 调用函数的时候，demo.call()/demo.apply()最终调用的还是demo()
 demo(); // 123
 demo.call(); //123
 demo.apply(); // 123
</script>

<script>
 // call()/apply()的区别：
 // call()参数单独再call中罗列
 // apply()的参数通过数组表示
 function demo(m, n, a, b) {
  alert(m + n + a + b);
 }
 demo(1, 5, 3, 4); // 13
 demo.call(null, 1, 5, 3, 4); // 13
 demo.apply(null, [1, 5, 3, 4]); // 13
</script>

데모에 쓰여진 내용이 obj1이든 obj2이든 직접 호출하면 여전히 윈도우로 데모가 호출됩니다.

call이나 Apply를 사용하더라도 최종 호출은 데모 함수이지만 강제로 obj1/obj2를 가리키고 첫 번째 매개변수 개체를 가리키도록 강제합니다.

위 내용은 Javascript에서 이 키워드의 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!