집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트에서 이것을 사용하는 방법

자바스크립트에서 이것을 사용하는 방법

일상 공부에서 우리는 this의 사용법을 자주 접하게 됩니다. 이 기사에서는 이에 대해 자세히 설명합니다.

다음과 같은 JS 인터뷰 질문을 접하셨을 것입니다:

var obj = {  foo: function(){    console.log(this)
  }
}var bar = obj.foo
obj.foo() // 打印出的 this 是 objbar() // 打印出的 this 是 window

마지막 두 줄의 함수 값이 왜 다른지 설명해 주세요.

——-

이에 대한 초보자의 이해는 항상 막연했습니다. 오늘의 기사는 모든 것을 단번에 설명할 것입니다.

그리고 이 설명은 다른 곳에서는 볼 수 없습니다. 이 글을 이해해 주세요. 이에 대한 모든 면접 질문은 반찬일 뿐입니다.

함수 호출

먼저 함수 호출부터 시작해야 합니다.

JS(ES5)에는 세 가지 함수 호출 형식이 있습니다.

func(p1, p2)
obj.child.method(p1, p2)
func.call(context, p1, p2) // 先不讲 apply

일반적으로 초보자는 처음 두 형식을 알고 있으며 처음 두 형식이 세 번째 형식보다 "더 낫다"고 생각합니다.

이 기사를 읽으면서 세 번째 호출 형식이 일반적인 호출 형식이라는 점을 기억해야 합니다.

func.call(context, p1, p2)

나머지 두 개는 구문 설탕이며 호출로 동일하게 변경될 수 있습니다. 형식:

func(p1, p2)는 func.call(undefine, p1, p2)obj.child.method(p1, p2)와 동일합니다. obj.child.method.call(obj.child, p1, p2)

꼭 메모해두세요. (아래에서는 쉽게 참조할 수 있도록 이 코드를 "변환 코드"라고 부릅니다.)

지금까지 함수 호출에는

func.call(context, p1, p2)

이런 식으로 설명할 수 있습니다

위 코드의 컨텍스트입니다. 그렇게 간단합니다.

함수 호출 시 전달되는 컨텍스트입니다. 함수 호출의 호출 형식을 사용하지 않으므로 알 수 없습니다.

먼저 func(p1, p2)에서 이를 결정하는 방법을 살펴보세요.

다음 코드를 작성할 때

function func(){ console.log(this)}func()
等价于
function func(){ console.log(this)}func.call(undefined) // 可以简写为 func.call()

논리적으로 말하면 인쇄된 this는 정의되지 않아야 하지만 브라우저에는 규칙이 있습니다.

If 전달한 컨텍스트가 null이거나 정의되지 않은 경우 window 객체가 기본 컨텍스트입니다(엄격 모드의 기본 컨텍스트는 정의되지 않음)
그래서 위의 인쇄 결과는 window입니다.

여기가 창이 아니기를 바란다면 매우 간단합니다:

func.call(obj) // 그렇다면 이 내부는 obj 객체입니다

obj.child.method(p1)에서 이를 결정하는 방법을 살펴보겠습니다. , p2)

var obj = { foo: function(){   console.log(this)
 }
}
obj.foo()

"변환 코드"에 따라 obj.foo()를

obj.foo.call(obj)

으로 변환합니다. 이것은 obj입니다. 완료.

주제로 돌아가기:

var obj = { foo: function(){   console.log(this)
 }
}var bar = obj.foo

obj.foo() // obj.foo.call(obj)로 변환, 이것은 objbar()입니다// bar.call()로 변환// 컨텍스트가 전달되지 않으므로 / / 그래서 이것은 정의되지 않았습니다// 마지막으로 브라우저는 기본 this를 제공합니다 - 창 객체

[ ] 구문

function fn (){ console.log(this) }
var arr = [fn, fn2]
arr0 // 这里面的 this 又是什么呢？

arr0을 arr.0( )으로 상상할 수 있습니다. 후자의 구문은 잘못되었지만 형식은 다음과 같습니다. 동일 변환 코드의 obj.child.method(p1, p2)가 해당하므로 즐겁게 변환할 수 있습니다:

arr0
가상적으로 arr.0()
으로 변환한 다음 arr.0.call(arr)
으로 변환합니다. 내부는 arr :)

Summary

이것은 함수를 호출할 때 전달되는 컨텍스트입니다.
함수 호출 형식이 호출 형식이 아닌 경우 "변환 코드"에 따라 호출 형식으로 변환하세요.

앞으로는 이와 관련된 모든 필기시험 문제에 대해 의심의 여지가 없으실 것입니다.

이 기사에는 이에 대한 관련 설명이 나와 있습니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 참고하세요.

관련 기사