How to create objects-JS Tutorial-php.cn

How to create objects

高洛峰

Release： 2016-10-29 13:44:55

Original

1153 people have browsed it

1. Use Object to create objects

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);
    }
};

Copy after login

Disadvantages: Using the same interface to create many pairs of objects will produce a lot of duplicate code.

2. Factory pattern

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");

Copy after login

Disadvantages: Unable to identify the type of object.

3. Constructor pattern

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");

Copy after login

Disadvantages: Each method must be recreated on the instance

//不同实例上的同名函数是不相等的
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);
}

Copy after login

4. Prototype pattern

Every function we create has a prototype (prototype) attribute, this attribute is A pointer to an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type.

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

Copy after login

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

Copy after login

Prototype and instance are related to each other through the prototype and constructor attributes.

When the code reads the attributes of an object, it first retrieves the instance and then retrieves the prototype of the instance, so the attributes of the instance will overwrite the attributes of the prototype.

Reprototyping the object will cut off the connection between the prototype and the instance, but modifying the prototype object will not.

Disadvantages: instances cannot have their own properties

5. Combined use of constructor pattern and prototype model

//构造函数模式用于定义实例属性
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);
    }
}

Copy after login

6. Dynamic prototype pattern, parasitic constructor pattern, secure constructor pattern