js에서 이 객체의 사용법에 대한 자세한 소개-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-13 16:06:00

원래의

2429명이 탐색했습니다.

이 글은 주로 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를 후원해주셔서 감사합니다.

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