JS : This

객체

객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 논리적인 단위로묶은 복합적 자료구조이다.

동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 매서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야한다.

const circle = {
// 프로퍼티 : 객체 고유의 상태 데이터
radius : 5, 
// 매서드 : 상태 데이터를 참조하고 있는 동작 
getDiameter(){
// 이 매서드가 자신이 속한 객체의 프로퍼티나 다른 매서드를 참조하려면
// 자신이 속한 객체인 챡칟을 참조할 수 있어야 한다.
  return 2 * circle.radius;
 }
};

console.log(circle.getDiameter());//10

this는 자신이 속한 객체 또는 자신이 생성한 인스턴스를 가리키는 자기 참조 변수이다. this를 통해서 자신이 속한 객체나 자신이 생성한 인스턴스의 프로퍼티나 매서드를 참조할 수 있다.

this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있어야한다. 함수를 호출하면 argument 객체와 this가 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다.

함수를 호출하면 argument 객체와 this가 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 argument 객체가 암묵적으로 내부에 전달된다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용 할 수 있다. 단, this가 가리키는 값 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

this 바인딩

바인딩이란 식별자와 값을 연결하는 과정을 의미한다. 변수 선언은 변수 이름과 학보된 메모리 공간의 주소를 바인딩 하는 것이다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다.

// 객체 리터럴
const circle = {
 radius : 5,
 getDiameter(){
 	return 2 * this.radius;
 }
};

console.log(circle.getDiameter()); //10

// 생성자 함수
function Circle(radius){
// this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  this.radius = radius;
}

Circle.prototype.getDiameter = function()

단독으로 사용하는 this

단독으로 this를 호출하는 경우에는 global object를 가리키며 브라우저에서 호출하는 경우는 object window가 됩니다. 이는 ES5에서 추가된 strict mode에서도 마찬가지 입니다.

'use strict';

let a = this;
console.log(z);//Window

함수 안에서 사용하는 this

함수안에서의 this는 함수의 주인인 window객체에 바인딩 됩니다.

function myFuction(){
	return this;
}
console.log(myFunction()); //Window

let num = 0;
function addNum(){
	this.num = 100;
  	num++;
  
  console.log(num); //101
  console.log(window.num); //101
  console.log(num === window.num); //true
}

addNum();

위의 코드에서 this.num의 this는 window객체를 가리킵니다. 그래서 num은결국 전역 변수를 가리키게 됩니다.

다만 strict mode에서는 조금 다릅니다. 함수 내의 this에 디폴트 바인딩이 없기 때문에 undefined가 됩니다.

"use strict";

function myFuction(){
	return this;
}
console.log(myFunction()); //undefined

let num = 0;
function addNum(){
	this.num = 100;//ERROR: Cannot set property 'num' of undefined
  	num++;
 
}

addNum();

메서드 안에서 사용하는 this

만일 일반 함수가 아닌 메서드라면 어떨까? 메서드 호출시 메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩 된다.

let person = {
  firstName:'John',
  lastName:'Doe',
  fullName: function(){
  	return this.firtstName + '' +. this.lastName;
  },
};

person.fullName(); //'John Doe'

let num = 0;

function showNum(){
	console.log(this.num);
}

showNum(); //0

var obj = {
	num: 200,
    func: showNum,
};

obj.func() //200

이벤트 핸들러 안에서 쓴 this

이벤트 핸들러 안에서 this는 이벤트를 받는 HTML 요소를 가리킵니다.

let btn = document.querySelector('#btn')
btn.addEventListener('click', function(){
	console.log(this) //#btn
});

생성자 안에서 쓴 this

생성자 함수가 생성하는 객체로 this가 바인딩 됩니다.

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

let kim =. new Person('kim');
let lee =. new Person('lee');

console.log(kim.name); //kim
console.log(leee.name); //lee

let name = 'window';
function Person(name){
	this.name = name;
  
let kim = Person('kim');
  
console.log(window.name); //kim
}