JavaScript의 원형 모드

medium에서 나를 찾았다
자바스크립트 언어로 구현할 수 있는 다양한 디자인 모델이 있는데 본고에서 원형 디자인 모델을 소개할 것이다.
원형 디자인 모델은 대상을 바탕으로 하는 창조적인 디자인 모델이다.
만약 당신이 세 가지 디자인 모델을 되돌아볼 필요가 있다면, 그것들은 통상적으로 모두 일치한다. 여기에는 작은 개술이 있다.

창의적인 디자인 모델

이것은 직접 실례화된 대상이 아니라 대상을 만드는 도구입니다.이런 방법의 장점은 어떤 상황에서 어떤 대상을 만들어야 할지 결정할 때 프로그램이 더욱 유연성을 가지게 하는 것이다.

행위 디자인 모델

이러한 모델은 대상 간의 통신에 중심을 두고 있다.

구조 설계 모델

마지막으로 이런 모델은 클래스와 대상의 조합에 중심을 두었다.그것들은 조합 인터페이스를 계승하고 여러 대상을 조합하는 방법을 정의하여 새로운 기능을 실현할 수 있다.
만약 이것이 당신이 처음으로 원형 모델을 배운 것이라면, 당신은 이미 예상에 대해 알고 있을 것이다.만약 네가 모른다면, 나의 일은 너를 도와 이 수수께끼를 풀게 하는 것이다, 나의 친구.
그렇다면 원형 모델은 도대체 무엇이고, 그것은 무엇을 하는 것일까?

이 모델의 주요 중점은 창설 대상을 돕는 것이다. 이 대상들은 구조 함수로 창설된 모든 대상의 청사진으로 사용할 수 있다.그것은 이른바 prototypal inheritance 을 통해 이 점을 실현했다.
JavaScript는 원형 상속에 대한 본체 지원을 가지고 있기 때문에 다행히도 언어에서 사용하기 쉬워져서 새로운 개념을 배우지 않고 문법 자체만 배울 수 있습니다.
그럼에도 불구하고 원형 디자인 모델은 매우 유용한 전략이다. 이것은 자바스크립트로 프로그램을 만드는 데 매우 중요하고 유익한 방식이 되었다.잠시 후에 우리는 원인을 이해할 것이다.
구조 함수를 사용하여 객체를 작성하고 name 속성을 포함하는 경우 같은 구조 함수를 사용하여 작성한 다른 객체도 다음과 같이 같은 속성을 가지게 됩니다.

function Movie(title) {
  this.title = title
}

const harryPotter = new Movie('Harry Potter')
const rushHour2 = new Movie('Rush Hour 2')
const fastAndFurious = new Movie('Fast And Furious')

console.log(harryPotter.constructor.name)
console.log(rushHour2.constructor.name)
console.log(fastAndFurious.constructor.name)

그것은 전형적인 클래스 대상처럼 들리지만, 실제로는 완전한 클래스를 피한다.원형 디자인 모델은 기존 기능 대상의 복사본을 만드는 것이지 새로운 대상을 정의하는 것이 아니다.
JavaScript에서 이 모드를 사용하는 가장 큰 이점은 객체 클래스에 비해 성능이 향상되었다는 것입니다.이것은 대상에서 함수를 정의할 때 인용을 통해 생성된다는 것을 의미합니다.다시 말하면 모든 하위 대상은 자신의 던전을 만드는 것이 아니라 같은 방법을 가리킨다!
다음은 이 모드의 코드 예입니다.

const Warrior = function(name) {
  this.name = name
  this.hp = 100
}

Warrior.prototype.bash = function(target) {
  target.hp -= 15
}

Warrior.prototype.omniSlash = function(target) {
  // The target's hp may not be under 50 or this attack will fail on the opponent
  if (target.hp < 50) {
    return
  }
  target.hp -= 50
}

const sam = new Warrior('Sam')
const lenardo = new Warrior('Lenardo')

sam.bash(lenardo)

우리의 코드 예시에서 우리는 Warrior.prototype.<method> = function() {...}를 사용하여 전사의 공격 방법을 정의했다.보시다시피 우리는 new 키워드로 몇몇 전사들을 실례화했기 때문에 지금 두 가지 실례를 보겠습니다.두 실례 모두 호출자가 전송한 name 매개 변수에 따라 name 속성을 설정한다.
우리가 원형에서 방법bash과 omniSlash을 정의했을 때 우리가 본 두 개의 독립된 실례는 실제로 같은 bash와 omniSlash 함수를 인용했다!

const Warrior = function(name) {
  this.name = name
  this.hp = 100
}

Warrior.prototype.bash = function(target) {
  target.hp -= 15
}

Warrior.prototype.omniSlash = function(target) {
  // The target's hp may not be under 50 or this attack will fail on the opponent
  if (target.hp < 50) {
    return
  }
  target.hp -= 50
}

const sam = new Warrior('Sam')
const lenardo = new Warrior('Lenardo')

console.log(sam.bash === lenardo.bash) // true

만약 우리가 이렇게 그것들을 정의한다면 그것들은 달라질 것이다. 그래서 본질적으로 자바스크립트는 모든 실례에 똑같은 방법의 복사본을 만들었다.

const Warrior = function(name) {
  this.name = name
  this.hp = 100

  this.bash = function(target) {
    target.hp -= 15
  }

  this.omniSlash = function(target) {
    // The target's hp may not be under 50 or this attack will fail on the opponent
    if (target.hp < 50) {
      return
    }
    target.hp -= 50
  }
}

const sam = new Warrior('Sam')
const lenardo = new Warrior('Lenardo')

console.log(sam.bash === lenardo.bash) // false

그래서 만약에 우리가 이전의 예처럼 원형 모델을 사용하지 않았다면 우리가 많은 실례를 실례화했을 때 얼마나 미쳤을까?우리는 복제하는 방법이 있다. 그들은 메모리를 엉망으로 만들 것이다. 기본적으로 같은 일을 하고 있으며, 그것들은 심지어 복제될 필요가 없다. 실례 내부의 상태에 의존하지 않는 한.
확장 원형의 다른 변형은 다음 구문입니다.

const Warrior = function(name) {
  this.name = name
  this.hp = 100
}

Warrior.prototype = {
  bash(target) {
    target.hp -= 15
  },
  omniSlash(target) {
    // The target's hp may not be under 50 or this attack will fail on the opponent
    if (target.hp < 50) {
      return
    }
    target.hp -= 50
  },
}

이는 다음과 같습니다.

const Warrior = function(name) {
  this.name = name
  this.hp = 100
}

Warrior.prototype.bash = function(target) {
  target.hp -= 15
}

Warrior.prototype.omniSlash = function(target) {
  // The target's hp may not be under 50 or this attack will fail on the opponent
  if (target.hp < 50) {
    return
  }
  target.hp -= 50
}

결론

이 글은 이것으로 끝냅니다!나는 네가 이것이 가치가 있다는 것을 발견하고 미래에 더욱 많은 것을 기대하길 바란다.
medium에서 나를 찾았다