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

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

小云云
풀어 주다: 2018-03-13 18:04:21
원래의
1466명이 탐색했습니다.

이 기사는 주로 JS에서 객체를 생성하는 여러 가지 방법을 공유합니다. 도움이 되기를 바랍니다.

1. 특정 유형의 객체를 생성하려면 기본 생성자를 사용하세요

  var person =new Object();
    person.name="wangwu";
    person.age="20";
    person.sayName=function(){
    alert(this.name);
}
로그인 후 복사

2. 객체 리터럴을 사용하세요

var person = {
    name:"wangwu",
    age:"20",
    sayName: function(){
        alert(this.name);
    }
}
로그인 후 복사

요약: 두 가지 방법 모두 단일 객체를 생성하는 데 사용할 수 있지만 여러 개 생성하는 데에는 분명한 단점이 있습니다. 동일한 인터페이스를 가진 객체는 중복된 코드를 많이 생성합니다.

3. 팩토리 패턴을 사용하세요

function createPerson(name,age){
    var o=new Object();
    o.name=name;
    o.age=age;
    o.sayName=function(){
            alert(this.name);
    };
    return o;
}
var person1=createPerson("wangwu",20);
로그인 후 복사

특정 객체를 생성하는 과정을 추상화하고, 함수를 만들고, 그 함수를 사용하여 객체 생성의 세부 사항을 특정 인터페이스로 캡슐화합니다.

4. 생성자 패턴

function  Person(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
        alert(this.name);
    };
}
var person1=new Person("wangwu",20);
로그인 후 복사

사용자 정의 개체 유형의 속성과 메서드를 정의하는 사용자 정의 생성자를 만듭니다.

5. 프로토타입 패턴

function Person(){
}
Person.prototype.name="wangwu";
Person.prototype.age=20;
Person.prototype.sayName=function(){
    alert(this.name);
}
var person1=new Person();
person1.sayName(); //wangwu
로그인 후 복사

우리가 만드는 모든 함수에는 프로토타입 속성이 있습니다. 이 속성은 객체를 가리키는 포인터이며, 이 객체의 목적은 특정 유형으로 표현할 수 있는 모든 인스턴스를 포함하는 것입니다. 공유 속성 및 메서드. 프로토타입 패턴의 단점은 초기화 매개변수를 생성자에 전달하는 단계를 생략한다는 것입니다. 결과적으로 모든 인스턴스는 기본적으로 동일한 속성 값을 얻습니다. 참조 유형 값, 문제가 더 두드러집니다.

6. 생성자 패턴과 프로토타입 패턴의 결합

function Person(name,age){
    this.name=name;
    this.age=age;
    this.friends=["wangwu","zhangsan"];
}
Person.prototype={
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}
var person1=new Person("wangwu",20);
var person2=new Person("zhangsan",23);
person1.friends.push("lisi");
alert(person1.friends); //"wangwu,zhangsan,lisi"
alert(person2.friends); //"wangwu,zhangsan"
로그인 후 복사

7. 동적 프로토타입 패턴

  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);
    };
}
}
var  friend=new Person("wangwu",20);
friends.sayName();
로그인 후 복사

8. 안전한 생성자 패턴

function Person(name,age){
    var 0=new Object();
    o.name="wangwu";
    o.age=20;
    o.sayName=function(){
        alert(this.name);
    };
    return o;
}
var friend=new Person("wangwu",20);
friend.sayName(); //"wangwu"
로그인 후 복사

9.

js에서 객체를 생성하는 방법 요약(샘플 코드)

Js에서 객체를 생성하는 여러 가지 방법

js에서 객체를 생성하는 몇 가지 일반적인 방법 요약(권장)_js 객체 지향

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

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