new 키워드 사용 

연습 5 

this 키워드를 사용하여 greet라는 범위에 단일 속성을 저장하는 함수 PersonConstructor를 만듭니다. greet는 'hello'문자열을 기록하는 함수 여야 합니다.

function PersonConstructor() {
  // add code here
}

const simon = new PersonConstructor();
simon.greet();
// -> Logs 'hello'

해결책 5

function PersonConstructor() {
  this.greet = function () {
    console.log("hello");
  };
}

잠깐, 여기서 무슨 일이 일어나고 있습니까? 사실 우리가 전에 보지 못한 것은 없습니다. new 키워드는 수정 자이며 그 뒤에 오는 함수 (이 경우 PersonConstructor 함수)를 약간 변경합니다. 당신은 어떤 변화를 요구합니까? 이전 연습에서 보지 못한 것은 없습니다. 기본적으로 새로운 빈 객체를 만들고 [[prototype]]을 올바르게 설정하고 this 값에 할당하고 이 객체를 반환합니다. 물론이 객체에 메서드가 될 새 속성을 추가 할 수 있습니다. 여기에 greet 메서드를 개체에 추가합니다.

new는 마법적인 일을 하지 않습니다. 이 시점까지 수동으로 했던 작업을 자동화하고 빈 객체를 만들고 [[prototype]]을 설정하고 반환합니다. 그게 다야!

연습 6 

이름과 나이를 입력으로 받는 personFromConstructor 함수를 만듭니다. 호출되면 함수는 Object.create 메서드 대신 new 키워드를 사용하여 사람 개체를 만듭니다.

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

const mike = personFromConstructor("Mike", 30);
console.log(mike.name); // -> Logs 'Mike'
console.log(mike.age); //-> Logs 30
mike.greet(); //-> Logs 'hello'

해결책 6 

function personFromConstructor(name, age) {
  const person = new PersonConstructor();
  person.name = name;
  person.age = age;
  return person;
}

new를 사용하여 새 개체를 만든 다음 추가 속성 (매개 변수로 전달됨)을 제공하고 이 개체를 반환하는 조합입니다. 여기에서 끔찍한 새로운 일은 없습니다. 우리가 전에 본 두 가지 패턴의 조합 일 뿐입니다.

연습 7 

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

mike.introduce();
// -> Logs 'Hi, my name is Mike'

해결책 7 

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

이것은 연습 4와 매우 유사하며 객체에 메소드를 추가합니다. 그러나 어떤 개체? 연습 4에서는 객체의 이름을 personStore로 수동으로 정의 했으므로 해당 객체의 속성으로 간단히 소개를 추가했습니다. 여기서는 JS 엔진이 new 키워드를 사용하여 자동으로 생성하는 객체의 이름이 없습니다. 그러면 함수를 어디에 저장할 수 있습니까? 대답은 (혼란스럽게 명명 된) 속성 프로토 타입이며, 그 자체가 객체입니다.

모든 함수는 JavaScript의 객체라는 것을 기억하십니까? 따라서 PersonConstructor는 ()를 사용할 때 실행할 수있는 함수입니다. 그러나 그것은 또한 객체이고, 우리는 점 표기법을 사용하여 다른 객체처럼 그것의 속성에 접근 할 수 있습니다. 따라서 personConstructor 함수에 메서드를 추가하려면 프로토 타입 속성에 액세스하고 여기에 메서드를 추가합니다.

연습 2, 3, 4를 연습 5, 6, 7과 비교하고 대조하는 데 시간을 할애하십시오. 그들이 근본적으로 같은 일을 하고 있음을 알게 될 것입니다. 이 비교를 통해 new 키워드의 기능과 속성 프로토 타입이 참조하는 내용이 명확 해집니다.