JavaScript - this

자바스크립트에서의 this는 다른 언어와 조금 다르게 동작한다.

strinct mode인지 아닌지에 따라 일부 차이가 있다고 하지만 이 부분은 제외하고 아래의 경우가 존재한다.

 

 

1. 전역객체(window)객체를 의미

• 함수의 외부에서 사용될 때
• 객체의 값으로 들어있는 함수가 아닌, 일반 함수의 내부에서 사용될 때

function getThis(){
	console.log(this); // window객체가 출력된다.
}

console.log(this); // window객체가 출력된다.

 

 

2. 함수를 호출한 객체를 의미

• 객체의 값으로 들어있는 함수내에서 사용될 때

function getFullName(){
	return `${this.first} ${this.last}`; // this는 객체 ann이다.
}

const ann = {
	first : ‘Kim’,
	last : ‘Ann’,
	getFullName
}

 

 

3. arrow function에서의 this

• arrow function이 선언될 때의 this와 같다.

console.log(this); // 이 this는 window 객체이다.

const getThis = () => {
	console.log(this); // 여기서도 this는 window객체이다.
}

getThis(); // window객체

function getFullName(){
	getThis(); // getThis가 선언될 때 this가 window객체였기때문에 여기서도 window임.
	return `${this.first} ${this.last}`; // 객체 ann이다.
}

const ann = {
	first : ‘Kim’,
	last : ‘Ann’,
	getFullName
}

 

 

4. dom 이벤트처리기에서의 this

• 이벤트의 currentTarget 요소로 설정된다.

function bluify(e) {
  console.log(this === e.currentTarget); // 언제나 true
  console.log(this === e.target); // currentTarget과 target이 같은 객체면 true
  
  this.style.backgroundColor = "#A5D9F3";
}

 

 

5. 인라인 이벤트 핸들러에서

// 버튼 요소를 보여준다.
<button onclick="alert(this.tagName.toLowerCase());">this 표시</button>


// 전역객체(window)를 보여준다.
<button onclick="alert((function() { return this; })());">
  내부 this 표시
</button>

 

 

6. this를 명시적으로 바인딩할 수 있는 함수 사용

• apply

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

const ann = {};

// apply 메소드는 생성자함수 Person을 호출한다. 이때 this에 객체 ann를 바인딩한다.
Person.apply(ann, ['ann']);

console.log(ann); // { name: 'ann' }

 

 

 

• call

const ann = {};

// apply메서드는 배열의 형태로 값을 넘겼고, call메서드는 값을 나열해서 넘긴다.
Person.call(ann, 'ann');

console.log(ann); // { name: 'ann' }

 

 

 

• bind

- bind함수는 파라미터를 바인딩해서 새로운 함수를 만들어내는 함수이다.

- 그러니까 return이 함수이다.

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

// bind는 한 번만 동작한다.
const makeAnn = Person.bind({name: 'ann'});
console.log(makeAnn()); // 'ann'

const makeKathy = ann.bind({name: 'kathy'});
console.log(kathy); // 'ann'

 

 

7. 생성자 함수에서

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

// new 연산자로 객체를 생성할 경우, 생성자 함수 내부의 this는 생성할 객체를 의미한다.
const ann = new Person('ann');
console.log(ann); // ann 객체의 name 프로퍼티에 값이 ann이 들어가있다.

const kathy = Person('kathy'); // 이 경우 함수 내부 this는 전역객체(window)이다.
console.log(kathy); // undefined;

 

 

 

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

https://poiemaweb.com/js-this