[JS] Scope, Class, this 바인딩

Scope

: 변수와 함수가 유효한 범위, JS에서는 주로 함수 스코프와 블록 스코프가 사용된다!

 

함수 스코프

함수 내에서 선언된 변수는 함수 내에서만 유효하다

function foo() {
  var x = 'local';
  console.log(x);  // x
}

foo();
console.log(x);  // 유효한 x가 없음! reference error

if(true) {
  var secret = '12345';
}

console.log(secret);  // 12345  if문은 함수가 아니기 때문에 { } 영향 X

 

 

블록 스코프

{ } 로 감싸진 블록 내에서만 유효하다! let, const는 블록 스코프를 지원한다.

{
  let y = 'block scoped';
  console.log(y);  // block scoped
}

console.log(y);  // reference error

 

스코프 체인

변수를 찾을 때 현재 스코프에서 먼저 찾고, 없으면 상위 스코프로 이동하여 변수를 찾는 방식

 

 

클래스

constructor

클래스 인스턴스를 초기화하기 위한 특수 메소드

 

method

클래스 내부에 정의된 함수

instance method

인스턴스를 통해 호출되는 메소드

static method

클래스 자체에서 호출되는 메소드, static 키워드 사용

 

 

상속

다른 클래스를 상속받아 새로운 클래스를 만들 수 있다. 이렇게 생성된 자식 클래스는 부모 클래스로부터 속성과 메소드를 물려받을 수 있다.

extends 키워드 사용

 

 

this 바인딩 규칙

기본 바인딩

독립함수 호출에서 this는 전역 객체를 가리킨다.

엄격 모드에서는 undefined

 

브라우저 환경에서 setTimeout 콜백의 this

setTimeout의 콜백함수는 this가 window를 가리킨다. (브라우저 환경)

setTimeout의 메서드로 호출되거나, 같은 컨텍스트에서 실행되는 것이 아니라 독립적으로 호출되기 때문에 기본 바인딩이되는 것이다!

 

암묵적 바인딩

객체의 메소드 호출에서 this는 메소드를 호출한 객체를 가리킨다!

 

명시적 바인딩

필요에따라 call, apply, bind로 this를 명시할 수 있다.

// call
function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const user = {
  name: 'Bob',
};

greet.call(user);  // Hello, my name is Bob

// apply
function greet(greeting, punctuation) {
  console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}

const user = {
  name: 'Alice'
};

greet.apply(user, ['Hi', '!']);  // Hi, my name is Alice!


// bind
function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const user = {
  name: 'Charlie'
};

const boundGreet = greet.bind(user);
boundGreet();  // Hello, my name is Charlie

 

 

new binding

new 키워드로 생성자 함수를 호출할 때, 생성자 함수의 내부의 this는 새로 생성되는 객체를 가리킨다.

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

const user1 = new User('Charlie');
console.log(user1.name);