Javascript this 란?

이번 글에서는 Javascript의 this에 대해 배운점을 정리하려합니다.

Javascript의 this는 선언이 아닌 호출에 따라 값이 바뀝니다.

따라서 this는 현재 호출자가 누구냐고 물어보는 것과 같습니다.

this가 사용되는 상황은 다음과 같습니다.

단독으로 사용할 경우

this; // window {}​

함수 & 메서드 안에서 사용할 경우

// 메서드 호출 시

const caller = {
	f: function() {
    	alert(this === window)
    },
}

caller.f() // false, 호출자는 caller 객체


// 함수 호출 시

function nonStricMode() {
	return this;
}

function stricMode() {
	'use strict'
    return this
}

console.log(nonStricMode()) // window
console.log(stricMode()) // undefined
console.log(window.stricMode()) // window

// 함수 안에서 this는 함수의 주인에게 바인딩된다.
// 함수의 주인은 window객체이다.

// 다만 stric mode(엄격모드)에서는 조금 다르다.
// 함수 내의 this에 디폴트 바인딩이 없기 때문에 undefined가 된다.
// 하지만 window를 함수 호출 앞에 붙여주면 해결된다.

이벤트 핸들러 안에서 사용할 경우

const btn = document.querySelector('#btn')

btn.addEventListener('click',function(){
	console.log(this); // 호출자는 HTML 요소 #btn
})​

생성자 안에서 사용할 경우

function NewObject(name, color) {
  this.name = name
  this.color = color
  this.isWindow = function() {
    return this === window
  }
}

const newObj = new NewObject('nana', 'yellow')
console.log(newObj.name) // nana
console.log(newObj.color) // yellow
console.log(newObj.isWindow()) // false

const newObj2 = new NewObject('didi', 'red')
console.log(newObj2.name) // didi
console.log(newObj2.color) // red
console.log(newObj2.isWindow()) // false

// 생성자 함수가 생성하는 객체로 this가 바인딩된다.
// new 키워드를 빼먹는 순간 일반 함수 호출과 같아지기때문에
// 이 경우 this는 window에 바인딩된다.

명시적 바인딩을 할 경우

// this의 역할을 명시적으로 지정해 줄 때
// function.prototype.call, function.prototype.bind, function.prototype.apply과 
// 같은 메소드를 사용하여 할 수 있다.

// apply & call

func.apply(thisArg, [argsArray])

// thisArg : 함수 내부의 this에 바인딩할 객체
// argsArray : 함수에 전달할 argument의 배열

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

const foo = {};

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

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

Person.call(foo, 1, 2, 3);
// call() 메소드의 경우, apply()와 기능은 같지만 apply()의 두번째 인자에서 배열 형태로 넘긴 것을
// 각각 하나의 인자로 넘긴다.


// bind

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

Person.prototype.doSomething = function (callback) {
	if(typeof callback == 'function') {
    	// callback.call(this);
        // this가 바인딩된 새로운 함수를 호출
        callback.bind(this)();
    }
};

function foo() {
	console.log('#', this.name);
}

const p = new Person('Lee');
p.doSomething(foo); // 'Lee';

화살표 함수로 쓸 경우

// 함수 안에서 this가 전역 객체가 될 경우
// 화살표 함수로 변경하여 해결 가능하다.

const Person = function (name, age) {
	this.name = name;
    this.age = age;
    this.say = function () {
    	console.log(this) // Person {name: "Hyun", age: 28}
        
        setTimeout(fuction () {
        	console.log(this); // window
            console.log(this.name + ' is ' + this.age + ' years old ');
        }, 100);
    };
};

const me = new Person('Hyun', 28);

me.say(); // global is undefined years old

==>

const Person = function (name, age) {
	this.name = name;
    this.age = age;
    this.say = function () {
    	console.log(this) // Person {name: "Hyun", age: 28}
        
        setTimeout(() => {
        	console.log(this); // window
            console.log(this.name + ' is ' + this.age + ' years old ');
        }, 100);
    };
};

const me = new Person('Hyun', 28);

me.say(); // Hyun is 28 years old​

꼭 명심해야할 점은 this는 누가 호출했느냐에 따라 결정된다는 것이다.

참고한 곳 : https://im-developer.tistory.com/96 https://poiemaweb.com/js-this https://nykim.work/71 https://blueshw.github.io/2018/03/12/this/