JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


JavaScript this 키워드


예시

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

이게 뭐야 ?

JavaScript this키워드는 그것이 속한 객체를 참조합니다.

사용 위치에 따라 값이 다릅니다.

  • 메서드 에서 소유자 개체this 를 나타냅니다 .
  • 단독으로 전역 개체this 를 참조 합니다 .
  • 함수 에서 전역 개체this 를 나타냅니다 .
  • 함수에서 엄격 모드에서는 this입니다 undefined.
  • 이벤트에서 이벤트 를 수신한 요소this 를 나타냅니다 .
  • call(), 및 같은 메서드는 모든 개체apply() 를 참조 this할 수 있습니다 .

이것은 메소드에서

개체 메서드에서 메서드 this의 " 소유자 "를 나타냅니다.

이 페이지 상단의 예에서 는 사람 개체 this를 나타냅니다 .

person 개체는 fullName 메서드 소유자 입니다 .

fullName : function() {
  return this.firstName + " " + this.lastName;
}

혼자

단독으로 사용하는 경우 소유자 는 전역 개체이므로 전역 개체를 this참조합니다.

브라우저 창에서 전역 개체는 [object Window]다음과 같습니다.

예시

let x = this;

엄격 모드  에서 단독으로 사용 this되면 Global 객체도 참조합니다 [object Window].

예시

"use strict";
let x = this;

함수의 this (기본값)

JavaScript 함수에서 함수의 소유자는 에 대한 기본 바인딩입니다 this.

따라서 함수에서 thisGlobal 객체를 참조합니다 [object Window].

예시

function myFunction() {
  return this;
}

이것은 함수에서 (엄격)

JavaScript 엄격 모드 는 기본 바인딩을 허용하지 않습니다.

따라서 함수에서 사용할 때 엄격 모드에서는 this입니다 undefined.

예시

"use strict";
function myFunction() {
  return this;
}

이것은 이벤트 핸들러에서

HTML 이벤트 핸들러에서 this이벤트를 수신한 HTML 요소를 나타냅니다.

예시

<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>


개체 메서드 바인딩

이 예에서 this사람 객체입니다(사람 객체는 함수의 "소유자"입니다).

예시

const person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

예시

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

즉, this.firstName 은 (사람) 객체 의 firstName 속성을 의미 합니다.


명시적 함수 바인딩

메소드는 사전 정의된 JavaScript 메소드입니다 call().apply()

둘 다 다른 개체를 인수로 사용하여 개체 메서드를 호출하는 데 사용할 수 있습니다.

이 자습서의 뒷부분에서 자세한 내용 call()읽을 수 있습니다 .apply()

아래 예에서 person2를 인수로 사용하여 person1.fullName을 호출하면 thisperson1의 메서드인 경우에도 person2를 참조합니다.

예시

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // Will return "John Doe"