Section 11: Behind the Scenes: Classes & OOP - Prototypes & More

 

The goals

💪🏻What happens behind the scenes of classes and objects?

✌🏻Constructor functions (without classes)

👍🏻Prototype & Prototypical Inheritance

 

 

class Person {
  name = 'Max';

  constructor() {
    this.age = 30;
  }

  greet() {
    console.log(
      "Hi, I am " + this.name + "and I am " + this.age + "years old."
    );
  }
}
const person = new Person();
person.greet();

function Person() {
  this.age = 30;
  this.name = 'Max';
  this.greet = function() {
    console.log(
      "Hi, I am " + this.name + "and I am " + this.age + "years old."
    );
  }
}
const person = new Person();
person.greet();

These codes are the same actually.

 

What's 'new' 's job here?

In the codes above, if there is no 'new' keyword in front of Person() function it will generate errors.

Because in the function, it doesn't return any value there, but if we use 'new', it defines 'this = {}' inside of the object so it's like making an empty object and allocate the value we set. And do 'return this' at last.

This is the reason we can get the value when we use 'new' keyword.

 

프로토타입 - 요약

프로토타입은 헷갈리고 어려운 주제일 수 있습니다 - 그렇기 때문에 프로토타입을 제대로 이해하는 것이 중요합니다.

프로토타입은 다른 객체("O"라고 하겠습니다)에 연결된 객체("P"라고 하겠습니다)입니다 - 프로토타입 객체는 다른 객체("O")에서 정의되지 않은 프로퍼티나 메서드로 작업할 때 다른 객체("O")가 접근할 수 있는 "대체 객체" 같은 역할을 합니다.

기본적으로 JavaScript의 모든 객체에는 이러한 대체 객체가 있습니다 (즉 프로토타입 객체)가 있습니다 - 이에 대해서는 이후 강의에서 자세히 설명합니다.

생성자 함수를 기반으로 "생성될" 객체에 대한 프로토타입 객체를 구성하는 방법을 볼 때 특히 헷갈릴 수 있습니다. (생성자 함수 객체의 .prototype 프로퍼티를 통해 수행됨)

아래의 예시를 살펴보세요

function User() {
    ... // 어떤 논리인지는 중요하지 않습니다 => user 객체가 가질 프로퍼티 등을 구성합니다
 
User.prototype = { age: 30 }; // user 함수 객체가 아닌 "생성될" user 객체에 대한 프로토타입 객체를 설정합니다

여기의 User 함수에는 물론 프로토타입 객체(즉 연결된 대체 객체)가 있습니다 - 하지만 이것은 prototype 프로퍼티가 가리키는 객체가 아닙니다. 대신 모든 객체(함수는 객체임)가 가지고 있는 특수 __proto__ 프로퍼티를 통해 연결된 대체/프로토타입 객체에 접근할 수 있습니다.

prototype 프로퍼티는 다른 기능을 수행합니다. 이 User 생성자 함수로 생성된 새 객체가 가질 프로토타입 객체를 설정합니다.

That means:

const userA = new User();
userA.__proto__ === User.prototype; // 참
userA.__proto__ === User.__proto__ // 거짓

Quiz

질문 1:

“생성자 함수”라는 게 무엇일까요?

• 클래스랑 동일하되 그저 더 오래된 구문입니다.

• new 키워드를 사용하거나 사용하지 않고 호출하여 이를 기반으로 객체를 생성할 수 있는 함수입니다.

• new 키워드와 함께 호출하여 이를 기반으로 객체를 생성할 수 있는 함수입니다.

질문 2:

다음은 유효한 생성자 함수일까요?

function adminUser(usrName) {
	this.name = usrName;
}

• 아니오, 생성자 함수는 대문자로 시작해야 합니다(예: AdminUser가 맞음).

• 아니요, 프로퍼티 이름은 매개변수 이름과 같아야 합니다(예: this.usrName).

• 예
  이름을 대문자로 시작하는 것이 절대적으로 권장되지만 엄밀히 말하자면 필수는 아닙니다.

   

질문 3:

"프로토타입 상속"의 개념은 무엇일까요?

• 기능은 객체 간에 공유될 수 있습니다(객체는 프로토타입 메서드 및 프로퍼티로 '대체'될 수 있음).

• 메서드와 프로퍼티는 하나의 객체로 제한될 수 있습니다.

• 객체는 애플리케이션의 다른 위치에서 사용될 수 있고 객체가 생성된 파일로 제한되지 않습니다.

프로토타입은 다른 객체를 연결할 수 있는 "대체 객체"입니다.

질문 4:

someObj.__proto__와 SomeFunction.prototype의 차이점은 무엇일까요?

• 차이는 없습니다. 둘 다 접근되는 객체의 프로토타입을 가져오고 설정하는 데에 사용될 수 있습니다.

• __proto__는 someObj의 프로토타입 객체를 가리키고 prototype은 SomeFunction을 기반으로 생성된 객체에 프로토타입으로 할당될 프로토타입 객체를 가리킵니다.

• __proto__는 SomeFunction의 프로토타입 객체를 가리킵니다. 왜냐하면 SomeFunction.prototype이 (함수 자체와 그 함수에 기반한 모든 객체에 대해) 이 프로토타입 객체를 설정하기 때문입니다.

 

It's really important to understand the difference between the prototype property on constructor functions(생성자 함수) where we configure what will be added to objects that are created based on that constructor function and the __proto property which is available on every object, not just on constructor functions or function objects which in the end points to the prototype that has been assigned to this object, so to the fallback object that has been assigned to that object, that is really important to understand