JavaScript建立對象方式總結

今天閱讀了JavaScript高級程序設計的第6章，關於對象建立的方式，這裏作下總結，鞏固下知識

JavaScript建立對象的五種方式：

1、經過字面量或Object構造函數建立

一、示例：

// 經過Object構造函數來建立
var person = new Object();
person.name = "mary";
person.age = 28;
person.sayHello = function() {
    alert(this.name + "say hello world");
}

console.log(person.constructor.name);    // Object


// 經過字面量來建立
var person = {
    name: "mary",
    age: 28,
    sayHello: function() {
        alert(this.name + "say hello world");
    }
}

console.log(person.constructor.name);    // Object

 

二、優勢：簡單靈活

三、缺點：

1）沒法識別對象類型，經過person.constructor屬性（該屬性是從Object.prototype中繼承來的）能夠看到，無論是經過構造函數，仍是字面量（底層也是使用new Object來建立對象的），對象構造器屬性均爲Object。

2）每次建立相同對象須要寫大量的重複代碼，每建立一個對象均須要重複的書寫name、age、sayHello

 

 2、經過工廠模式建立

一、示例：

function createPerson(name, age) {
    var person = new Object();
    person.name = name;
    person.age = age;
    person.sayHello = function() {
        alert(this.name + "say hello world");
    }
    return person;
}

var person = createPerson("mary",28);
console.log(person.constructor.name);    // Object

二、優勢：不用每次建立對象時，都寫一批重複的代碼（經過字面量建立的），也就是建立對象的時候原先須要數行才能完成的工做，如今只須要一行便可

三、缺點：仍然沒法識別對象的類型，建立的對象構造器指向的函數仍然都是Object

 

 3、經過構造函數模式建立

一、示例：

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        alert(this.name + "say hello world");
    }
}

var person = new Person("mary", 28);
console.log(person.constructor.name);    // Person

二、優勢：能夠識別對象的類型，person實例的constructor屬性指向構造函數Person，也就解決了對象的識別問題

三、缺點：每次建立對象時，都實例化對象的屬性，其中sayHello爲函數對象，這將致使相同功能的代碼，重複多餘的建立對象，進而產生大量的內存浪費

 

 4、經過原型模式建立

一、示例

function Person() {}

Person.prototype.name = "mary";
Person.prototype.age = 28;
Person.sayHello = function() {
    alert(this.name + "say hello world");
}

var person = new Person();

二、優勢：每次實例化對象時，僅在對象首次建立時，初始化原型對象，也就是sayHello函數對象僅建立一次，節省了很多內存資源

三、缺點：全部的實例對象共享原型對象的屬性，若是原型對象中包含對象的引用，其中一個實例改變了引用對象的值，將影響到其它全部的實例對象

function Person() {
}

Person.prototype.books = ["Java編程思想", "JavaScript權威指南"];
Person.prototype.name = "person";

var mary = new Person();
mary.books.push("JavaScript高級程序設計");
mary.name = "mary";
console.log(mary.books);    // ["Java編程思想", "JavaScript權威指南", "JavaScript高級程序設計"]
console.log(mary.name);     // mary


var tony = new Person();
console.log(tony.books);    // ["Java編程思想", "JavaScript權威指南", "JavaScript高級程序設計"]
console.log(tony.name);     // person

能夠看到Person的原型對象中定義了一個數組引用屬性和字符串屬性，當mary實例更改了數組引用屬性的值時，tony實例的屬性也被更改了，但當mary對象更改name屬性時，卻不影響tony實例，由於至關於mary本身從新定義了name屬性

 

 5、動態原型模式

一、示例：

function Person(name) {
    this.name = name;
    if(typeof this.sayHello != "function") {
        console.log("init person prototype property");
        Person.prototype.sayHello = function() {
            alert(this.name + "say hello");
        }
    }
}

var mary = new Person("mary");
var tony = new Person("tony");

// init person prototype property

二、優勢：有過相似java面嚮對象語言經驗的，會以爲javascript的原型模式建立對象語法很怪，寫法鬆散，這樣咱們能夠採用動態原型模式，將構造函數的原型代碼書寫在構造函數內部，經過判斷語句，來保證僅在第一次調用構造函數的時候，初始化對象。

三、缺點：構造函數中的代碼變得略複雜