javascript 대상 생 성 모드 자세히 알 아 보기

생 성 모드
javascript 에 서 는 주로 다음 과 같은 몇 가지 생 성 모드 가 있 습 니 다.
공장 모드
구조 함수 모드
원형 모드
조합 모드
동적 원형 모드
기생 구조 함수 모드
온당 한 구조 패턴
공장 모드
공장 모델 은 소프트웨어 공학 분야 에서 널리 알려 진 디자인 모델 이다.javascript 구현 방식:

function createPerson(name, obj, job) {
    var o = new Object();
    o.name = name;
    o.obj = obj;
    o.job = job;
    o.sayName = function() {
      alert(this.name);
    }
    return o;
  }
  
  var person1 = createPerson("Nicholas", 29, "software Enginner");
  var person2 = createPerson("Greg", 27, "Doctor");
공장 모델 은 비슷 한 대상 을 여러 개 만 드 는 문 제 를 해 결 했 지만 대상 인식 문 제 는 해결 되 지 않 았 다.
구조 함수 모드

function Person(name, age, job) {
    this.name = name;
    this.age = name;
    this.job = name;
    this.sayName = function () {
      alert(this.name);
    }
  }
  
  var person1 = new Person("Nicholas", 29, "Software Engineer");
  var person2 = new Person("Greg", 27, "Doctor");
  
  person1 instanceof Person; // true
  person1 instanceof Object; // true
  
  person2 instanceof Person; // true
  person2 instanceof Object; // true
new 연산 자 실현 원리
공장 모델 과 달리 구조 함수 모델
생 성 대상 보이 지 않 음
this 대상 에 게 속성 과 방법 을 직접 할당 하 였 습 니 다.
return 문장 없 음
대상 인식 문 제 를 해결 했다.
그러나 구조 함수 모델 에 도 문제 가 존재 한다.즉,모든 방법 은 모든 사례 에서 다시 한 번 설명 해 야 한 다 는 것 이다.person 1 과 person 2 는 모두 sayName()이라는 방법 이 있 지만 그 두 가지 방법 은 같은 Function 인 스 턴 스 가 아 닙 니 다.javascript 에서 함 수 는 실질 적 으로 대상 이기 때문에 하나의 함 수 를 정의 할 때마다 하나의 대상 을 예화 합 니 다.)
함수 정 의 를 통 해 구조 함수 외부 로 이동 하면 이 문 제 를 해결 할 수 있 습 니 다.

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
  }
  function sayName() {
    alert(this.name);
  }
  var person1 = new Person("Nicholas", 29, "Software Engineer");
  var person2 = new Person("Greg", 27, "Doctor");
그러나 이런 방식 은 또 하나의 새로운 문 제 를 가 져 왔 다.우 리 는 전체 국면 에서 전체 함 수 를 만 들 었 다.
주의해 야 할 것 은 관례 에 따라 구조 함 수 는 항상 대문자 로 시작 해 야 하 며 구조 함수 가 아니 라 소문 자로 시작 해 야 한 다 는 것 이다.이것 은 주로 구조 함수 와 비구 조 함 수 를 구별 하 는 데 쓰 인 다.왜냐하면 구조 함수 자체 도 함수 이기 때문이다.
원형 모드
우리 가 만 든 모든 함수 에는 prototype(원형)속성 이 있 습 니 다.이 속성 은 하나의 지침 으로 대상 을 가리 키 며,이 대상 의 용 도 는 특정한 유형의 모든 인 스 턴 스 가 공유 할 수 있 는 속성 과 방법 입 니 다.
함수 원형 대상 부록 보기
프로 토 타 입 모드 를 통 해 대상 을 만 듭 니 다.우 리 는 구조 함수 에서 대상 의 인 스 턴 스 정 보 를 정의 할 필요 가 없습니다.또한 여러 대상 을 예화 할 필요 가 없습니다.모든 대상 은 새로운 함 수 를 설명 하지 않 습 니 다.
person1.sayName 과 person2.sayName 이 같은 함 수 를 가리 키 는 것 을 볼 수 있 습 니 다.
하지만 원형 모델 의 단점 도 분명 하 다.
먼저 원형 모드 는 구조 함수 모드 전달 매개 변수 라 는 부분 을 생략 한 결과 모든 인 스 턴 스 의 초기 값 은 기본 적 인 상황 에서 같은 속성 값 입 니 다.
더 중요 한 것 은 속성 과 방법 을 원형 대상 에 두 고 실질 적 으로 원형 상의 속성 은 모든 인 스 턴 스 에 의 해 공유 되 기 때문이다.기본 값 을 포함 하 는 속성 은 정상 적 이 고 속성 값 을 바 꾸 며 인 스 턴 스 에 같은 이름 의 속성 만 추가 합 니 다.그러나 형식 값 을 참조 하 는 속성 에 있어 서 는 재앙 일 수 있 습 니 다.

