집 >웹 프론트엔드 >JS 튜토리얼 >js에서 이 객체의 사용 예에 대한 자세한 설명

js에서 이 객체의 사용 예에 대한 자세한 설명

小云云원래의: 2018-01-08 09:06:301470검색

이 개체는 함수 실행 시 함수의 실행 환경에 따라 바인딩됩니다. 이 글은 주로 js에서 이 객체의 사용법에 대한 자세한 분석을 소개합니다. 필요한 친구들이 이를 배우고 공유할 수 있어 모든 사람에게 도움이 되기를 바랍니다.

실제로 이 문장의 핵심은 누가 함수를 호출하든 누구를 가리킨다는 것입니다.

구체적으로는 일반적으로 다음과 같은 상황이 있습니다.

글로벌 함수

글로벌 환경에서 이는 Window를 가리킵니다.

//例子1
 function A() {
 console.log(this)
 }
 A();//Window

위의 예는 매우 간단합니다. 함수 A는 전역 환경에서 실행됩니다. 즉, 전역 개체 Window가 함수를 호출합니다. 이때 this는 Window

객체 메소드

를 가리킨다. 객체 메소드로 호출될 때는 해당 메소드

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

를 호출하는 객체를 가리킨다. 지금까지 제시한 예제는 비교적 간단하다. 다음은 흥미로운 내용입니다. ：

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

이 예제는 c.getFunc()를 실행할 때 가장 먼저 반환되는 것은 이 함수입니다. cFun을 호출한 다음 cFun(전역 환경에서)을 호출하므로 이 시점에서는 여전히 Window를 가리킵니다.

여기서 c 객체를 반환해야 한다면 어떻게 될까요? 처음에 this 개체는 함수가 실행될 때 결정된다고 말했습니다. 예제 3에서 c.getFunc()가 실행될 때 this 개체는 여전히 c를 가리키므로 위의 경우 this만 유지하면 됩니다. 코드가 약간 변경되었습니다.

//例子4
 var c = {
 getFunc:function(){
  var that = this //在这里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

이것이 바로 일부 코드에서 var self = this 또는 var that = this를 자주 볼 수 있는 이유입니다.

call and apply

이때 this 객체는 일반적으로 함수에 지정된 this 값을 가리킵니다. (보통 2단어인데 시험에서 테스트하게 됩니다.)

call과 Apply는 진부한 표현입니다. , 간단하게 소개하자면, 신입생들이 접해본 적이 없을 수도 있을 것 같은데(사실 그냥 단어를 만들어서), 전화를 예로 들어보면 구문은 이렇습니다

fun.call(thisArg, arg1, arg2, ...)

사용법 이 메소드에 대한 다음 예를 살펴보십시오.

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:&#39;e&#39;//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

여기서 호출 함수의 의미를 볼 수 있습니다. 객체 o1을 지정하여 다른 객체 o2의 메소드를 호출합니다. 이때 이 객체는 o1을 가리킵니다.

그럼 아까 우리는 왜 평범하다고 했나요? 여기서 thisArg는 null 및 정의되지 않은 것으로 지정될 수 있기 때문입니다. 참조하세요:

//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

이번에는 전역 객체 Window

화살표 함수

es6의 화살표 함수도 이제 더 자주 사용되지만 주의가 필요한 점이 있습니다:

함수 본문 이 개체는 사용되는 개체가 아니라 정의된 개체입니다.

사실 이 상황의 근본 원인은 화살표 함수에 이 객체가 없기 때문에 화살표 함수의 this가 외부 코드의 this라는 것입니다.

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

이 예는 기본적으로 다음과 같습니다. 이전 예제 2, 일반 함수를 화살표 함수로 다시 작성했지만 이때 이 객체는 이미 외부 Window를 가리키고 있습니다.

이해하기 어려울 수 있다는 점을 고려하여 몇 가지 예를 더 살펴보겠습니다.

//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

이 예에서는 g의 getThis가 이전 예와 동일하게 작성되었습니다. 3. 함수가 전역 환경에서 실행되므로, this 이때 this는 Window를 가리키며, h의 getThis는 화살표 함수를 사용하므로 this는 외부 코드 블록의 this를 가리킵니다.

요약

일반적으로 이 개체는 호출 함수의 개체를 가리킵니다. 전역 환경에서 이 개체는 실행 함수를 Window

호출 및 적용 함수에서 지정된 개체를 가리킵니다. 객체. 지정된 쌍이 정의되지 않았거나 null이면 이 객체는 Window

를 가리킵니다. 화살표 함수에서 이 객체는 외부 코드 블록의 객체와 동일합니다

js에서 이 객체의 사용 예에 ​​대한 자세한 설명

관련 기사

js에서 이 객체의 사용 예에 대한 자세한 설명