19. Class

(1) 프로토타입 방식으로 객체 정의
// (1-1) 생성자 함수
function Person(name, age) {
    this.name = name;
    this.age = age;
}
// (1-2) 프로토타입 메서드
Person.prototype.sayHello = function() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
};
// (1-3) 정적 메서드
Person.sayHello = function() {
  console.log('Hello')
}
const person1 = new Person("Alice", 25);
person1.sayHello(); // Hi, I'm Alice and I'm 25 years old.



(2) 클래스 방식으로 객체 정의
class Person {
// (2-1) 생성자
  constructor(name, age) {
        this.name = name;
        this.age = age;
    }
// (2-2) 프로토타입 메서드
    sayHello() {
        console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
    }
// (2-3) 정적 메서드
  	static sayHello() {
      console.log('Hello!');
    }
}

const person1 = new Person("Alice", 25);
person1.sayHello(); // Hi, I'm Alice and I'm 25 years old.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  // Getter: fullName에 접근할 때 호출됨
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  // Setter: fullName에 값을 할당할 때 호출됨
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(" ");
  }
}

const me = new Person("Jinho", "Tak");

// Getter 호출
console.log(me.fullName); // "Jinho Tak"

// Setter 호출
me.fullName = "John Doe";
console.log(me.firstName); // "John"
console.log(me.lastName); // "Doe"

class MyClass {
  // 정적 프로퍼티
  static staticProperty = 'I am a static property';

  // 인스턴스 프로퍼티
  // 😀 클래스 필드 문법을 사용하면 constructor 없이도 동일한 결과를 얻을 수 있습니다.
  instanceProperty = 'I am an instance property';

  // 비공개(Private) 프로퍼티
  #privateProperty = 'I am private';

  // 비공개 프로퍼티에 접근하는 메서드
  getPrivateProperty() {
    return this.#privateProperty;
  }
}

const instance = new MyClass();
console.log(MyClass.staticProperty); // "I am a static property"
console.log(instance.instanceProperty); // "I am an instance property"
console.log(instance.#privateProperty); 1)
console.log(instance.getPrivateProperty()); 2)

1) 클래스 외부에서 비공개 필드에 직접 접근하려는 시도
console.log(instance.#privateProperty);
// SyntaxError: Private field '#privateProperty' must be declared in an enclosing class

2) 클래스 내부에서 정의된 메서드로 #privateProperty에 접근
console.log(instance.getPrivateProperty());
// "I am private"

class BaseClass {
  greet() {
    console.log("Hello from BaseClass");
  }
}

class SuperClass extends BaseClass {
  greet() {
    console.log("Hello from SuperClass");
  }
}

class SubClass extends SuperClass {
  greet() {
    console.log("Hello from SubClass");
  }
}

const subInstance = new SubClass();
subInstance.greet(); // "Hello from SubClass"

function getBaseClass() {
  return Math.random() > 0.5
    ? class A {
        greet() {
          console.log("Hello from A");
        }
      }
    : class B {
        greet() {
          console.log("Hello from B");
        }
      };
}

class Child extends getBaseClass() {
  greetChild() {
    console.log("Hello from Child");
  }
}

const instance = new Child();
instance.greet(); // "Hello from A" 또는 "Hello from B"
instance.greetChild(); // "Hello from Child"

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

class Child extends Parent {}

const child = new Child("Alice");
console.log(child.name); // "Alice"

class Child extends Parent {
  constructor(...args) {
    super(...args);
  }
}

/* 
1) 서브클래스에서 `constructor` 를 생략하지 않는 경우 서브클래스의 `constructor`에서는 반드시 `super`를 호출해야 한다.
*/
class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    // this.age = age; // super 호출 전에 this를 참조하면 에러 발생
    super(name); // 부모 클래스의 생성자 호출,
    this.age = age; // 이후에 this를 참조 가능
  }
}

const child = new Child("Alice", 25);
console.log(child.name); // "Alice"
console.log(child.age); // 25

/* 
2) 서브클래스의 `constructor`에서 `super`를 호출하기 전에는 `this`를 참조할 수 없다.
*/
class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    // this.age = age; // super 호출 전에 this를 참조하면 에러 발생
    super(name); // 부모 클래스의 생성자 호출
    this.age = age; // 이후에 this를 참조 가능, 아닐경우 ReferenceError
  }
}

const child = new Child("Alice", 25);
console.log(child.name); // "Alice"
console.log(child.age); // 25

