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

js에서 이 객체의 사용법에 대한 자세한 소개

亚连원래의: 2018-06-13 16:06:002427검색

이 글은 주로 js에서 이 객체의 사용법에 대한 자세한 분석을 소개합니다. 필요한 친구들이 배우고 공유할 수 있습니다.

이 개체는 함수 실행 시 함수의 실행 환경에 따라 바인딩됩니다.

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

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

글로벌 함수

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

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

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

Object 메소드를 가리킨다

객체 메소드로 호출할 때에는 해당 메소드를 호출하는 객체를 가리킨다

//例子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()을 호출하는 것입니다. 글로벌 환경에서는 It's still 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

여기서 호출 함수를 볼 수 있습니다. 의미: 다른 객체 o2의 메서드를 호출하려면 객체 o1을 지정하세요. 이때 이 객체는 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. 함수가 전역 환경에서 실행되므로 다음을 가리킵니다. Window;h의 getThis는 화살표 함수를 사용하므로 this는 외부 코드 블록의 this를 가리킵니다. 따라서 this는 이때 h를 가리킵니다.

요약

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

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

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

그런 다음 오류가 있으면 여전히 동일하게 종료됩니다. 내용이 도움이 되셨다면 지적 부탁드리며, 좋아요와 수집 부탁드립니다. Script House를 후원해주셔서 감사합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

js에서 이 객체의 사용법에 대한 자세한 소개

관련 기사