js 중의 몇 가지 상용 디자인 모델을 상세히 설명하다.

공장 모드

function createPerson(name, age){
  var o = new Object();  //  
  o.name = name;
  o.age = age;
  o.sayName = function(){
   console.log(this.name)
  }
  return o;  //  
}
var person1 = createPerson('ccc', 18)
var person2 = createPerson('www', 18)

공장 함수 문제:
공장 모델은 여러 개의 비슷한 대상을 만드는 문제를 해결했지만 대상 식별 문제(즉 하나의 대상의 유형을 어떻게 아는지)를 해결하지 못했다.아래와 같다

person1 instanceof createPerson  // --> false
person1 instanceof Object  // --> true

구조 함수 모드

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

var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)
person1.sayName()  // --> 'ccc'

person1과 person2는 각각 Person의 다른 실례를 보존하고 있다.이 두 대상은 모두 하나의 constructor (구조 함수) 속성이 Person을 가리킨다.이것이 바로 구조 함수 모델이 공장 모델보다 뛰어난 곳이다.다음과 같습니다.

console.log(person1 instanceof Person)  // --> true
console.log(person1 instanceof Object)  // --> true
console.log(person2 instanceof Person)  // --> true
console.log(person2 instanceof Object)  // --> true

구조 함수 모델과 공장 모델의 차이점:

명시적인 창설 대상이 없음

this 대상에게 속성과 방법을 직접 부여

return 문구가 없습니다

Person의 새 인스턴스를 만들려면 new 작업자를 사용해야 합니다.이러한 방식으로 구조 함수를 호출하면 실제로 4단계를 거친다.

새 객체 만들기

구조 함수의 작용역을 새로운 대상에 부여한다(따라서this는 이 새로운 대상을 가리킨다)

구조 함수의 코드 실행 (이 새 대상에 속성 추가)

새 객체 반환

구조 함수 문제:
구조 함수를 사용하는 중요한 문제는 모든 방법이 모든 실례에서 다시 한 번 만들어야 한다는 것이다.person1과person2에는 모두sayName () 이라는 방법이 있지만, 그 두 방법은 같은 Function 실례가 아닙니다.ECMAscript에서 함수가 객체이므로 각 정의마다 하나의 함수, 즉 하나의 객체가 실례화됩니다.논리적으로 말하자면, 이때의 구조 함수도 다음과 같이 정의할 수 있다.

function Person(name , age){
 this.name = name;
 this.age = age;
 this.sayName = new Function('console.log(this.name)')  // eslint: The Function constructor is eval. (no-new-func)
}

이것은 창설된 서로 다른 실례상의 동명 함수가 같지 않다는 것을 초래할 수 있다. 예를 들어:console.log(person1.sayName() === person2.sayName ())//-->false, 그러나 완전히 같은 두 작업을 만드는 Function 실례는 필요하지 않습니다.함수 정의를 구조 함수 외부로 옮겨서 이 문제를 해결할 수 있다.

function Person(name , age){
 this.name = name;
 this.age = age;
 this.sayName = sayName
}
function sayName(){
 console.log(this.name)
}
var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)

이렇게sayName은 함수를 가리키는 바늘을 포함하기 때문에person1과person2 대상은 전역 역할 영역에서 정의된 같은sayName () 함수를 공유합니다.이렇게 하면 두 함수가 같은 일을 하는 문제를 확실히 해결했지만 새로운 문제가 생겼다. 전역 작용역에서 정의된 함수는 실제로 어떤 대상에게만 호출될 수 있기 때문에 전역 작용역에 호출이 부실하다.
새로운 문제점:
만약 대상이 많은 방법을 정의해야 한다면, 많은 전역 함수를 정의해야 하기 때문에, 우리의 사용자 정의 인용 유형은 조금도 봉인성이 없다.
원형 모드
원형에 관하여 원형 체인의 내용은 여기에 기술하지 않고 원형 디자인 모델만 토론한다
우리가 만든 모든 함수는prototype(원형) 속성이 있습니다. 이 속성은 하나의 지침으로 하나의 대상을 가리키며, 이 대상의 용도는 특정한 유형의 모든 실례가 공유할 수 있는 속성과 방법을 포함하는 것입니다.즉, 구조 함수에서 대상의 실례적인 정보를 정의할 필요가 없고, 이러한 정보를 원형 대상에 직접 추가할 필요가 있다.

