대전단지this (보고 나면 더 이상 this 걱정하지 마세요)

삼련문

밑에 있는this는 누구를 가리키나요?

const obj1 = {
  foo: function () {
    console.log(this)
  }
}

답안: 누구나 가능하다. 전체적인 것일 수도 있고obj1일 수도 있다. 이것은 정의된 위치에 달려 있지 않고 어떻게 호출되느냐에 달려 있다.

밑에 있는this는 누구를 가리키나요?

const obj2 = {
  foo: function () {
    function bar () {
      console.log(this)
    }
    bar()
  }
}
obj2.foo()

답:this는 전체 국면을 가리킨다.의문이 있지 않습니까? 누가 호출하면 누구를 가리키지 않습니까?Obj2 같은데?bar 함수가 없으면foo 함수의this를 직접 출력합니다.

밑에 있는this는 누구를 가리키나요?

var length = 10
function fn () {
  console.log(this)
  // console.log(this.length)
}

const obj = {
  length: 5,
  method (fn) {
    fn() // => window 10
    arguments[0]() // => arguments 3
  }
}

obj.method(fn, 1, 2)

답안: 이 문제를 주석하는 핵심은argument0이고argument는 실참 목록이며 위수 그룹입니다. 우리는 argument[0]를 대상의 속성으로 볼 수 있습니다:argument.0,argument[0]=fn이기 때문에 이때this는 argument를 가리키고,length는 자연히 3(실참목록)

마지막으로this에 대한 총결:

작용역을 따라 가장 가까운 function(화살표 함수 아님)을 찾아 이 function이 최종적으로 어떻게 실행되는지 보기;

this의 지향은 정의가 아닌 소속function의 호출 방식에 달려 있다.

function 호출은 일반적으로 다음과 같은 몇 가지 상황으로 나뉜다.

함수로 호출, 즉:foo()

전역 대상을 가리키고 엄격한 패턴 문제를 주의한다(엄격한 모드에서 undefined)

방법으로 호출, 즉:foo.bar()/foo.bar.baz()/foo[‘bar’]

이 방법을 최종적으로 호출하는 대상을 가리킨다

는 구조 함수로 호출됩니다. 즉, new Foo()

Foo {}

특수 호출, 즉:foo.call()/foo.apply()/foo.bind()

매개변수 지정 멤버

소속된function을 찾지 못하면 전역 대상

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

【Vue.js】컴포넌트의 3개의 네비게이션 가드

일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 그 이름에서 알 수 있듯이 무언가를 가드하기위한 처리로, 대체로 페이지 천이 전에 특정 처리를 실행시켜 페이지 천이시키지 않게 한다. Vue.js의 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다