☀️ THIS

this는 다른 객체지향 언어와는 다르게 자바스크립트 에서는 어디에서나 사용이 가능하다. this가 상황별로 많이 달라지기 때문에 잘 알고 사용하면 유용할 수도 있다.

this는 실행컨텍스트가 생성될 때 결정된다. 이말을 this를 bind한다고 해서 ThisBinding이라고 하는것이다.

---

1️⃣ 기본 바인딩

기본 바인딩은 전역공간에서의 this를 말한다.
전역공간에서 this는 전역객체를 가리킨다.
런타임에 따라 this는 window(브라우저 환경) 또는 global(node 환경)을 각각 가리킨다.

이때 조심해야 될것은 엄격모드(use strict)를 사용하게 되면 전역객체가 기본 바인딩 대상에서 제외된다. 이 경우에는 this가 바인딩 될 객체가 존재하지 않기 때문에 undefined 값을 가지게 된다.

런타임 환경이란 javascript로 만들어둔 프로그램이 구동중인 환경을 말한다. html파일 안에 숨겨두어 크롬브라우저 등에서 연다고 한다면 브라우저 환경인 것이다.

console.log(this); // 런타임 환경에 따라 Window 나 browser객체가 나온다.

💡 node 환경에서 전역코드에 this를 출력해보면 빈 객체가 나오게 된다. 이 빈 객체는 사실 모듈 객체에 있는 exports 객체와 완벽하게 동일한 객체이다.

• Node JS 환경에서 this가 두 가지 방향으로 바인딩 된다.

함수 내에서의 this

function sayHello() {
  console.log('Hello, ' + this.name); 
  // "this"는 전역 객체(window)를 가리킨다.
  // 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미한다.
}
sayHello();  

함수에서 this를 찍어보면 호출 주체를 명시할 수 없기 때문에 전역객체가 출력된다.

---

2️⃣ 암시적 바인딩 this!

★ 메서드로서 호출할 때 그 메서드 내부에서의 this

js에서 함수는 단독으로 호출될 수 있을 뿐만 아니라 객체의 메서드로도 호출이 된다. 메서드로 호출이 된 경우 this가 점 바로 앞에 있는 객체에 바인딩 된다. 이러한 경우 암시적 바인딩 이라고 부른다.

💡 함수와 메서드는 서로 비슷해 보이지만 독립성을 기준으로 차이가 있다. 함수는 그자체로 독립적인 기능을 수행한다. 하지만 메서드는 자신을 호출한 대상 객체에 대한 동작을 수행 하는것이다.
호출 방식의 차이 : 함수() ? 객체.메서드()

객체 메서드내에서의 this

const person = {
  name: 'John',
  greet: function() {
    console.log('Hello, ' + this.name); 
    // "this"는 현재 객체(person)를 가리킵니다.
	// 호출 주체를 명시할 수 있기 때문에 this는 해당 객체(person)를 의미한다.
  }
};
person.greet(); // 출력: "Hello, John"

함수에서 this를 찍어보면 호출 주체를 명시할 수 없기 때문에 전역객체가 출력되고 객체 메서드 내에서는 호출주체(person{})를 명시하여 객체내에서 출력이 된다.

let obj1 = {
  outer: function () {
    console.log("outer", this);
    let innerFunc = function () {
      console.log("inner", this);
    };
    innerFunc(); //inner 전역변수
    let obj2 = {
      innerMethod: innerFunc,
    };
    obj2.innerMethod(); // inner obj2
  },
};
obj1.outer(); // outer obj1

this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경( 메서드 내부인지, 함수 내부인지 )은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지가 관건이라는 것을 알 수 있다.

★ 콜백 함수 호출 시 그 함수 내부에서의 this (1)

콜백 함수는 전달인자로 다른 함수에 전달되는 함수를 말한다.

콜백함수 내부의 this는 해당 콜백함수를 넘겨받은 함수(메서드)가 정한 규칙에 따라 값이 결정된다. 콜백 함수도 함수기 때문에 this는 전역 객체를 참조하지만, 콜백함수를 넘겨받은 함수에서 콜백 함수에 별도로 this를 지정한 경우는 예외적으로 그 대상을 참조할 수 있다. (Ex. addEventListener() )

// 별도 지정 없음 : 전역객체

setTimeout(function () { console.log(this) }, 300);
// 별도 지정 없음 : 전역객체
[1, 2, 3, 4, 5].forEach(function(x) {
  console.log(this, x);
});
// addListener 안에서의 this는 항상 호출한 주체의 element를 return하도록 설계되었음
// 따라서 this는 button을 의미함
document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector('#a').addEventListener('click', function(e) {
  console.log(this, e);
});

