객체 리터럴과 this

자바 스크립트의 객체

객체 리터럴(Object literal)이라고 불리며, key와 value의 형태를 가지는 해시 맵 구조를 자바스크립트의 객체라고 합니다.

아래의 코드와 같이 비슷한 기능을 묶어 객체 리터럴 코드로 만들고 각 메소드를 실행합니다. this는 객체 자신을 가리킵니다.

var yogaClassObj = {
  classRoom : "room1",
  name : "jj",
  time : "AM06:00",
  showHealth : function() {
    console.log(this.name + "님, 오늘은 " + this.time + "에 운동을 하셨네요");
  }
}

yogaClassObj.showHealth();

this

객체 안에서의 this는 그 객체 자신을 가리킵니다. 그 외 다양한 곳에서 this가 무엇을 가리키는지(참조하는지) 알아보겠습니다.

this가 사용되는 곳	this가 참조하는 것
Method	자신이 속한 객체
Alone	global 객체
function	global 객체
function > strict 모드	undefined
event	이벤트를 받은 element 요소
Method > call(), apply()	모든 객체 참조 가능

1. this in a Method 예제

var yogaClassObj = {
  classRoom : "room1",
  name : "jj",
  time : "AM06:00",
  showHealth : function() {
    console.log(this.name + "님, 오늘은 " + this.time + "에 운동을 하셨네요");
  }
  showClass : function() {
  	return this.classRoom +"강의실에서"+ this.time+"시간에 요가수업이 시작됩니다";
  }
}

showHeath 메소드나 showClass의 메소드의 this는 yogaClassObj 객체를 나타냅니다.

그렇다면, 어떤 함수의 내부함수일 경우 this는 어느객체를 나타낼까요? 아래 코드를 통해 알아보겠습니다.

/**
* 참조 사이트 - https://poiemaweb.com/js-this
**/

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    var that = this;  // Workaround : this === obj

    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    function bar() {
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1

      console.log("bar's that: ",  that); // obj
      console.log("bar's that.value: ", that.value); // 100
    }
    bar();
  }
};

obj.foo();

[참조 사이트 - https://poiemaweb.com/js-this] 내부 함수에서 this를 특별히 바인딩해주지 않으면 global 객체를 참조함을 알수있다.

내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다. 더글라스 크락포드는 “이것은 설계 단계의 결함으로 메소드가 내부함수를 사용하여 자신의 작업을 돕게 할 수 없다는 것을 의미한다” 라고 말한다. 내부함수의 this가 전역객체를 참조하는 것을 회피방법은 아래와 같다.

2. this Alone 예제

var x = this;
console.log(x); // output [object Window]

외부에 홀로 쓰일때는 gobal object를 참조합니다. 현재 브라우저 윈도우의 global 객체인 object Window를 참조합니다.

3. this in a Function (Default)

function testFunction() {
	return this;
}

위의 함수에서 this는 global object인 object Window를 참조합니다.

4. this in a Function (Strict)

"use struct"
function testFunction() {
	return this;
}

strict 모드를 사용할 경우 위 함수의 this 는 undefined 를 나타냅니다.

5. this in Event Handlers

<html>
<body>

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

</body>
</html>

HTML 태그에서 this 는 해당 element를 참조합니다. 버튼 클릭시 해당 element의 style값에 display=none을 입력하여 버튼이 사라지게 됩니다.

참조

1. https://www.w3schools.com/js/js_this.asp

JavaScript this

The JavaScript this Keyword Example var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; Try it Yourself » What is this? The JavaScript this keyword ref

www.w3schools.com

2. https://www.edwith.org/boostcourse-web/lecture/16779/

[LECTURE] 2) 객체 리터럴과 this : edwith

들어가기 전에 자바스크립트 객체를 활용하면 비슷한 행위를 하는 코드를 묶어서 모듈화를 간단히 만들 수 있습니다. key-value구조의 자바스크립트 객체를 통해 어떻게 모듈화를 할... - moons

www.edwith.org

3. https://poiemaweb.com/js-this

this | PoiemaWeb

자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해서 사용된다. 자바스크립트의 경우 함수 호출 패턴에 따라 어떤 객체를 `this`에 바인딩할 지가 결정된다. 즉, 함수 호출 패턴에

poiemaweb.com

기록