프로토타입 대 클래스에 대한 또 다른 게시물

일반적으로 우리는 클래스 및 인스턴스 측면에서 생각하는 경향이 있습니다.
prototype 및 class 이론에 대해 간단히 검토해 보겠습니다.

일반 함수를 사용하여 클래스의 환상을 만듭니다.

function foo() {
  console.log('this is just a regular function');
  this.foo = 'foo';
} // « undefined

const f = new foo(); // « Object { foo: 'foo' }
// this is just a regular function

f.foo; // « 'foo'

그런 다음 클래스 메서드를 만드는 방법은 foo에 속성을 추가하는 것입니다prototype.

foo.prototype.sayHi = () => {
  console.log('hi');
  return 1;
}; // « function sayHi()

f; // « Object { foo: 'foo' }

f.sayHi(); // « 1
// hi

이것은 ES5(및 ts 이전)가 구문 설탕을 도입한 표준입니다.

class goo {
  constructor() {
    this.goo = 'goo';
  }
  sayHi() {
    console.log('hi');
    return 1;
  }
} // « undefined

g = new goo(); // « Object { goo: "goo" }
g.sayHi(); // « 1
// hi

진실은...

수업이 없습니다. 인스턴스도 아닙니다. 클래스 지향 언어에서는 스탬프를 찍거나 금형에서 동작을 복사하는 것과 같이 클래스의 여러 복사본(인스턴스)을 만들 수 있습니다. js에는 일반 친숙한 개체만 있습니다.

...js는 프로토타입 지향적입니다.

위의 예제에서 실제로 수행하는 작업은 새 개체를 만들고 이를 다른 평범한 일반 개체에 연결하는 것입니다.

이 연결된 개체는 prototype 입니다.

우리는 각각의 새로운 객체를 우리가 호출한 함수의 prototype에 연결하고 있습니다.

메모리에는 일반 js 객체가 있습니다. 그 이상도 이하도 아닌.

function foo() {
  this.foo = 'foo';
}
foo.prototype.sayHi = () => console.log('say hi');

f = new foo();

/*

 -------------  linked to   -----------------  linked to  ------------------  linked to
| foo: string | ---------> | sayHi: Function | ---------> | { toString... } | ---------> null
 -------------              -----------------             ------------------
  ^                           ^                              ^
  f                          foo.prototype                 Object.prototype

*/

foo.prototype; // Object { sayHi: Function }
Object.getPrototypeOf(f) == foo.prototype; // « true

Object.prototype; // « Object { ... }
Object.getPrototypeOf(foo.prototype) == Object.prototype; // « true

Object.getPrototypeOf(Object.prototype); // « null

IMO는 클래식 인스턴스보다 훨씬 강력하고 우아합니다. 모든 것이 메모리 내 객체이므로 실행 시간에 수정할 수도 있습니다.

function player() {}
player.prototype.sayHi = () => console.log('hi');

a = new player();
b = new player();
a.sayHi(); // « 'hi'
b.sayHi(); // « 'hi'

// we can modify the behaviour in execution time

player.prototype.sayHi = () => console.log('hello');

a.sayHi(); // « 'hello'
b.sayHi(); // « 'hello'

이론 적용

이것을 염두에 두고. 우리(우리 팀)는 클래스 및 인스턴스 측면에서 생각하는 것을 멈추고 프로토타입 객체에 대해 생각하기 시작합니다.
o1 및 o2 두 개체가 필요하다고 가정해 보십시오. 각 개체는 일부 기본 동작/값을 재정의합니다. 다음과 같이 코딩합니다.

const defaultBehaviour = {
  name: 'guest',

  sayHi() {
    return 'hi ' + this.name;
  },

  foo() {
    return 42;
  },
};

const o1 =  Object.setPrototypeOf({ name: 'Jane Doe' }, defaultBehaviour);

o1.sayHi(); // « hi Jane Doe
o1.foo(); // « 42

const o2 = Object.setPrototypeOf({ foo: () => 100 }, defaultBehaviour);

o2.sayHi(); // « hi guest
o2.foo(); // « 100

클래스 설탕 구문은 완벽하게 유효합니다. 가면을 벗고 js 🦾의 진정한 행동을 주장하자

--

읽을 만큼 열심히 추천할 수는 없습니다Kyle Simpson .

--

undraw.co의 표지 이미지

읽어주셔서 감사합니다 💚.