function Person() {}
  
  Person.prototype = {
    constructor: Person,
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    friends: ["shelby", "Court"],
    sayName: function() {
      alert(this.name);
    }
  };
  
  var person1 = new Person();
  var person2 = new Person();
  
  person1.friends.push("Van");
  
  person1.friends; // ["shelby", "Court", "Van"]
  person2.friends; // ["shelby", "Court", "Van"]
조합 모드
사용자 정의 형식 을 만 드 는 가장 흔 한 방법 은 구조 함수 모드 와 원형 모드 를 조합 하 는 것 입 니 다.구조 모드 는 실례 속성 을 정의 하 는 데 사용 되 고 원형 모드 는 방법 과 공유 속성 을 정의 하 는 데 사용 된다.
이렇게 하면 모든 인 스 턴 스 는 자신의 인 스 턴 스 속성 사본 이 있 지만 동시에 방법의 인용 도 공유 합 니 다.

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
  }
  
  Person.prototype.sayName = function() {
    alert(this.name);
  }
  
  var person1 = new Person("Nicholas", 29, "Software Enginner");
  var person2 = new Person("Greg", 27, "Doctor");
  
  person1.friends.push("Van");
  
  person1.firends; // ["Shelby", "Court", "Van"];
  person2.firends; // ["Shelby", "Court"]
  
  person1.firends === person2.firends; // false
  person1.sayName === person2.sayName; // true
동적 원형 모드

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    
    if (typeof this.sayName != "function") {
      Person.prototype.sayName = function() {
        alert(this.name);
      }
    }
  }
기생 구조 함수 모드
기생 모드 의 기본 개념 은 함 수 를 만 드 는 것 입 니 다.이 함수 의 역할 은 만 든 대상 의 코드 를 봉인 한 다음 에 새로 만 든 대상 으로 돌아 가 는 것 입 니 다.

function Person(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job.
    
    o.sayName = function() {
      alert(this.name);
    }
  }
  
  var person1 = new Person("Nicholas", 29, "Software Engineer");
  person1.sayName(); // "Nicholas"
보아하니 new 조작 부 호 를 사용 하 는 것 을 제외 하고 이 모델 은 공장 모델 과 사실은 똑같다.
이 모드 는 특수 한 상황 에서 대상 으로 구조 함 수 를 만 드 는 데 사용 할 수 있다.
만약 우리 가 추가 적 인 방법 을 가 진 특수 배열 유형 이 필요 하 다 고 가정 한다.Array 구조 함 수 를 직접 수정 할 수 없 기 때문에 이 모드 를 사용 할 수 있 습 니 다.

  function SpecialArray() {
    var values = [];
    
    values.push.push(values, arguments);
    values.toPipedString = function() {
      return this.join("|");
    }
    
    return values;
  }
  
  var colors = new SpecialArray("red", "blue", "green");
  colors.toPipedString(); // "red|blue|green"
이 모델 의 주요 단점:
되 돌아 오 는 대상 은 구조 함수 나 구조 함수 의 원형 속성 과 관계 가 없 으 며,인 스 턴 스 of 에 의존 하여 대상 유형 을 정할 수 있 습 니 다.
다른 모델 이 사용 할 수 있 는 상황 에서 가능 한 한 이런 모델 을 사용 하지 마 세 요.
온당 구조 함수 모드

  function Person(name, age, job) {
    var o = new Object();
    var name = name;
    var age = age;
    var job = jbo;
    
    o.sayName = function() {
      alert(name);
    }
  }
  
  var person1 = Person("Nicholas", 29, "Software Enginner");
  firend.sayName(); // "Nicholas"
