>웹 프론트엔드 >JS 튜토리얼 >객체를 생성하는 방법

객체를 생성하는 방법

高洛峰
高洛峰원래의
2016-10-29 13:44:551171검색

1. 객체를 사용하여 객체 생성

var person = new Object();
person.name = "Nicholas";
person.age = "29";
person.job = "Software Engineer";

person.sayName = function(){
    alert(this.name);
};

//对象字面量写法
var person = {
    name: "Nicholas",
    age: "29",
    job: "Software Engineer",
    
    sayName: function(){
        alert(this.name);
    }
};

단점: 동일한 인터페이스를 사용하여 여러 쌍의 객체를 생성하면 중복 코드가 많이 생성됩니다.

2. 팩토리 패턴

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("Nicholas", "29", "Software Engineer");
var person2 = createPerson("Greg", "27", "Doctor");

단점: 객체의 종류를 식별할 수 없다.

3. 생성자 패턴

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };
}
//构造函数使用new操作符来调用
var person1 = new Person("Nicholas", "29", "Software Engineer");
var person2 = new Person("Greg", "27", "Doctor");

단점: 각 메서드를 인스턴스에서 다시 생성해야 합니다.

//不同实例上的同名函数是不相等的
alert(person1.sayName == person2.sayName);        //false

//可以把函数定义转移到构造函数外来解决这个问题
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;    
   this.sayName = sayName;
}
function sayName() {
    alert(this.name);
}

프로토타입 패턴

모든 함수 우리는 객체에 대한 포인터인 프로토타입 속성을 가지고 있습니다. 이 객체의 목적은 특정 유형의 모든 인스턴스에서 공유할 수 있는 속성과 메서드를 포함하는 것입니다.

function Person() {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = "29";
Person.prototype.job = "Software Engineer";
Person.prptptype.sayName = function(){
    alert(this.name);
};

var person1 = new Person();
person1.sayName();        //"Nicholas"

var person2 = new Person();
person2.sayName();        //"Nicholas"

alert(person1.sayName == person2.sayName);        //true
//更简单的原型语法
function Person() {
}
Person.prototype = {
    constructor : Person,        //以对象字面量形式创建新对象,constructor不再指向Person,在此特意设置为Person
    name : "Nicholas",
    age : "29",
    job : "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

프로토타입과 인스턴스는 프로토타입과 생성자 속성을 통해 서로 관련됩니다.

코드가 객체의 속성을 읽을 때 먼저 인스턴스를 검색한 다음 인스턴스의 프로토타입을 검색하므로 인스턴스 속성이 프로토타입 속성을 재정의합니다.

객체를 다시 프로토타입하면 프로토타입과 인스턴스 간의 연결이 끊어지지만 프로토타입 객체를 수정하면 끊어지지 않습니다.

단점: 인스턴스가 자체 속성을 가질 수 없음

5. 생성자 패턴과 프로토타입 모델의 결합

//构造函数模式用于定义实例属性
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friend = ["Shelby", "Court"];
}

//原型模式用于定义方法和共享属性
Person.prototype = {
    constructor : Person;
    sayName : function() {
        alert(this.name);
    }
}

6. 동적 프로토타입 패턴, 기생 생성자 패턴, 견고함 생성자 패턴


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.