This, Class, Scope

객체지향 프로그래밍 --> 함수형 프로그래밍

• 다형성
  • : 하나의 공통된 특성을 기반으로 여러 가지 다른 형태로 확장될 수 있는 성질. 예를 들어, 부모 클래스의 메소드를 자식 클래스에서 재정의하는 방식으로 다양한 형태의 객체가 동일한 메소드를 가질 수 있다.
• 렉시컬 스코프
  • : 함수가 선언된 시점에서 상위 스코프를 결정하는 방식. 실행되는 위치가 아닌, 함수가 선언된 위치에 따라 상위 스코프가 결정된다.
• this 바인딩
  • : 함수 마다 this 라는 특별한 객체가 있고, 함수 호출이 되었을 때 this 값이 결정되는데, this 값이 결정되는 것을 this 바인딩이라고 한다.
• 프로토타입 (prototype)
  • : 객체들이 공통으로 사용할 수 있는 속성이나 메서드를 정의한 공간

---

This란 무엇인가?

this 란 어떤 특정 객체를 가리키고 있는 값입니다.

-----> 함수가 호출될 때 결정이 됨(동적으로 가리키는 객체가 결정)

This의 바인딩 규칙

this 에 객체가 들어갈때를 바인딩 된다! 라고 표현합니다.

this는 네 가지 규칙에 따라 바인딩됩니다.

1. 기본 바인딩 (Default Binding): 일반 함수 호출에서 this는 전역 객체를 가리킵니다. (엄격 모드에서는 undefined)
2. 암묵적 바인딩 (Implicit Binding): 객체의 메소드 호출에서 this는 해당 객체를 가리킵니다.
3. 명시적 바인딩 (Explicit Binding): call, apply, bind 메소드로 this를 명시적으로 설정할 수 있습니다.
4. new 바인딩 (New Binding): 생성자 함수에서 new 키워드를 사용하면, this는 새로 생성된 객체를 가리킵니다.

strict 모드에서는 undefined

 

호출 주체를 항상 파악하기 (obj2가 호출하니까...this는 obj2)

 

암묵적으로 바인딩하는 것은 계속 추적(?)해서 알아내야하니까, 어찌보면 직관적으로 눈에 들어오지 않음

----> 명시적 바인딩(call, apply, bind)

 

 

apply 사용함(배열로 넣어줌), call은 배열형태일 필요없이 각각의 값을 콤마로 넣어줌

 

생성자안에서의 this는 항상 인스턴스를 가리킴

 

this는 kd를 가리킴. Student

 

new 바인딩

new 키워드를 통해 생성자 함수를 호출할 때, 생성자 함수 내부의 **this**는 새로 생성되는 객체(인스턴스)를 가리킵니다.

// 생성자 함수 정의
function Car(maker, model) {
    // new 바인딩에 의해 this는 새로운 객체를 가리킴
    this.maker = maker;
    this.model = model;
}

// new 연산자를 사용해 객체 생성
const myCar = new Car('Toyota', 'Camry');

// 생성된 객체의 프로퍼티 접근
console.log(myCar.maker);
console.log(myCar.model);

 

 

 

<화살표함수 this>

화살표 함수 내에서의 this는 동적 바인딩되지 않고, 단순하게 상위스코프의 this를 따름.

 

상위스코프는 함수스코프를 기준으로함!!!!

여기서 this는 상위 스코프인 전역객체를 가리킴.

 

---

클래스란 무엇인가?

클래스는 객체 지향 프로그래밍의 중요한 개념으로, 객체를 생성하기 위한 템플릿(설계도) 역할을 합니다.

클래스의 기본 구조

JavaScript에서 클래스는 class 키워드를 사용하여 정의할 수 있습니다. 기본적인 클래스 구조는 다음과 같습니다

(객체지향에 필요한 Class).

 

선언된 모든 것은 hoisting 됨.

 

클래스의 특징

• 생성자 함수 (Constructor): 클래스의 인스턴스를 초기화하기 위한 특수한 메소드로, constructor 키워드를 사용합니다.
• 메소드: 클래스 내부에 정의된 함수로, 인스턴스 메소드와 정적 메소드로 나뉩니다.
  • 인스턴스 메소드: 클래스의 인스턴스를 통해 호출되는 메소드입니다.
  • 정적 메소드 (Static Method): 클래스 자체에서 호출되는 메소드로, static 키워드를 사용합니다.

 

클래스는 객체가 가져야 할 속성과 메소드를 정의

클래스는 한 번 정의되면 여러 개의 객체(인스턴스)를 생성할 수 있는 기반이됨.

 

인스턴스는 클래스를 바탕으로 생성된 객체입니다. 인스턴스는 클래스에서 정의한 속성과 메소드를 실제로 가지며, 독립적으로 존재

 

 

인스턴스 매소드와 정적메서드 차이

 

 

 

 

 

 

 

 

상속과 다형성

JavaScript 클래스는 다른 클래스를 상속받을 수 있습니다. 상속을 통해 부모 클래스의 속성과 메소드를 자식 클래스가 물려받을 수 있습니다

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex', 'Labrador');
dog.speak(); // 출력: Rex barks.

- 오버라이드(override)란 자식 클래스에서 상속받은 동일한 메서드를 재정의 하는 것을 의미

---

스코프 체인

스코프 체인은 변수를 찾을 때 현재 스코프에서 찾고, 없으면 상위 스코프로 이동하여 변수를 찾는 방식을 말합니다.

->  내 스코프 내에서 먼저 찾고 없으면 그 상위, 상위 상위... 로 쭉 찾아가는 방식

 

함수 scope.

(전역스코프--> 하나의 함수 스코프)

블록 scope

 

var는 함수스코프 단위로, 블록스코프를 무시함.

let a = 'global';

function outer() {
  let b = 'outer';
  /* if (true) {
	  let d = 10;
  } */

  function inner() {
    let c = 'inner';
    console.log(a); // 출력: global
    console.log(b); // 출력: outer
    console.log(c); // 출력: inner
    // console.log("d:",d);
  }

  inner();
}

outer();

- 가장 가까운 접근 가능한 변수를 찾는 것!!

 

 

결과는 5, 5 ====> 함수 선언시점에 상위 스코프 결정됨. first()에 second(0 내용이 들어간다고 생각하면 안되고, second()안에서 y를 찾을 수 없으니 전역함수(window) 에서 y 찾음.