/* 
3) `super`는 반드시 서브클래스의 `constructor`에서만 호출한다. 서브클래스가 아닌 클래스의 `constructor`나 함수에서 `super`를 호출하면 에러가 발생한다.
*/
class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name) {
    super(name); // 서브클래스의 constructor에서만 호출 가능
  }
}

const child = new Child("Alice");
console.log(child.name); // "Alice"

class Parent {
  greet() {
    console.log("Hello from Parent");
  }
}

class Child extends Parent {
  greet() {
    super.greet(); // Parent의 greet 메서드 호출
    console.log("Hello from Child");
  }
}

const child = new Child();
child.greet();
// 출력:
// "Hello from Parent"
// "Hello from Child"
/*
Child 클래스의 greet 메서드는 super.greet()를 호출하여 부모 클래스 Parent의 greet 메서드를 실행합니다.
이 동작이 가능한 이유는 greet 메서드가 클래스의 메서드로 정의되어 [[HomeObject]]를 가지고 있기 때문입니다.
*/

/*
2) 객체 리터럴의 축약 메서드에서 super 참조
*/
const parent = {
  greet() {
    console.log("Hello from Parent");
  },
};

const child = {
  greet() {
    super.greet(); // parent 객체의 greet 메서드 호출
    console.log("Hello from Child");
  },
};

// child의 프로토타입을 parent로 설정
Object.setPrototypeOf(child, parent);

child.greet();
// 출력:
// "Hello from Parent"
// "Hello from Child"
/*
child.greet는 축약 메서드로 정의되었으므로 [[HomeObject]]를 가집니다.
이를 통해 super.greet()를 호출할 때 parent.greet 메서드를 참조할 수 있습니다.
*/

/*
3) 일반 함수에서 super 참조
*/
class Parent {
  greet() {
    console.log("Hello from Parent");
  }
}

class Child extends Parent {
  greetFunction() {
    const func = function () {
      super.greet(); // 에러 발생
    };
    func();
  }
}

const child = new Child();
child.greetFunction();
// SyntaxError: 'super' keyword unexpected here
/*
일반 함수(위의 func)는 [[HomeObject]]를 가지지 않으므로 super를 참조할 수 없습니다.
*/

/*
4) 화살표 함수에서의 super
*/
class Parent {
  greet() {
    console.log("Hello from Parent");
  }
}

class Child extends Parent {
  greet() {
    const arrowFunc = () => {
      super.greet(); // 부모의 greet 메서드 호출
    };
    arrowFunc();
  }
}

const child = new Child();
child.greet();
// 출력:
// "Hello from Parent"
/*
화살표 함수는 this와 super를 상위 스코프에서 상속받으므로, super.greet()를 사용할 수 있습니다.
*/

class Parent {
  static staticMethod() {
    console.log("Hello from Parent");
  }
}

class Child extends Parent {}

// 서브클래스에서 슈퍼클래스의 정적 메서드 호출
Child.staticMethod(); // "Hello from Parent"

class MyArray extends Array {
  uniq() {
    return this.filter((v, i, self) => self.indexOf(v) === i);
  }

  average() {
    return this.reduce((pre, cur) => pre + cur, 0) / this.length;
  }
}

const myArray = new MyArray(1, 1, 2, 3);
console.log(myArray);

console.log(myArray.uniq());
console.log(myArray.average());

class MyArray extends Array {
  uniq() {
    return this.filter((v, i, self) => self.indexOf(v) === i); // 새로운 배열 반환
  }
}

const myArray = new MyArray(1, 1, 2, 3);
const uniqArray = myArray.uniq(); // filter 호출

console.log(uniqArray instanceof MyArray); // false
console.log(uniqArray instanceof Array); // true

class MyArray extends Array {
  static get [Symbol.species]() {
    return MyArray; // 반환 타입을 MyArray로 설정
  }

  uniq() {
    return this.filter((v, i, self) => self.indexOf(v) === i); // MyArray 인스턴스를 반환
  }
}

const myArray = new MyArray(1, 1, 2, 3);
const uniqArray = myArray.uniq(); // MyArray 인스턴스를 반환

console.log(uniqArray instanceof MyArray); // true
console.log(uniqArray instanceof Array); // true
const result = myArray
  .uniq()
  .map((x) => x * 2)
  .average(); // 메서드 체이닝도 가능!
console.log(result); // (2 + 4 + 6) / 3 = 4