Object.create() 사용 

연습 2 

personStore 객체 내에서 값이 "hello"를 기록하는 함수 인 greet 속성을 만듭니다. 

const personStore = {
  // add code here
};

personStore.greet(); // -> Logs 'hello'

해결 방법 2 

const personStore = {
  greet: function someName() {
    console.log("hello");
  },
};

여기서 인사는 객체의 속성 일뿐입니다. 그 가치는 (무언가를 수행하는) 함수입니다. 점 표기법 personStore.greet를 사용하여 객체의 다른 속성에 액세스하는 것처럼 해당 속성에 액세스 할 수 있습니다. 그리고 함수이기 때문에 괄호를 추가하여 함수를 실행할 수 있으므로 personStore.greet ()가 작동하고 정의한 함수를 실행합니다.

이 함수의 이름 someName은 greet 속성에 할당되어 있으므로 someName은 직접 사용되지 않으므로 중요하지 않습니다. 그래서 우리는 이것을 익명의 함수로 바꿀 수 있습니다 :

const personStore = {
  greet: function () {
    console.log("hello");
  },
};

나중에 ES6에서 새롭고 간결한 구문을 도입하여 이 예제를 다음과 같이 작성할 수 있습니다.

const personStore = {
  greet() {
    console.log("hello");
  },
};

여기에 표시된 세 가지 솔루션 모두 정확히 동일한 작업을 수행합니다.

연습 3 

이름과 나이를 입력으로 받는 personFromPersonStore 함수를 만듭니다. 함수가 호출되면 personStore 객체의 Object.create 메소드를 사용하여 사람 객체를 생성합니다. 

function personFromPersonStore(name, age) {
  // add code here
}

const sandra = personFromPersonStore("Sandra", 26);
console.log(sandra.name);
// -> Logs 'Sandra'
console.log(sandra.age);
//-> Logs 26
sandra.greet();
//-> Logs 'hello'

해결책 3 

function personFromPersonStore(name, age) {
  const person = Object.create(personStore);
  person.name = name;
  person.age = age;
  return person;
}

여기서 주목해야 할 중요한 점은 Object.create ()는 전달 된 인수에 관계없이 항상 빈 객체를 반환한다는 것입니다. 따라서 처음에 사람은 속성이 없는 빈 개체입니다.

모든 개체에는 숨겨진 [[prototype]] 속성 (잘못된 이름!)이 있습니다. 간단히 말해서 객체에 대한 속성을 호출하면 JS 엔진은 먼저 객체에 해당 속성이 있는지 확인합니다. 이러한 속성을 찾을 수 없는 경우 [[prototype]] 속성을 살펴보고 어떤 개체에서 파생되었는지 확인합니다. const person = Object.create (personStore)는 JS 엔진에게 새로운 빈 객체를 생성하고 이를 반환하고 이를 사람이라고 부르도록 지시합니다. 그 속성이 있다면.

따라서 sandra.name이 호출되면 JS 엔진은 sandra 객체에 name 속성이 있는지 확인합니다. 그렇기 때문에 그 값이 반환 됩니다. 다음으로 sandra.age가 호출되면 JS 엔진은 sandra 객체에 age 속성이 있는지 확인합니다. 그렇기 때문에 그 값이 반환 됩니다. 다음으로 sandra.greet ()가 호출됩니다. JS 엔진은 sandra 객체에 greet 속성이 있는지 확인합니다. 그렇지 않습니다. 실패하는 대신 JS 엔진은 personStore를 가리키는 sandra의 숨겨진 [[prototype]] 속성을 살펴보고 personStore에 greet 속성이 있는지 확인합니다. 그래서 그 함수가 호출됩니다.

이것은 기본적으로 클래스를 사용하지 않고 클래스 기반 객체 지향 언어가 상속이라고 부르는 것을 달성합니다. 이것은 JavaScript의 프로토 타입 아키텍처를 전체적으로 단순화 한 것입니다. 자세한 내용은 javascript.info의 이 장이 매우 유용하다는 것을 알았습니다.

연습 4 

이미 작성한 코드를 편집하지 않고 "Hi, my name is [name]"을 기록하는 personStore 객체에 소개 메소드를 추가합니다. 

// add code here
sandra.introduce();
// -> Logs 'Hi, my name is Sandra'

해결 방법 4 

personStore.introduce = function () {
  console.log(`Hi, my name is ${this.name}`);
};

나중에 personStore에 메소드를 추가 할 수 있습니다. 그리고 JS의 동적 특성은 우리가 이 메서드를 만들기 전에 산드라가 만들어졌지만 여전히 사용할 수 있다는 것을 의미합니다. 여기에서 this 키워드에 대한 첫 번째 소개도 볼 수 있습니다. 이 컨텍스트에서 이것은 항상 호출되는 함수의 왼쪽에 있는 객체의 값입니다. 그래서 여기에서, Introduction ()이 호출 될 때, 그것의 왼쪽에 있는 객체는 산드라입니다. 그래서 이것은 산드라에게 할당됩니다. 이제 메서드 본문에서 this.name이 sandra.name과 같으므로 해당 값이 반환 됩니다.

객체에 메서드를 선언 할 때 화살표 함수를 사용하지 마십시오. 화살표 함수에서 이것은 어휘 적으로 범위가 지정됩니다. 따라서 이 예제에서 선언 한 경우

personStore.introduce = () => {
  console.log(`Hi, my name is ${this.name}`);
};

여기서 이것은 산드라를 언급하지 않습니다. 소개 함수에 this가 있는지 확인하는 것입니다. 따라서 이것이 있는지 확인하기 위해 외부 범위를 살펴볼 것입니다. 여기서 외부 범위는 전역 메모리 또는 창입니다.이 창에는 this라는 개체가 있으므로 해당 개체에 이름 속성이 있는지 확인합니다. 그렇지 않으므로 undefined가 반환 됩니다.

프로토 타입 체인, JavaScript의 어휘 범위 지정의 의미, 화살표 함수가 이 동작을 어떻게 변경하는지 이해하는 것은 언어를 처음 접하는 사람에게 JavaScript에서 가장 어려운 부분 일 것입니다. 연습이 필요하지만 결국 이해가 될 것입니다.