本文主要參考了阮一峯的《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】方法是同一個方法。