💻 TIL 23.03.07

🤷 면접 대비 공부를 이어서 하려 한다.

1. This

• JS에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가되는데, 해당 함수 호출 방식에 따라 바인딩 되는 객체가 달라지는 특징이 있다.

함수 호출 방식

1. 함수 호출
2. 메소드 호출
3. 생성자 함수 호출
4. apply/call/bind 호출

var foo = function () {
  console.dir(this);
};

// 1. 함수 호출
foo(); // window
// window.foo();

// 2. 메소드 호출
var obj = { foo: foo };
obj.foo(); // obj

// 3. 생성자 함수 호출
var instance = new foo(); // instance

// 4. apply/call/bind 호출
var bar = { name: 'bar' };
foo.call(bar);   // bar
foo.apply(bar);  // bar
foo.bind(bar)(); // bar

1. 함수 호출

• 전역 객체는 모든 객체의 최상위 객체를 의미하며 브라우저 상에서는 window, terminal 상에서는 global이다.
• this는 기본적으로 전역객체에 바인딩 되는데, 함수안에 있는 내부함수의 경우에도 this는 외부함수가 아닌 전역객체에 바인딩된다.

var foo = function(){
	var boo = function(){
    	console.dir(this);
    }
    boo() // window
}
foo();

2. 메소드 호출

• 함수가 객체의 value이면 메소드로서 호출되는데, 이때 함수 내부의 this는 객체에 바인딩 된다.

var object1 = {
	name: "Kim",
    sayName: function(){
    	console.log(this.name);
    }
}
var object2 = {
	name: "Pee"
}

object2.sayName = object1.sayName;

object1.sayName(); // Kim
object2.sayName(); // Pee

3. 생성자 함수 호출

• JS의 생성자는 일반 함수에 new 연산자를 붙여 호출하면 생성자 함수처럼 동작한다.

function Person(name) {
  // 생성자 함수 코드 실행 전 -------- 1
  this.name = name;  // --------- 2
  // 생성된 함수 반환 -------------- 3
}

var me = new Person('Lee');
console.log(me.name); // Lee

4. apply/call/bind 호출

• JS엔진은 암묵적으로 this를 1~3번의 기준으로 바인딩한다. 하지만 그 이외에도 직접 바인딩하는 방법도 존재하는데 apply와 call이 그러하다.

• 그러나 명시적인 바인딩이라고 하더라도 apply와 call은 콜백함수가 실행되는 시점에 global context로 바인딩이된다. 이때 apply와 call은 실행한 결과 값을 반환하기 때문에 영구적으로 this를 가리키도록 할 수 없는 단점이 있다.

• 반면에 bind() 메서드는 this가 bind에 제공된 값으로 설정된 함수를 생성하며, 해당 함수의 인자값의 순서 또한 영구적으로 지정할 수 있다.

var healthObj = {
	name : "달리기",
	lastTime : "PM10:12",
	showHealth : function() {
        setTimeout(function(){
            console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
        }, 500);
    }
}

healthObj.showHealth();

해당 코드의 결과값을 언뜻 보면 "달리기님 오늘은 PM10:12에 운동을 하셨네요"라고 생각할 수 있지만, 해당 결과 값은 "undefined님, 오늘은 undefined에 운동을 하셨네요"이다.
왜냐하면 setTimeout은 비동기 함수 이기 때문에, 해당 함수가 실행될 때는 이미 showHealth가 반환된 상태이기 때문이다.

var healthObj = {
	name : "달리기",
	lastTime : "PM10:12",
	showHealth : function() {
        setTimeout(runFunction, 500);
    }
}
var runFunction = function(){
	console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
}.bind(healthObj);

healthObj.showHealth();

위와 같이 runFunction에 healthObj에 bind를 하게 되면, this를 영구적으로 바인드하게 된다.

❤️ 도움받은 곳

https://poiemaweb.com/js-this
https://enai.tistory.com/14