내가 Vue와 프로젝트를 시작했을 때js, 나는 자바스크립트에 대해 아는 것이 매우 적다는 것을 깨달았다.그 이후로 저는 JS를 연구해 왔습니다. 그래서 저는 JavaScript를 사용하여 대상을 대상으로 프로그래밍을 하기 시작했습니다.나는 많은 것을 배웠지만, 내가 가장 이해하기 어려운 개념은 아마도 원형일 것이다.
이 박문을 통해 나는 내가 이해할 수 있는 방식으로 그것을 해석할 수 있기를 바란다.

소개

구조 함수는 새로운 대상을 만드는 함수입니다.JavaScript에서는 다음과 같이 표시됩니다.

function Person(name, age) {
   this.name = name;
   this.age = age;
}

구조 함수를 사용하여 새 객체를 작성하는 구문은 다음과 같습니다.

const me = new Person("Nicole", 19);

me현재 name니콜과 age19가 있습니다.네가 상상한 것처럼 간단하다.
지금 상상해 보면 우리는 대상Person을 만들고 싶다. 그 속성은 팔, 손, 손가락과 이름을 포함한다.

function Person(arms, hands, fingers, name) {
   this.arms = arms;
   this.hands = hands;
   this.fingers = fingers;
   this.name = name;
}

4개의 인스턴스Person를 생성하면 다음과 같습니다.

const person1 = new Person(2, 2, 10, "Alice");
const person2 = new Person(2, 2, 10, "Bob");
const person3 = new Person(2, 2, 10, "Ursula");
const person4 = new Person(2, 2, 10, "Hanspeter");

짜증나고 반복되고...이때 원형이 유용해졌다.

원형

원형은 대상의 모든 실례 사이에서 속성을 공유하는 데 사용됩니다.위의 예를 들면 다음과 같습니다.

Person.prototype = {
   constructor: Person,
   arms: 2,
   hands: 2,
   fingers: 10
}

이prototype 대상을 사용하여 구조 함수로 만든 Person의 네 가지 실례가 더욱 간결해 보이고 작업량도 적다.

function Person(name) {
   this.name = name;
}
const person1 = new Person("Alice");
const person2 = new Person("Bob");
const person3 = new Person("Ursula");
const person4 = new Person("Hanspeter");

내가 말한 바와 같이 그들의 작업량은 더욱 작고 중복성도 더욱 작지만, 모두 위에 원형이 없는 제품과 같은 특성을 가지고 있다.

그것은 보기에 더욱 깨끗할 뿐만 아니라, 값도 바꾸기 쉽다.
가령 당신이 아주 어리석은 이유로 모든 사람을 위해 두 손으로 타자를 치지만, 이 프로그램은 실제로는 한 손만 만드는 사람이다. (왜 우리가 팔과 손가락의 속성을 필요로 하는지는 이제 중요하지 않다.)너는 반드시 매번을 겪어야 한다.독신대상의 실례를 보면 두 손의 값뿐만 아니라 열 손가락의 값도 바꾼다.네 개의 실례만 있습니다. 여덟 개의 변경이 필요합니다.이 원형이 있으면 너는 단지 두 가지 변화를 할 수 있다.
이것은 가장 좋은 예는 아니지만, 나는 그것이 문제를 설명할 수 있다고 생각한다.

단일 원형 속성과 원형 대상

위에서 나는 원형 대상을 사용했는데, 많은 속성을 공유해야 할 때, 그것은 매우 좋다.그러나 공유 속성이 하나만 있는 경우 다음과 같이 작성할 수 있습니다.

Person.prototype.age = 30;

그것을 더 크게 만들 필요는 없다.

원형 함수

함수를 원형의 속성으로 저장할 수도 있다.
원형 객체:

Person.prototype = {
   introduce: function() {
      console.log(`Hello, my name is ${this.name}`);
   }
}

단일 프로토타입 속성:

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

건조사:인

프로토타입 대상에서 구조 함수를 정의한 것을 알 수 있습니다.이 점은 매우 중요하다. 만약 우리가 구조 함수를 정의하지 않는다면 대상의 구조 함수는 Object가 아니라 Person일 것이다.
자, 이제 이 문장을 뜯어서 더욱 분명하게 합시다.
너는 대상의 구조 함수를 가지고 있다.

function Person(name, age){
   this.name = name;
   this.age = age;
}

그리고 이 구조 함수로 대상을 만듭니다.

const me = new Person("Nicole", 19);

me의 구조 함수는Person이다.나는 이 점이 매우 분명하다고 생각한다.

me.constructor === Person
→ true

단, Person에 원형 대상을 만들고 구조 함수를 정의하지 않았을 때me는 구조 함수Object를 가지고 있습니다.

Person.prototype = {
   introduce: function() {
      console.log(`Hello, my name is ${this.name}`);
   }
}
const me = new Person("Nicole", 19);
console.log(me.constructor === Person);
console.log(me.constructor === Object);
→ false
  true

그런데 왜요?

원형 체인

원형 체인을 설명하기 위해서는 우선 대상만 주목해야 한다.객체를 작성할 때 hasOwnProperty를 사용하여 등록 정보를 확인할 수 있습니다.
근데 이거 어디서 났지?우리는 어느 곳에서도 그것을 정의한 적이 없지만, 우리는 그것을 사용할 수 있다.답은 모든 대상이 Object에서 계승되고 그 자체의 원형 속성이 있다는 것이다.간단한 대상을 만들고 구조 함수를 검사해서 검사할 수 있습니다.

let exampleObject = {
   something: "hi"
}
console.log(exampleObject.constructor === Object);
→ true

따라서 모든 대상은 Object에서 유래한 것으로 원형 속성을 사용할 수 있고 Object를 구조 함수로 사용할 수 있다.이것은 일리가 있는 것이다.
현재, 원형 대상을 만들 때, 대상이기 때문에 Object 계승됩니다.이것이 바로 구조 함수를 정의해야 하는 이유이다. 그렇지 않으면 Person의 실례가 구조 함수Object를 가지게 될 것이다.Object.prototype-상속인->Person.prototype ={}-상속인->me

고마워요

솔직히 말해서, 나는 이 문장이 그렇게 길 줄은 예상하지 못했다. (나는 무슨 일이 일어났는지 모른다.) 그래서 만약 네가 여기까지 견지할 수 있다면, 정말, 네가 읽어 줘서 고마워.