JavaScript 생 성 대상 (공장, 구조 함수, 원형)

공장 모드 생 성 대상
ECMAScript 에서 공장 모드 를 사용 하여 대상 을 만 들 수 있 습 니 다.

function createPerson(name,age) {
    let obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sayHello = function () {
        console.log("hello");
    };

    return obj;
}

let person = createPerson(“acey",22);
person.sayHello();

createPerson 함 수 는 파 라 메 터 를 받 아 대상 을 구성 하 는 데 필요 한 정 보 를 얻 을 수 있 고 수 차례 호출 되 지 않 으 며 매번 호출 될 때마다 유일한 대상 으로 돌아 갈 수 있 지만 우리 가 만 든 대상 이 어떤 유형 인지 알 수 없습니다.자 바스 크 립 트 가 발전 함 에 따라 구조 함수 모델 이 나 타 났 다.
이 구조 함수 모드
구조 함수 모드 로 앞의 밤 을 개조 하 다.

function Person(name,age) {
    this.name = name;
    this.age = age;
    this.sayHello = function () {
        console.log("hello");
    };
}

let person1 = new Person("acey1",22);
let person2 = new Person("acey2",22);

이 밤 에서 Person 함수 가 createPerson 함 수 를 대 체 했 고 구조 함수 모델 생 성 대상 의 특징 은

표시 되 지 않 은 생 성 대상

속성 과 방법 을 직접 할당 this

없 음 return 문구

구조 함수 로 대상 을 만 들 려 면 실례 화 대상 을 만 들 때 new 를 사용 해 야 합 니 다. 만 드 는 과정 은 다음 과 같 습 니 다.

새 대상 만 들 기

구조 함수 의 역할 도 메 인 대 가 를 이 대상 this 에 게 부여 하면 이 대상 을 가리킨다

구조 함수 의 코드 실행

새 대상 으로 돌아 가기

그 중에서 person1 과 person2 는 각각 Person 의 서로 다른 인 스 턴 스 를 가지 고 있 는데 모두 constructor 속성 이 있 고 이 속성 은 모두 Person 을 가리킨다.

console.log(person1.constructor === Person); //true
console.log(person2.constructor === Person);//true

구조 함수 와 일반 함수 의 가장 큰 차 이 는 바로 생 성 방식 으로 new 키 워드 를 사용 한 것 이다.

//    
let person1 = new Person("acey1", 22);
/    
Person("acey", 22);

person1.sayHello();
sayHell(); //Global

new 를 사용 하여 함 수 를 만 들 때 this 는 만 든 대상 자체 (Person) 를 가리 키 고 new 를 만 들 지 않 으 면 this 대상 (브 라 우 저 에서 Global 대상 을 가리 키 며 이 럴 때 전역 적 으로 호출 할 수 있 습 니 다.
구조 함 수 는 사용 하기 좋 지만 문제 가 존재 합 니 다. 우리 가 대상 을 만 들 때마다 대상 중의 방법 도 다시 만들어 집 니 다. 그러면 서로 다른 역할 도 메 인 체인 과 표지 해석 을 초래 할 수 있 습 니 다.

console.log(person1.sayHello() === person2.sayHello())//false

이러한 상황 을 피 하려 면 대상 의 방법 을 전역 화 시 켜 야 합 니 다. 이 럴 때 원형 모드 로 대상 을 만 들 수 있 습 니 다.
삼 원형 모드
얕 게 분석 하 다
우리 가 만 든 모든 함수 에는 하나의 window 속성 이 있 습 니 다. 이 속성 은 하나의 지침 으로 대상 을 가리 키 는데 이 대상 의 역할 은 특정한 유형의 모든 인 스 턴 스 가 공유 하 는 속성 과 방법 을 포함 하 는 것 입 니 다.예 를 들 어 앞에서 prototype 함 수 를 만 들 때 이 함 수 는 하나의 person1 속성 이 있 는데 이 속성 이 가리 키 는 대상 은 prototype 대상 이다.
원형 모드 로 위의 밤 을 고 쳐 쓰 세 요.

function Person() {

}
Person.prototype.name = "acey";
Person.prototype.age = 22;
Person.prototype.sayHello = function () {
    console.log("hello");
};

let person1 = new Person();
person1.sayHello(); //hello
let person2 = new Person();
person2.sayHello();//hello
console.log(person1.sayHello === person2.sayHello);//true

여기 서 우 리 는 Person 에 있 는 name、age、sayHello 속성 에 직접 추 가 했 고 Person 에 있 는 prototype 속성 은 person 의 실례 화 대상 에 의 해 공유 되 었 다.
원형 대상 이해
우리 가 함 수 를 만 들 때마다 특정한 규칙 에 따라 이 함수 에 prototype 속성 을 만 들 고 이 속성 은 함수 의 원형 대상 을 가리킨다.기본 적 인 상황 에서 모든 원형 대상 은 하나의 Person 속성 이 있 는데 이 속성 은 prototype 속성 이 있 는 함수 의 지침 을 가리킨다.constructor 바로 가리 키 기 prototype구조 함 수 를 호출 하여 인 스 턴 스 를 만 들 면 이 인 스 턴 스 는 구조 함수 의 원형 대상 을 가리 키 는 지침 을 얻 을 수 있 습 니 다.FireFox, Safari, Chrome 은 Person.prototype.constructor 입 니 다.그러나 다른 실현 에서 이 속성 은 전혀 보이 지 않 는 다.한 가지 기억 해 야 할 것 은 이 연결 은 인 스 턴 스 와 구조 함수 가 존재 하 는 원형 대상 간 의 것 이지 인 스 턴 스 와 구조 함수 간 의 것 이 아니다.
우 리 는 Person 방법 으로 대상 이 같은 원형 대상 인지 아 닌 지 를 판단 할 수 있다.

console.log(Person.prototype.isPrototypeOf(person1));//true

ECMAScript 5 에서 대상 의 원형 을 되 돌려 주 는 방법 _proto_ 이 있 습 니 다.

console.log(Object.getPrototypeOf(person1).name); //acey

속성 검색
어떤 속성 을 읽 을 때마다 검색 을 합 니 다.검색 은 먼저 대상 인 스 턴 스 자 체 를 검색 합 니 다. 이 구체 적 인 이름 의 속성 을 검색 하면 이 속성의 값 을 되 돌려 줍 니 다. 검색 되 지 않 으 면 포인터 가 가리 키 는 원형 대상 을 계속 검색 하고 원형 대상 에서 검색 하면 속성 값 을 되 돌려 줍 니 다.
검색 할 때 대상 인 스 턴 스 자 체 를 먼저 검색 한 다음 에 원형 대상 임 을 알 수 있다.대상 자체 와 원형 대상 이 같은 속성 을 가지 고 있다 면 원형 대상 의 속성 과 방법 은 대상 인 스 턴 스 에 해당 하 는 속성 과 방법 으로 덮어 집 니 다.(isPrototypeOf() 연산 자 를 사용 하여 대상 의 속성 과 방법 을 삭제 할 수 있 습 니 다. Object.getPrototypeOf()관련 방법

delete: 특정한 속성 이 특정한 인 스 턴 스 와 존재 하 는 지 확인 합 니 다.

person2.hasOwnProperty("sayHello");//true

delete person1.name; 연산 자: 속성 이 대상 인 스 턴 스 나 원형 대상 에 존재 하 는 지 확인 합 니 다

console.log("name" in person1);//true

hasOwnProperty(): 하나의 대상 을 매개 변수 로 받 아들 여 이 대상 의 모든 속성 을 가 진 문자열 배열

을 되 돌려 줍 니 다.

let keys = Object.keys(Person)

원형 대상 에 존재 하 는 문제점
프로 토 타 입 대상 은 구조 함수 전달 매개 변 수 를 초기 화 하 는 절 차 를 생략 하고 모든 인 스 턴 스 가 같은 속성 을 공유 하 는 것 이 매우 불편 합 니 다.생 성 된 속성 으로 형식 을 참조 하면 서로 다른 인 스 턴 스 의 혼란 을 초래 할 수 있 습 니 다.
4 조합 은 구조 함수 와 원형 모델 을 사용한다.
최선 의 방법 은 그래 야 한다.구조 함 수 는 속성 을 정의 하 는 데 사용 되 고 원형 모델 은 공 유 된 속성 과 방법 을 정의 합 니 다.이렇게 하면 모든 인 스 턴 스 속성 사본 이 있 고 공 유 된 속성 과 방법 을 동시에 포함 하여 메모 리 를 최대한 절약 할 수 있 습 니 다.위 에 밤

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

Person.prototype.say = function () {
    console.log(this.age)
};

let p1 = new Person("acey", 22);
let p2 = new Person("acey1", 22);

console.log(p1.say === p2.say);//true

물론 이런 방식 은 완벽 하지 않다. 구조 함수 와 원형 두 개가 독립 되 었 기 때문이다.우 리 는 동적 원형 모델 을 합 쳤 다.

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

    if(this.say === undefined) {
        Person.prototype.say =  function () {
            console.log(this.age);
        }
    }
}