[Essentials] 클래스(2) - this

01.this

• 일반 (Normal) 함수는 "호출 위치"에 따라 this 정의
• 화살표(Arrow) 함수는 자신이 선언된 "함수 범위"에서 this 정의
• 화살표 함수는 콜백 함수 내에서 this가 정의되지 않으면 window 전역 객체로 설정

• 예제1

const heropy = {
	name: "Heropy",
	normal: function () {
	console.log(this.name);
	},
	arrow: () => { 
		console.log(this.name); // 화살표 함수는 자신이 선언된 "함수 범위"에서 this가 정의
	}
}

// 여기서 함수가 호출되었으므로 그 위치에서 객체 데이터는 heropy 이므로 this.name인 Heropy가 출력됨
heropy.normal(); // Heropy
heropy.arrow(); // undefined

const amy = {
	name: "Amy",
	normal: heropy.normal,
	arrow: heropy.arrow
}

amy.normal(); // Amy, 호출 위치는 여기이며 현재 normal 메서드가 연결된 객체는 amy임
// 따라서 여기서 this는 heropy가 아닌 amy객체를 의미
amy.arrow(); // undefined

• 예제2
• 일반함수 this 출력

function User(name) {
	this.name = name;
}

User.prototype.normal = function () {
	console.log(this.name);
}

User.prototype.arrow = () => {
	console.log(this.name);
}

const heropy = new User("Heropy");

heropy.normal(); // Heropy, 여기서 함수가 호출 되었으므로 현재 normal메서드에 연결된 객체 데이터는 heropy
heropy.arrow(); // undefined

• 일반 함수 & 화살표 함수 this 출력

function User(name) {
  this.name = name;
}

User.prototype.normal = function () {
  console.log(this.name);
}

User.prototype.arrow = () => {
  this.name = "Arrow" // 화살표 함수는 자신이 선언된 "함수 범위"에서 this를 정의
  console.log(this.name);
}

const heropy = new User("Heropy");

heropy.normal(); // Heropy
heropy.arrow(); // Arrow, 화살표 함수가 자신이 선언된 "함수 범위"에서 this가 정의 되어 있기 때문에 출력됨

• 예제3
• 일반 함수 setTimeout()

const timer = {
	name: "Heropy!!",
	timeout: function () {
	setTimeout(function () {
		console.log(this.name);
      // this가 사용된 부분은 일반 함수로 "호출 위치"는?
      // setTimeout이라는 함수의 내부 로직으로 콜백힘수가 실행되므로 호출위치가 setTimeout함수가 된다.
      // 그러므로 this.name을 timer라는 객체 데이터의 name 부분으로 지칭해서 출력할 수 없음
		}, 2000);
	}
}

timer.timeout(); // undefined

• 화살표 함수 setTimeout()

const timer = {
  name: "Heropy!!",
  timeout: function () {
    setTimeout(() => {
      console.log(this.name)
      // this가 사용된 부분은 화살표 함수로 "함수 범위"는?
      // setTimeout 함수가 timeout 메서드의 함수 범위 안에서 실행되고 있고 timeout이라는 메소드가 timer라는 객체 데이터를 가르키고 있기때문에 this를 사용할 수 있다.
      // 따라서 timeout의 메소드가 있는 객체 데이터인 timer의 이름(this.name)이 잘 출력됨
    }, 2000)
  }
}

timer.timeout() // (2초 뒤) "Heropy!!"