부록
new 연산 자
new 연산 자 는 실제로 4 단 계 를 거 칩 니 다.
  • 간단 한 자 바스 크 립 트 대상(즉*{}**)을 만 듭 니 다
  • 이 대상 을 다른 대상 으로 연결 합 니 다
  • 절차 1 에서 새로 만 든 대상 을**this**의 문맥 로 합 니 다
  • 이 함수 가 대상 을 되 돌려 주지 않 으 면*this**를 되 돌려 줍 니 다
  • 
      function new(func) {
        var o = {};
        o.__proto__ = func.prototype;
        var result = func.apply(o, arguments);
        return typeof result === "object" ? object : o;
      }
    함수 원형 개체
    원형 대상 이해
    언제든지 새 함 수 를 만 들 면 특정한 규칙 에 따라 이 함수 에 prototype 속성 을 만 듭 니 다.이 속성 은 함수 의 원형 대상 을 가리 키 고 있 습 니 다.기본 적 인 상황 에서 모든 원형 대상 은 자동 으로 constructor(구조 함수)속성 을 얻 습 니 다.이 속성 은 prototype 속성 이 있 는 함 수 를 가리 키 는 지침 을 포함 합 니 다.
    사용자 정의 구조 함 수 를 만 든 후에 원형 대상 은 construtoe 속성 만 얻 을 수 있 고 다른 속성 은 Object 에서 계승 합 니 다.구조 함 수 를 호출 하여 새로운 인 스 턴 스 를 만 들 때 이 인 스 턴 스 의 내 부 는 포인터(내부 속성)를 포함 하고 구조 함수 의 원형 대상 을 가리 키 며 이 지침 은[Prototype]이 라 고 합 니 다.대부분의 브 라 우 저 에서 대상 마다 속성 을 지원 합 니 다.proto__[Prototype]을 호출 합 니 다.

    모든 구현 이[Prototype]에 직접 접근 할 수 는 없 지만,isPrototype 방법 을 통 해 대상 간 의 관계 여 부 를 확인 할 수 있 습 니 다.
    우 리 는 person 1 과 person 2 를 테스트 하여 모두 true 로 돌 아 왔 다.내부 에 Person.prototype 을 가리 키 는 지침 이 있 기 때문이다.
    Object.getPrototype()은 대상 의 원형 대상 을 되 돌려 줄 수 있 습 니 다.
    코드 가 대상 의 속성 을 읽 을 때마다 검색 을 실행 합 니 다.목 표 는 주어진 이름 의 속성 을 가지 고 있 습 니 다.검색 은 우선 대상 자체 부터 시작 합 니 다.인 스 턴 스 에서 해당 하 는 속성 을 찾 으 면 이 속성의 값 을 되 돌려 줍 니 다.찾 지 못 하면 포인터 가 가리 키 는 원형 대상 을 계속 검색 합 니 다.이것 도 우리 가 person 1 과 person 2 두 개의 실례 에서 sayName 이라는 속성 을 정의 하지 않 았 지만 정상적으로 사용 할 수 있 는 이유 입 니 다.
    person 1.sayName()을 호출 하고 있 습 니 다.예,두 번 의 검색 을 수행 할 것 입 니 다.우선,해석 기 는"실례 person 1 에 sayName 속성 이 있 습 니까?"라 고 물 어 봅 니 다.답:"없습니다."그리고 나 서 그 는 계속 검색 하고"person 1 의 원형 에 sayName 속성 이 있 습 니까?"라 고 물 었 다.있다그래서 원형 에 저 장 된 함 수 를 읽 습 니 다.
    비록 우 리 는 실례 를 통 해 원형의 속성 을 방문 할 수 있 지만,원형의 속성 을 다시 찾 을 수 는 없다.
    만약 에 우리 가 인 스 턴 스 에 속성 명 을 추가 하면 이 속성 명 은 원형 중의 속성 명 과 같 습 니 다.즉,우 리 는 인 스 턴 스 에서 속성 을 다시 쓰 고 싶 습 니 다.
    
      function Person() {}
      Person.prototype.name = 'Nicholas';
      
      var person1 = new Person();
      var person2 = new Person();
      
      person1.name === person2.name; // true
      person1.name = 'Greg';
      
      person1.name === person2.name; // false
      person1.name; // 'Greg'
      person2.name; // 'Nicholas'
      
      person1.__proto__.name; // 'Nicholas'
    사실,우리 가 원형 속성 을 다시 쓸 때,단지 실례 에 새로운 속성 을 추 가 했 을 뿐이다.우리 가 인 스 턴 스 의 속성 을 삭제 하면 원형 속성 이 드 러 납 니 다.
    
      delete person1.name;
      person1.name; // 'Nicholas'
    hasOwnProperty()함 수 를 사용 하면 속성 이 인 스 턴 스 에 있 는 지 여 부 를 판단 할 수 있 습 니 다.
    
      person1.hasOwnProperty('name'); // false
      person1.name = 'Greg';
      person1.hasOwnProperty('name'); // true
    이상 은 자바 script 대상 생 성 모델 에 대한 상세 한 내용 입 니 다.자바 생 성 모델 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!

    좋은 웹페이지 즐겨찾기