The Codest
  • 회사 소개
  • 서비스
    • 소프트웨어 개발
      • 프론트엔드 개발
      • 백엔드 개발
    • Staff Augmentation
      • 프론트엔드 개발자
      • 백엔드 개발자
      • 데이터 엔지니어
      • 클라우드 엔지니어
      • QA 엔지니어
      • 기타
    • IT 자문
      • 감사 및 컨설팅
  • 산업 분야
    • 핀테크 및 뱅킹
    • E-commerce
    • 애드테크
    • 헬스 테크
    • 제조
    • 물류
    • 자동차
    • IOT
  • 가치
    • CEO
    • CTO
    • 배달 관리자
  • 우리 팀
  • Case Studies
  • 방법 알아보기
    • 블로그
    • 모임
    • 웹 세미나
    • 리소스
채용 정보 연락하기
  • 회사 소개
  • 서비스
    • 소프트웨어 개발
      • 프론트엔드 개발
      • 백엔드 개발
    • Staff Augmentation
      • 프론트엔드 개발자
      • 백엔드 개발자
      • 데이터 엔지니어
      • 클라우드 엔지니어
      • QA 엔지니어
      • 기타
    • IT 자문
      • 감사 및 컨설팅
  • 가치
    • CEO
    • CTO
    • 배달 관리자
  • 우리 팀
  • Case Studies
  • 방법 알아보기
    • 블로그
    • 모임
    • 웹 세미나
    • 리소스
채용 정보 연락하기
뒤로 화살표 뒤로 가기
2019-09-09
소프트웨어 개발

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

루카스 콜코

대부분의 객체 지향 프로그래밍 언어에서 'this'라는 키워드는 특별한 의미를 가집니다. 일반적으로 이 키워드는 객체가 실행 컨텍스트(즉, 객체의 현재 인스턴스)임을 나타냅니다. 예를 들어, 내부에서 객체 속성을 참조할 때 this.propertyName을 입력하면 컨텍스트가 객체이고 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
2020년 프론트엔드 보고서

자세히 읽어보세요:

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

관련 문서

상승하는 화살표와 비용 효율성 또는 절감을 상징하는 금화가 있는 하락하는 막대 차트의 추상적인 그림. 밝은 회색 바탕에 "In Code We Trust"라는 슬로건과 함께 왼쪽 상단에 The Codest 로고가 표시됩니다.
소프트웨어 개발

제품 품질 저하 없이 개발팀을 확장하는 방법

개발팀을 확장하고 계신가요? 제품 품질을 저하시키지 않고 성장하는 방법을 알아보세요. 이 가이드에서는 확장할 시기의 징후, 팀 구조, 채용, 리더십 및 도구와 더불어 The Codest가 어떻게...

최신
소프트웨어 개발

미래 지향적인 웹 앱 구축: The Codest의 전문가 팀이 제공하는 인사이트

The Codest가 최첨단 기술로 확장 가능한 대화형 웹 애플리케이션을 제작하고 모든 플랫폼에서 원활한 사용자 경험을 제공하는 데 탁월한 성능을 발휘하는 방법을 알아보세요. Adobe의 전문성이 어떻게 디지털 혁신과 비즈니스를 촉진하는지 알아보세요...

최신
소프트웨어 개발

라트비아에 본사를 둔 10대 소프트웨어 개발 기업

최신 기사에서 라트비아 최고의 소프트웨어 개발 기업과 그들의 혁신적인 솔루션에 대해 알아보세요. 이러한 기술 리더들이 어떻게 귀사의 비즈니스를 향상시키는 데 도움을 줄 수 있는지 알아보세요.

thecodest
엔터프라이즈 및 스케일업 솔루션

Java 소프트웨어 개발 필수 사항: 성공적인 아웃소싱을 위한 가이드

The Codest로 효율성을 높이고 전문 지식을 활용하며 프로젝트 성공을 이끌 수 있는 성공적인 outsourcing Java 소프트웨어 개발에 대한 이 필수 가이드를 살펴보세요.

thecodest
소프트웨어 개발

폴란드 아웃소싱을 위한 최고의 가이드

폴란드에서 outsourcing가 급증한 것은 경제, 교육, 기술 발전으로 인한 IT 성장과 비즈니스 친화적인 환경이 조성된 덕분입니다.

더코데스트

지식창고를 구독하고 IT 분야의 전문 지식을 최신 상태로 유지하세요.

    회사 소개

    The Codest - 폴란드에 기술 허브를 둔 국제 소프트웨어 개발 회사입니다.

    영국 - 본사

    • 사무실 303B, 182-184 하이 스트리트 노스 E6 2JA
      영국 런던

    폴란드 - 현지 기술 허브

    • 파브리츠나 오피스 파크, 알레야
      포코주 18, 31-564 크라쿠프
    • 뇌 대사관, 콘스트럭터스카
      11, 02-673 바르샤바, 폴란드

      The Codest

    • 홈
    • 회사 소개
    • 서비스
    • Case Studies
    • 방법 알아보기
    • 채용 정보
    • 사전

      서비스

    • IT 자문
    • 소프트웨어 개발
    • 백엔드 개발
    • 프론트엔드 개발
    • Staff Augmentation
    • 백엔드 개발자
    • 클라우드 엔지니어
    • 데이터 엔지니어
    • 기타
    • QA 엔지니어

      리소스

    • 외부 소프트웨어 개발 파트너와의 협력에 대한 사실과 오해
    • 미국에서 유럽으로: 미국 스타트업이 유럽으로 이전을 결정하는 이유
    • 테크 오프쇼어 개발 허브 비교: 테크 오프쇼어 유럽(폴란드), 아세안(필리핀), 유라시아(터키)
    • CTO와 CIO의 주요 과제는 무엇인가요?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • 웹사이트 이용 약관

    저작권 © 2025 by The Codest. 모든 권리 보유.

    ko_KRKorean
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese es_ESSpanish nl_NLDutch etEstonian elGreek ko_KRKorean