> 웹 프론트엔드 > JS 튜토리얼 > JS에서 객체를 생성하는 여러 가지 방법 요약

JS에서 객체를 생성하는 여러 가지 방법 요약

迷茫
풀어 주다: 2017-03-26 17:49:20
원래의
1213명이 탐색했습니다.

최근 JS 고급 프로그래밍이라는 책을 읽고 객체를 생성하는 여러 가지 방법을 정리하는 시간을 가졌습니다. 더 이상 고민하지 않고 바로 본론으로 들어가겠습니다.

첫 번째 유형: 객체 생성자 생성

 Person =  Object();
로그인 후 복사

이 코드 줄은 객체 참조 유형의 새 인스턴스를 생성한 다음 해당 인스턴스를 Person 변수에 저장합니다.

두 번째: 객체 리터럴 표기법 사용

 Person ='Nike'29
로그인 후 복사

객체 리터럴은 객체 정의의 약식 형태로, 많은 수의 속성을 포함하는 객체 생성 프로세스를 단순화하는 것을 목표로 합니다. 즉, 첫 번째와 두 번째 객체 생성 방법은 실제로는 동일하지만 쓰는 방식의 차이가 다릅니다

세 번째 생성 방법을 소개하기 전에 왜 다른 방법을 사용하여 객체를 생성하는지, 즉 , 첫 번째와 두 번째 방법의 단점: 둘 다 동일한 인터페이스를 사용하여 많은 개체를 생성하므로 중복 코드가 많이 생성됩니다. 즉, 개체가 100개 있으면 같은 코드를 100번이나 많이 입력해야 합니다. 그렇다면 너무 많은 코드 중복을 피하려면 어떤 방법을 취해야 할까요? 즉, 객체 생성 과정을 함수 몸체에 캡슐화하고, 함수 호출을 통해 직접 객체를 생성하는 것입니다.

세 번째 방법: 팩토리 모드를 사용하여 객체 생성

function createPerson(name,age,job){    
   var o  = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
         alert(this.name);    
    };    return o;      
}var person1 = createPerson('Nike',29,'teacher');var person2 = createPerson('Arvin',20,'student');
로그인 후 복사

팩토리 모드를 사용하여 객체를 생성할 때 createPerson 함수에서 객체가 반환되는 것을 모두 알 수 있습니다. 그러면 반환된 객체가 어떤 유형인지 확인할 수 없습니다. 따라서 객체를 생성하는 네 번째 모드가 있습니다.

넷째: 생성자를 사용하여 객체 생성

.name =.age =.job =.sayName =  person1 =  Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');
로그인 후 복사

팩토리 패턴을 비교하면 다음과 같은 차이점을 찾을 수 있습니다.

 1. 디스플레이 없이 객체 생성

2 . 이 개체에 속성과 메서드를 직접 할당

3. 반환 문이 없습니다

4. 최종적으로 개체의 유형을 인식할 수 있습니다. 객체 유형을 감지하려면 독립적인 감지를 수행하기 위해 instanceof 연산자를 사용해야 합니다:

alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture
로그인 후 복사

동시에 관례에 따라 생성자는 항상 대문자로 시작해야 하며, 생성자는 소문자로 시작해야 합니다.

그러면 생성자는 정말 사용하기 쉽지만 단점도 있습니다.

즉, 각 메서드는 각 인스턴스에서 다시 생성되어야 합니다. 객체에 정의합니다. 메소드 수가 많으면 불필요한 메모리를 많이 차지하게 됩니다. 그래서 다섯 번째

객체 생성 방법이 등장했습니다

다섯 번째 방법: 프로토타입 생성 객체 모드

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
     alert(this.name);
};var person1 = new Person();
person1.sayName();
로그인 후 복사

프로토타입을 사용하여 객체를 생성하면 모든 객체 인스턴스를 공유할 수 있습니다. 방법이 포함되어 있습니다.

프로토타입을 사용하여 객체 모드를 생성하는 경우 다음 코드를 참조하세요.

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
     alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name);  //'Greg'  --来自实例
alert(person2.name);  //'Nike'   --来自原型
로그인 후 복사

객체 인스턴스에 속성을 추가하면 이 속성은 보호되며 같은 이름으로 프로토타입 객체 속성에 저장됩니다.

이때 생성자 패턴과 프로토타입 패턴을 조합하여 사용할 수 있습니다. 생성자 패턴은 인스턴스 속성을 정의하는 데 사용되고 프로토타입 패턴은 메서드와 공유 속성을 정의하는 데 사용됩니다

여덟 번째 유형: 생성자 패턴과 프로토타입 패턴의 조합을 사용하세요

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

Person.prototype = {
    constructor:Person,
    sayName: function(){
        alert(this.name);
    };
}var person1 = new Person('Nike',20,'teacher');
로그인 후 복사

위는 객체를 생성하는 8가지 방법을 요약한 것입니다. 오류가 있으면 지적해 주세요.

위 내용은 JS에서 객체를 생성하는 여러 가지 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