JavaScript 建立對象的方式

本文主要參考了阮一峯的《Javascript 面向對象編程(一):封裝javascript

一、原始方法(也是最簡單的方法)html

var p1 = {};
var person = new Object();

上面兩行代碼的效果是同樣的。java

var p1 = {};
p1.name = '張三';
p1.age = 23;

var p2 = {};
p2.name = '翠花';
p2.age = 18;

二、原始方法升級版編程

function Person(name, age) {
    return {
        name: name,
        age: age
    }  
}
var p1 = Person('張三', 23);
var p2 = Person('翠花', 18);

這種方法建立的對象沒有任何聯繫,它的本質和方法1沒什麼區別。函數

三、構造函數模式(使用this)this

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var p1 = new Person('張三', 23);
var p2 = new Person('翠花', 18);

上面的代碼實例的constructor屬性指向他們的構造函數。spa

p1.constructor == Person //true
p2.constructor == Person //true

p1 instanceof Person //true
p2 instanceof Person //true

而且用instanceof驗證確實是Person的實例。prototype

構造方法的問題code

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.takeBus = function() {
        alert('Take a bus.');
    }
}
var p1 = new Person('張三', 23);
var p2 = new Person('翠花', 18);

對上面的方法增長了一個【takeBus】方法以後,表面上看沒什麼問題,可是:htm

p1.takeBus == p2.takeBus //false

說明p1和p2分別有了一個【takeBus】這個方法,即【takeBus】這個方法並無公用。形成資源浪費。那麼,如何公用呢?

四、Prototype模式

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

Person.prototype.takeBus = function() {
    alert('Take a bus.');
}
        
var p1 = new Person('張三', 23);
var p2 = new Person('翠花', 18);

p1.takeBus == p2.takeBus // true

能夠看到使用prototype這種方法使得【Person】實例化獲得的對象【takeBus】方法是同一個方法。

相關文章
相關標籤/搜索