• ✅ setTimeout 함수, forEach 메서드는 콜백 함수를 호출할 때 대상이 될 this를 지정하지 않으므로`, this는 곧 window객체
• ✅ addEventListner 메서드는 콜백 함수 호출 시, 자신의 this를 상속하므로, this는 addEventListner의 앞부분(button 태그)

★ 콜백함수에서의 this(2)

만일 우리가 직접 아래⬇️와 같은 콜백함수를 만들었다면 showReturnValue()함수에서 obj.name이 출력되야 할것 같다. 하지만 undefined가 출력된다.

const obj = {
  name: "hoheesu",
  getName() {
    return this.name;
  },
};

function showReturnValue(callBack) {
  console.log(callBack());
}

console.log(obj.getName()); //hoheesu
showReturnValue(obj.getName); //undefined

분명 obj.getName과 callBack은 완벽하게 동일한 함수의 주소를 참조하고 있는데 서로의 값은 다르게 나오는 것이다. 그 이유는 점연산에 있다.

우리가 점연산이나 대괄호연산을 통해 객체의 프로퍼티에 접근을 하면 참조타입이라는 특별한 값을 반환해준다. < 참조타입은 JS명세서에서만 사용되는 타입이다 >

참조타입 : (base, name, strict)를 함께 넘겨주는 타입이다.

obj.getName() 처럼 바로 호출을 하게 되면 참조 타입을 통해 암시적 바인딩을 하지만 function showReturnValue(callBack) { callBack() } 처럼 복제하여 다른변수에 값을 담는다면 함수의 참조값만 남게 된다.
☞ 점연산을 통해 얻은 값을 바로 호출하지 않는다면 암시적 바인딩을 기대할 수 없다.
이렇듯 복제를 거친다면 바인딩된 this를 쉽게 잃어버리는 문제때문에 명시적으로 ThisBinding을 할수있는 방법들이 있다
해결 방법.

---

3️⃣ 명시적 this 바인딩

함수객체는 call() / apply() / bind() 등의 메서드를 통해서 자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 명시적으로 바인딩할 수 있는 방법을 제공한다.

★ call() / apply() 메서드

call()과 apply()는 첫번째 인수로 this를 바인딩할 객체를 전달한다. 두 메서드는 거의 동일하지만, 두번째 매개변수로 객체의 인자를 전달해주는데(e.g. 생성자의 매개변수), call은 매개변수의 목록, apply는 배열을 받는다는 차이점이 있다.

사용방법 예시)

// 전역객체를 바라보는 현상에서 명시적 binding
let func = function (a, b, c) {
  console.log(this, a, b, c);
};
func.call({ x: 1 }, 4, 5, 6); // { x: 1 } 4 5 6
func.apply({ x: 1 }, [4, 5, 6]); // { x: 1 } 4 5 6

// 호출주체가 있는 경우 명시적 binding
let obj = {
  a: 1,
  method: function (x, y) {
    console.log(this.a, x, y);
  },
};
obj.method.call({ a: 1 }, 5, 6); // 4 5 6
obj.method.apply({ a: 1 }, [5, 6]); // 4 5 6

★ call() apply() 사용 예제

call()과 apply()를 사용하여 생성자 내부에서 다른 생성자를 호출(공통된 내용의 반복 제거)할 수 있다.

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}
function Student(name, gender, school) {
	Person.call(this, name, gender); // 여기서 this는 student 인스턴스!
  this.school = school;
}
function Employee(name, gender, company) {
  Person.apply(this, [name, gender]); // 여기서 this는 employee 인스턴스!
  this.company = company;
}
let kd = new Student('길동', 'male', '서울대');
let ks = new Employee('길순', 'female', '삼성');

⬆️위 코드에서 Student, Employee는 모두 name과 gender 가 필요한Person이다. 그러니 Student와 Employee 인스턴스를 만들 때 마다 세 가지 속성을 모두 각 생성자 함수에 넣기 보다는 Person이라는 생성자 함수를 별도로 빼는게 구조화에 도움이 더 된다.

★ bind 메서드

call과는 다르게 즉시 호출하지는 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하는 메서드이다.

✅ 함수에 this를 미리 적용한다
✅ 부분 적용 함수 구현할 때 용이하다.

// 함수에 this 미리 적용
let func = function (a, b, c, d) {
	console.log(this, a, b, c, d);
};
let bindFunc1 = func.bind({ x: 1 }); // 바로 호출되지는 않는다. 
bindFunc1(5, 6, 7, 8); // { x: 1 } 5 6 7 8
// 부분 적용 함수 구현 
let bindFunc2 = func.bind({ x: 1 }, 4, 5); // 4와 5를 미리 적용
bindFunc2(6, 7); // { x: 1 } 4 5 6 7
bindFunc2(8, 9); // { x: 1 } 4 5 8 9

console.log(func.name); // func
console.log(bindFunc1.name); // bound func
console.log(bindFunc1.name); // bound func

bind 메서드를 적용해서 새로 만든 함수는 name 프로퍼티에 ‘bound func’ 라는 접두어인 name프로퍼티가 붙는다. ➡️ 이후에 함수를 추적하기 쉽다.

let func = function (a, b, c, d) {
	console.log(this, a, b, c, d);
};
let bindFunc = func.bind({ x:1 }, 4, 5);
// func와 bindFunc의 name 프로퍼티의 차이를 살펴보세요!
console.log(func.name); // func
console.log(bindFunc.name); // bound func

★ 콜백함수에서 명시적 바인딩

그렇다면 ⬆️위에 있던 콜백함수에서의 바인딩 문제 를 어떻게 해결 할 수 있는지 코드로 작성을 해보자면,

☆ call과 apply를 이용하여 해결하기

const obj = {
  name: "hoheesu",
  getName() {
    return this.name;
  },
};

function showReturnValue(callBack) {
  console.log(callBack.call(obj)); // console.log(callBack.apply(obj));
}

showReturnValue(obj.getName); //undefined

이런식으로 call과 apply메서드를 이용하여 바인딩을 해줄때는 함수를 호출할 때 바인딩을 해줄 수 있다.

☆ bind메서드를 이용하여 해결하기

const obj = {
  name: "hoheesu",
  getName() {
    return this.name;
  },
};

function showReturnValue(callBack) {
  console.log(callBack());
}

const boundGetName = obj.getName.bind(obj);
showReturnValue(boundGetName); //undefined

bind를 이용하여 명시적 this바인딩을 할 때는 바탕으로 새로운 호출함수를 만들어 this 바인딩을 하는 방식이다.

4️⃣ new 바인딩

JavaScript에서 함수를 new 연산자로 호출하게 되면 생성자 함수로서의 역할을 함수가 수행할 수 있게 된다.
아주 간단하게 설명하자면 new연산자로 호출하게되면 ➡️ 새로운 객체를 생성 ➡️ 함수의 코드를 실행 ➡️ 새로 생성된 객체를 반환 이 과정에서 this는 새로운 객체가 생성될때 binding된다.

코드로 표현을 한다면 ⬇️아래사진처럼 작성 할 수 있을것이다.

✅ 생성자 함수 내부에서의 this는 항상 인스턴스를 지칭한다.

const Cat = function (name, age) {
  this.bark = "야옹";
  this.name = name;
  this.age = age;
};

const choco = new Cat("초코", 7); //this : choco
const nabi = new Cat("나비", 5); //this : nabi

⬆️ 위 코드에서 생성자 함수는 function (name, age){ ... } 부분이다. 생성자 함수 내부의 this는 새롭게 생성된 인스턴스(위 코드에서는 choco와 nabi )를 지칭한다.

만일 함수가 중복해서 바인딩을 하게 된다면
New 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩
우선순위에 따라 바인딩된다.

5️⃣ 화살표 함수

ES6에서 처음 도입된 화살표 함수는, 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 없다. this바인딩 자체가 없다는 말은 : <this 이전의 값-상위값-이 유지된다>는 것이다.
ES6에서는 함수 내부에서 this가 전역객체를 바라보는 문제 때문에 화살표함수를 도입한 것이다.

일반 함수와 화살표 함수의 가장 큰 차이점은 this binding 여부이다.

let obj = {
  outer: function () {
    let innerFunc1 = () => {
      console.log("innerFnc1", this);
    };
    innerFunc1(); // innerFnc1 { outer: [Function: outer] }
    function innerFunc2() {
      console.log("innerFnc2", this);
    }
    innerFunc2(); //innerFnc2 global{}
  },
};

obj.outer();

⬆️ 코드를 보면 화살표 함수를 사용하여 this를 호출하면 자신의 상위값인 outer가 바로 출력되지만 기본 함수 선언식으로 this를 호출하면 전역객체가 출력된다.

6️⃣ 그외 this 우회방법

★ 변수를 활용하는 방법

내부 스코프에 이미 존재하는 this를 별도의 변수에 할당하는 방식

• 흔히 사용하는 변수 명은 _this, that, self 등이 있다.

let obj1 = {
  outer: function () {
    console.log("outer", this); // outer { outer: [Function: outer] }
    let self = this;
    console.log("self", this); // self { outer: [Function: outer] }
    let innerFnc = function () {
      console.log("inner", self); // inner { outer: [Function: outer] }
    };
    innerFnc();
  },
};
obj1.outer();

⬆️ 위 코드처럼 self라는 변수에 this를 할당함으로써 함수를 호출할때 렉시컬스코프에 의해 self에 접근할 수 있게되고, self가 포함되어있는 상위 객체를 참조할 수 있는 것이다.

🧹 예시 코드를 통해 정리

const outer = {
  name: "hoheesu",
  innerFnc: function () {
    setTimeout(function () {
      console.log(this.name);
    }, 1);
  },
};
outer.innerFnc(); //undefined

⬆️ 위 코드는 undefined가 출력되는 코드이다. setTimeout에 콜백으로 넘겨진 함수의 this는 setTimeout에 의해 실행될때 전역객체에 바인딩이 되기 때문이다. 콜백 내부에서 해당 함수를 호출한 객체에 접근하기 위한 방식은 여러개가 있다.

① 화살표함수

const obj = {
  name: "hoheesu",
  logThisLater: function () {
    setTimeout(() => {
      console.log(this.name);
    }, 100);
  },
};

obj.logThisLater();

② 변수를 활용

const obj = {
  name: "hoheesu",
  logThisLater: function () {
    const _this = this;
    setTimeout(function () {
      console.log(_this.name);
    }, 100);
  },
};

obj.logThisLater();

---

참고문헌
[10분 테코톡] 🥦 브콜의 This