코드스피츠 86 객체지향 자바스크립트 - 1회차 (step 30)

Value context vs Identifier context

value context

메모리 주소는 관계없이 메모리 주소안의 값이 같으면 같다고 인식

Identifier context

같은 메모리 주소일 경우 같다고 인식

ex)

const a = { a:3, b:5};
const b = { a:3, b:5};

console.log( a === b );		//false
console.log(JSON.stringify(a) === JSON.stringify(b));		//true

a와 b는 가르키는 메모리 주소도 다르다.
하지만 같은 값을 가지고 있다.

---

Polymorphism (다형성)

1. substitution (확장된 객체는 원본으로 대체 가능 : 대체가능성)
2. internal identity (어떠한 경우에도 태어났을때의 원본 클래스를 유지하려는 속성)

ex)

const Worker = class{
  run(){
    console.log("working");
  }
  print(){
    this.run();
  }
};

const HardWorker = class extends  Worker{
  run(){
    console.log("hardWorking")
  }
};

const worker = new HardWorker();
console.log(worker instanceof Worker);	// true
worker.print();		// hardWorking

HardWorker는 Worker를 extends(넓히다.)하였다.
즉 HardWorker는 포괄적인 집합이다.

---

instanceof

instanceof 연산자는 생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별합니다.

---

worker instanceof Worker => substitution

따라서 worker 인스턴스에서 프로토타입 체인을 통해 HardWorker를 확인하고 그 후 Worker를 찾아 올라가 존재하므로 true가 된다.

---

worker.print() => internal identity

인스턴스가 태어날 당시의 누구냐를 일관성있게 유지해야한다.
즉, worker가 태어날때 당시의 this는 HardWorker이므로
프로토체인을 통해 찾아간 Worker 클래스의 print()에서의 this.run()은 HardWorker.run()이므로 hardWorking이 출력된다.

---

Prototype 작동원리

worker.__proto__ === HardWorker.prototype이고
HardWorker.prototype.constructor === HardWorker이다.
HardWorker.prototype.__proto__ === Worker.prototype이다.

이부분에 대한 내용은 이곳에 자세히 설명해 놓았다.

---

객체의 기능의 캡슐화

const EssentialObject = class{
    #name = "";
    #screen = null;
    constructor(name){
        this.#name = name;
    }
    camouflage(){
        this.#screen = (Math.random() * 10).toString(16).replace(",","");
    }
    get name(){
        return this.#screen || this.#name;
    }
};

---

get

get 구문은 객체의 프로퍼티를 그 프로퍼티를 가져올 때 호출되는 함수로 바인딩합니다.

그냥 뭐

let e = new EssentialObject('misa');
e.camouflage();
e.name

이렇게 실행되는것 같은데

---

const EssentialObject = class{
    #name = "";
    #screen = null;
    constructor(name){
        this.#name = name;
    }
    camouflage(){
        this.#screen = (Math.random() * 10).toString(16).replace(",","");
    }
    name(){
        return this.#screen || this.#name;
    }
};

이렇게 get을 지우고 아래와 같이 사용해도 문제는 없는 듯 한데 굳이 get의 필요성은 솔직히 모르겠다.

let e = new EssentialObject('misa');
e.camouflage();
e.name();

---

은닉화의 이유

처음 추가한 name을 우리는 camouflage 메소드에 의해 #screen이 값을 얻고 이를 통해 name 메소드를 부르지만 결국 #screen의 값이 나오고 실제 #name은 나오지 않는다.(은닉)

---

null || 값

return null || 값의 경우 앞의 값이 null, undefined, false일 경우 뒤의 값이 리턴한다.

---

정리

js는 객체지향 언어이냐? -> yes -> why? -> 다형성을 지닌다. -> 다형성이란? -> 대체가능성(확장된 객체는 원본으로 대체 가능) and 내적일반성(생성 시점의 타입이 내부에 일관성 있게 참조됨.)

객체의 본질 -> 기능의 캡슐화 and 상태관리책임

객체지향 설계원칙 -> SOLID 원칙>객체지향 설계원칙 -> SOLID 원칙