JavaScript의 'this' 키워드 이해하기

'this' JavaScript

In JavaScript 더 복잡합니다. 이 가 참조하는 함수는 함수가 정의되는 방식뿐만 아니라 함수를 호출하는 형식에 따라 달라집니다.

방법을 살펴보세요. 이 호출 장소와 형식에 따라 작동합니다.

글로벌 컨텍스트

다음과 같이 전역 객체에 바인딩된 전역 컨텍스트에서 사용됩니다. 창 웹 브라우저에서

this; // 창

내부 객체 메서드

가장 가까운 둘러싸는 객체에 바인딩된 객체 메서드 내부에서 사용됩니다. 객체는 이 키워드로 변경합니다. 다음 사항을 변경해서는 안 됩니다. 함수 () 를 ES6 구문으로 fun: () => this.context 컨텍스트를 변경할 수 있기 때문입니다.

const 객체 = {
  context: "object",
  fun: function() {
    return this.context;
  }
};

obj.fun(); // object

중첩된 객체가 있는 이 예제에서는 이 는 여전히 가장 가까운 컨텍스트를 참조합니다.

const nestedObj = {
  context: "부모",
  child: {
    context: "child",
    fun: function() {
      return this.context;
    }
  }
};

nestedObj.child.fun(); // child

컨텍스트 없는 기능

함수가 객체 내부에서 정의된 경우에도 전역 컨텍스트에 바인딩된 컨텍스트가 없는(부모로 객체가 없는) 함수 내부에서 사용됩니다.

당사는 다음을 사용합니다. 변수 컨텍스트 대신 let/const 컨텍스트 왜냐하면 let 그리고 const 변수로 둘러싸인 컨텍스트를 변경합니다. var 는 항상 글로벌 실행 컨텍스트에 가장 가깝습니다. let 그리고 const 로컬 블록 범위에서만 변수를 선언합니다.

var context = "global";

const obj = {
  context: "object",
  funA: function() {
    함수 funB() {
      const context = "함수";
      return this.context;
    }
    return funB(); // 컨텍스트 없이 호출됨
  }
};

obj.funA(); // 글로벌

생성자 함수 내부

바인딩된 새 객체의 생성자인 함수 내부에서 사용됩니다.

var context = "global";

함수 Obj() {
  this.context = "오브젝트 컨텍스트";
}

const obj = new Obj();
obj.context; // 오브젝트 컨텍스트

프로토타입 체인에 정의된 내부 기능

프로토타입 체인에 정의된 함수 내부에서 해당 함수에 바인딩된 객체를 생성하는 데 사용됩니다.

const ProtoObj = {
  fun: function() {
    return this.name;
  }
};

const obj = Object.create(ProtoObj);
obj.name = "foo";
obj.fun(); // foo

내부 call() 및 apply() 함수

call() 그리고 apply() 는 JavaScript 함수를 사용할 수 있습니다. 이를 통해 객체는 다른 객체에 속한 메서드를 사용할 수 있습니다. call() 는 인수를 별도로 받습니다. apply() 는 배열로 가져옵니다.

이 에서 변경된 새로운 컨텍스트에 바인딩됩니다. call() 그리고 apply() 메서드.

const objA = {
  context: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  context: "objB"
};

objA.fun(1, 2); // objA, [1, 2]
objA.fun.call(objB, 1, 2, 3); // objB, [1, 2, 3]
objA.fun.apply(objB, [1, 2, 3, 4]); // objB, [1, 2, 3, 4]

bind() 함수 내부

bind() 도 JavaScript 방식입니다. 다음과 같은 새로운 함수를 생성합니다. 이 에 전달된 첫 번째 매개 변수로 설정됩니다. bind()**.**

const objA = {
  context: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  context: "objB"
};

const fun = objA.fun.bind(objB, 1, 2);
fun(3, 4); // objB, [1, 2, 3, 4]

이벤트 핸들러 내부

모든 이벤트 핸들러에서 사용됩니다(예:, 추가이벤트 리스너, 온클릭, 첨부이벤트), 이벤트가 첨부된 DOM 요소에 바인딩됩니다.

document.querySelector(".foo").addEventListener("click", function() {
  this; // `foo` div 엘리먼트를 참조합니다.
});

ES6 화살표 기능

화살표 함수 내에서 사용하면 항상 해당 어휘 범위에 바인딩됩니다. 화살표 함수에서는 화살표 함수 내부의 이 어떤 방식으로든.

const globalArrowFunction = () => this;

globalArrowFunction(); // 창

const obj = {
  context: "object",
  funA: () => this,
  funB: 함수() {
    return () => {
      return this.context;
    };
  }
};

obj.funA(); // 창
obj.funB()(); // object

자세히 읽어보세요:

• 맞춤형 소프트웨어 개발의 가장 큰 과제
• 소프트웨어 하우스와 IT 인력 파견 대행사의 차이점은 무엇인가요?