function Person(){
}
Person.prototype.name = 'ccc'
Person.prototype.age = 18
Person.prototype.sayName = function(){
 console.log(this.name)
}
var person1 = new Person()
person1.sayName()  // --> ccc

var person2 = new Person()
person2.sayName()  // --> ccc

console.log(person1.sayName === person2.sayName)  // --> true

원형 모드의 문제:
이것은 구조 함수에 매개 변수를 전달하기 위해 매개 변수를 초기화하는 부분을 생략하였으며, 결과적으로 모든 실례는 기본적으로 같은 속성 값을 얻을 것이다.또 원형 모델의 가장 큰 문제는 공유의 본성으로 인한 것이다.다음 질문을 참조하십시오.

function Person(){
}
Person.prototype = {
 constructor: Person,
 name: 'ccc',
 age: 18,
 friends:['www', 'aaa'],
 sayName: function () {
 console.log(this.name)
 }
}
var person1 = new Person()
var person2 = new Person()

person1.friends.push('bbb')

console.log(person1.friends)  // --> ["www", "aaa", "bbb"]
console.log(person2.friends)  // --> ["www", "aaa", "bbb"]
console.log(person1.friends === person2.friends)  // --> true

새로운 문제점:
만약 우리의 초지가 이렇다면, 모든 실례가 하나의 수조를 공용한다면, 이 결과는 바로 원하는 것이다.그러나 실례는 일반적으로 자신만의 모든 속성을 가져야 한다. 이 문제는 바로 우리가 원형 모델을 단독으로 사용하는 사람을 거의 보지 못하는 이유이다.
조합 사용 구조 함수 모드와 원형 모드
사용자 정의 형식을 만드는 가장 흔히 볼 수 있는 방법은 구조 함수 모드와 원형 모드를 조합하여 사용하는 것이다.구조 함수 모드는 실례 속성을 정의하는 데 사용되고, 원형 모드는 방법과 공유의 속성을 정의하는 데 사용된다.이런 방식은 구조 함수에 매개 변수를 전달하는 것도 지원한다.

function Person(name, age){
 this.name = name;
 this.age = age;
 this.friends = ['aaa', 'bbb']
}
Person.prototype = {
 constructor: Person,
 sayName: function(){
 console.log(this.name)
 }
}
var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)
person1.friends.push('ddd')

console.log(person1.friends)  // --> ["aaa", "bbb", "ddd"]
console.log(person2.friends)  // --> ["aaa", "bbb"]
console.log(person1.friends === person2.friends)  // --> false
console.log(person1.sayName === person2.sayName)  // --> true

이런 구조 함수와 원형을 혼합한 모델은 현재 ECMAscript에서 가장 광범위하고 인정도가 높은 사용자 정의 유형을 만드는 방법이다.이것은 인용 형식을 정의하는 기본 방식이라고 할 수 있다.
동적 원형 모드
동적 원형 모델은 어떤 존재해야 할 방법이 유효한지 검사함으로써 원형을 초기화해야 하는지 결정할 수 있다.

function Person(name, age){
 //  
 this.name = name
 this.age = age
 //  
 if(typeof this.sayName !== 'function'){
 Person.prototype.sayName = function(){
  console.log(this.name)
 }
 }
}

var person1 = new Person('ccc', 18)
person1.sayName()  // --> ccc

이것은sayName () 방법이 존재하지 않는 경우에만 원형에 추가할 수 있습니다.이 코드는 구조 함수를 처음 호출할 때만 실행됩니다.
참고:

여기서 원형에 대한 수정은 모든 실례에 즉각 반영될 수 있다.

동적 원형 모드를 사용할 때 대상의 글자 크기를 사용하여 원형을 다시 쓸 수 없습니다.이미 실례를 만든 상태에서 원형을 다시 쓰면 기존 실례와 새로운 원형 간의 관계를 끊는다.(원형과 원형 체인의 내용 참조)

기타 모드
기생 구조 함수 모델과 안정적인 구조 함수 모델도 있어 스스로 이해할 수 있다.이상의 지식 내용은 JavaScript 고급 프로그래밍(제3판)에서 나왔다.
이상은 js에서 자주 사용하는 몇 가지 디자인 모델에 대한 상세한 내용입니다. JS 디자인 모델에 대한 더 많은 자료는 저희 다른 관련 글에 주목하세요!