• ex) 화살표 함수, call, bind, apply 등

💬 Answer

🌏 엄격모드 (Strict Mode)

this에 대해 찾아보면 엄격모드에 대해 많이 볼 수 있습니다.

엄격모드란 무엇일까?
자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔습니다.
기존의 기능을 변경하지 않으면서 새로운 기능이 되었습니다.

덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었습니다.
하지만 자바스크립트 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점도 생겼습니다.

그런데 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생겨 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었습니다.
대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화되게 해놓았습니다.

엄격모드
1. 기존에는 조용히 무시되던 에러들을 throwing합니다.
2.JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다.
가끔씩 엄격 모드의 코드가 비-엄격모드의 동이랗ㄴ 코드보다 더 빨리 작동하도록 만들어집니다.
3. ECMAScript의 차기 버전들에서 정의 될 문법을 금지합니다.

사용방법
"use strict";(또는 'use strict';) 을 다른 구문 작성 전에 삽입합니다.

// 전체 스크립트 엄격 모드 구문
'use strict';
var v = "Hi!  I'm a strict mode script!";

// 함수에서 strict mode 적용
function strict(){
// 함수-레벨 strict mode 문법
  'use strict';
  function nested() { return "And so am I!"; }
  return "Hi!  I'm a strict mode function!  " + nested();
}
function notStrict() { return "I'm not strict."; }

// module에서 strict mode 적용
function strict() {
    // 모듈이기때문에 기본적으로 엄격합니다
}
export default strict;

🌏 자바스크립트 this

메소드를 호출한 객체가 저장되어 있는 속성
this의 값은 함수를 호출한 방법에 의해 결정됩니다.
ES5는 함수를 어떻게 호출했는지 상관하지 않고 this값을 설정할 수 있는 bind메서드를 도입했고, 후에 스스로의 this바인딩을 제공하지않는 화살표 함수를 추가 했습니다.

-일반 함수에서 this는 window 객체
-event Listener에서는 이벤트를 발생시킨 객체
-메소드에서는 메소드를 호출한 객체

상황에 따라 다르게 결정된다.
1. 함수에서의 this
2. 메소드에서의 this
3. 생성자에서의 this
4. 객체에서의 this
5. 간접 실행에서의 this
6. 바인딩 함수에서의 this
7. 화살표 함수에서의 this

👉 this의 전역 객체

브라우저에서 this의 전역객체는 window이다.

👉 메소드 에서의 this

메소드에서의 this는 메소드 실행때 메소드를 소유하고 있는 객체.

👉 생성자 에서의 this

생성자는 new 키워드를 붙여야한다. new를 붙이지 않을 시 에러 발생!
ES6부터는 class를 사용 할 수 있다.
생성자에서 this

function person(_name, _age) {
    this.name = _name;
    this.age = _age;
}

/* Peson객체 메소드 추가 */
person.prototype.changeName = function(newName) {
    this.name = newName;
}

// 1 
const p = new person('Youngjin', '22');
console.log(p.name); // Youngjin 이 출력
// 2 
p.changeName('Requiem');
console.log(p.name); // Requiem 이 출력

1에서 가리키는 this는 새로 만들어질 person을 가리키고 p가 만들어질 때 Youngjin과 22가 들어와 p.name은 p가 만들어 질 때 이름 Youngjin이 됨.

changeName메소드에서 this가 가리키는게 만들어진 person이라 p.changeName('Requiem')을 하게되면 만들어진 p의 이름이 Youngjin -> Requiem으로 변경됨.

class생성자에서의 this

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    changeName(newName) {
        this.name = newName;
    }
}

const p = new Person('Youngjin', '22');
console.log(p.name); // Youngjin 이 출력
p.changeName('Requiem');
console.log(p.name); // Requiem 이 출력

👉 객체에서의 this

객체에서의 this는 객체를 가리킴.

👉 간접 실행에서의 this

간접 실행이란 call(), apply()메소드를 호출하는 것을 의미한다.
call()메소드는 주어진 this값 및 각각 전달된 인수와 함께 함수를 호출함.
apply()메소드는 주어진 this값과 배열(또는 유사 배열 객체)로 제공되는 arguments로 함수를 호출함.

둘다 유사하지만 call()은 인수 목록, apply()는 인수 배열을 받는 것이 차이.
간접 실행에서 첫 번째 매개변수로 this

👉 바인딩 함수에서의 this

bind()메소드와 함께 사용되며 bind()는 새로운 함수를 만드는 역할을 함.
strict mode일때 아닐 때 차이를 보임.

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

unboundGetX는 전역에서 호출이 되었고, boundGetX는 module의 getX를 호출함.

👉 화살표 함수에서의 this

화살표 함수는 간단한 형태로 정의하거나 혹은 문맥을 바인드 하기 위해 주로 사용됨.

let person = {
    name: "youngjin",
    getName: function () {
        console.log(this) // person 객체를 가리킨다
        setTimeout(() => {
          console.log(this) // person객체를 가리킨다
          console.log(this.name); // youngjin 을 출력한다.
      }, 1000);
  }
}

person.getName();

👉 일반함수의 this와 화살표함수의 this의 차이.

자바스크립트 내부함수는 일반함수, 메소드, 콜백함수 어디서 선언되었든지 this가 전역객체를 가리킴.
일반함수의 this는 window(전역)을 가르키며, 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킴.

👉 Call, Apply, Bind함수에 대해

3가지 방법은 this를 바인딩 하기 위한 방법.

• Call() : this를 바인딩하면서 함수를 호출하는 것, 두 번째 인자를 하나씩 넘기는 것
• Apply() : this를 바인딩하면서 함수를 호출하는 것, 두 번째 인자가 배열
• bind() : 함수를 호출하는 것이 아닌 this가 바인딩된 새로운 함수를 리턴함.

👉 use strict모드에서의 this

일반 함수에서 this는 undefined가 바인딩됨.

이해가 한번에 잘 안되니 자주 찾아봐야겠다.

📘 참고

https://ko.javascript.info/strict-mode
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode
https://kkan0615.github.io/youngjin.github.io/javascript_this/#
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
https://sunnykim91.tistory.com/121