지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Javascript에서 이 키워드의 사용법에 대한 자세한 설명

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

巴扎黑
풀어 주다： 2017-08-12 16:16:28
원래의
1262명이 탐색했습니다.

이것은 매우 오해하기 쉽고 잘못 사용하는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript this 키워드
원천：php.cn
이전 기사：echart 플러그인의 기본 사용법 소개 등 다음 기사：JavaScript를 사용하여 숫자를 무작위로 선택하는 작은 프로그램을 작성하는 자세한 예
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