04-4. 다양한 OOP 기법

1. typeof vs instanceof

• typeof: 자바스크립트의 연산자로 데이터 타입을 확인할 때 사용됩니다. 결과는 문자열로 반환되며, 기본 데이터 타입에 사용됩니다.
  • 예시: 
  • javascript
    코드 복사
    console.log(typeof 42); // "number" console.log(typeof "hello"); // "string"
• instanceof: 객체가 특정 생성자의 인스턴스인지 확인하는 연산자입니다. 결과는 true 또는 false로 반환됩니다.
  • 예시:
    javascript

    코드 복사

    let arr = []; console.log(arr instanceof Array); // true

2. 프로퍼티 설명자 (Property Descriptor)

• 객체의 프로퍼티에는 설명자(Descriptor)가 있습니다. 설명자는 프로퍼티가 수정 가능 여부, 열거 가능 여부, 재설정 가능 여부를 포함합니다.
• 설명자 속성:
  • value: 프로퍼티의 값.
  • writable: 값을 수정할 수 있는지 여부 (true/false).
  • enumerable: 열거가 가능한지 여부 (true/false).
  • configurable: 설명자를 재설정할 수 있는지 여부 (true/false).
• 프로퍼티 설명자를 확인하거나 설정하는 방법:
  • 설명자 확인: Object.getOwnPropertyDescriptor()
  • 설명자 설정: Object.defineProperty()

3. Object.create()

• 새로운 객체를 생성할 때 특정 프로토타입을 지정할 수 있는 메서드입니다. 첫 번째 매개변수로 프로토타입을, 두 번째 매개변수로 객체의 프로퍼티를 지정할 수 있습니다.
  • 예시:
    javascript

    코드 복사

    let parent = { sayHello: function() { console.log('Hello!'); } }; let child = Object.create(parent); child.sayHello(); // "Hello!"

4. this 바인딩

• **this**는 호출된 함수나 메서드가 실행되는 객체를 참조합니다. 자바스크립트의 this는 호출 방법에 따라 동적으로 바인딩됩니다.
• 전역에서의 this: 전역 함수에서는 this가 window 객체를 가리킵니다(엄격 모드에서는 undefined).
• 메서드 내에서의 this: 호출한 객체를 가리킵니다.
• 생성자 함수에서의 this: 새로 생성된 객체를 참조합니다.
• 화살표 함수의 this: this는 정적으로 바인딩되며, 화살표 함수가 선언된 위치의 상위 스코프에 있는 this를 가리킵니다.

5. bind(), call(), apply()로 this 바인딩

• bind(): 함수의 this를 특정 객체로 바인딩하고, 새로운 함수를 반환합니다.
• call(): 함수의 this를 바인딩하고 즉시 실행합니다. 인수는 개별적으로 전달합니다.
• apply(): call()과 유사하나, 인수를 배열 형태로 전달합니다.

6. Getter/Setter

• Getter/Setter는 프로퍼티에 대한 접근자 함수를 정의합니다. 프로퍼티의 값을 읽거나 설정할 때 함수를 통해 로직을 실행합니다.
  • get: 값을 읽을 때 호출됩니다.
  • set: 값을 변경할 때 호출됩니다.
  • 예시:
  • javascript
    코드 복사
    let person = { firstName: "John", lastName: "Doe", get fullName() { return this.firstName + " " + this.lastName; }, set fullName(name) { [this.firstName, this.lastName] = name.split(" "); } }; console.log(person.fullName); // "John Doe" person.fullName = "Jane Smith"; console.log(person.firstName); // "Jane"

 

4o