javascript 寫類方式之四
更新時間：2009年07月05日 01:36:00 作者：
構(gòu)造函數(shù) + 原型 直接組裝一個類；同一構(gòu)造函數(shù)將組裝出同一類型
4、構(gòu)造函數(shù) + 原型 直接組裝一個類；同一構(gòu)造函數(shù)將組裝出同一類型
通過前面幾篇得知javascript寫類無非基于構(gòu)造函數(shù) 和原型 。既然這樣，我們寫個工具函數(shù)來寫類。
/**
* $class 寫類工具函數(shù)之一
* @param {Object} constructor
* @param {Object} prototype
*/
function $class(constructor,prototype) {
var c = constructor || function(){};
var p = prototype || {};
c.prototype = p;
return c;
}
嗯。工具類寫好了，來組裝下：用構(gòu)造函數(shù)來生成類實例的屬性（字段），原型對象用來生成類實例的方法。
//構(gòu)造函數(shù)
function Person(name) {
this.name = name;
}
//原型對象
var proto = {
getName : function(){return this.name},
setName : function(name){this.name = name;}
}
//組裝
var Man = $class(Person,proto);
var Woman = $class(Person,proto);
ok，這時候已經(jīng)得到了兩個類Man，Woman。并且是同一個類型的。測試如下：
console.log(Man == Woman);//true
console.log(Man.prototype == Woman.prototype);//true
創(chuàng)建對象看看，
var man = new Man("Andy");
var woman = new Woman("Lily");
console.log(man instanceof Man);//true
console.log(woman instanceof Woman);//true
console.log(man instanceof Person);//true
console.log(woman instanceof Person);//true
ok一切如我們所期望。但是有個問題，下面代碼的結(jié)果輸出false，
console.log(man.constructor == Person);//false
這讓人不悅：從以上的代碼看出man的確是通過Man類new出來的 var man = new Man("Andy")，那么對象實例man的構(gòu)造器應(yīng)該指向Man，但為何事與愿違呢？
原因就在于$class中重寫了Person的原型：c.prototype = p;
好了，我們把$class稍微改寫下，將方法都掛在構(gòu)造器的原型上（而不是重寫構(gòu)造器的原型），如下：
function $class(constructor,prototype) {
var c = constructor || function(){};
var p = prototype || {};
// c.prototype = p;
for(var atr in p)
c.prototype[atr] = p[atr];
return c;
}
通過前面幾篇得知javascript寫類無非基于構(gòu)造函數(shù) 和原型 。既然這樣，我們寫個工具函數(shù)來寫類。
復(fù)制代碼 代碼如下:
/**
* $class 寫類工具函數(shù)之一
* @param {Object} constructor
* @param {Object} prototype
*/
function $class(constructor,prototype) {
var c = constructor || function(){};
var p = prototype || {};
c.prototype = p;
return c;
}
嗯。工具類寫好了，來組裝下：用構(gòu)造函數(shù)來生成類實例的屬性（字段），原型對象用來生成類實例的方法。
復(fù)制代碼 代碼如下:
//構(gòu)造函數(shù)
function Person(name) {
this.name = name;
}
//原型對象
var proto = {
getName : function(){return this.name},
setName : function(name){this.name = name;}
}
//組裝
var Man = $class(Person,proto);
var Woman = $class(Person,proto);
ok，這時候已經(jīng)得到了兩個類Man，Woman。并且是同一個類型的。測試如下：
復(fù)制代碼 代碼如下:
console.log(Man == Woman);//true
console.log(Man.prototype == Woman.prototype);//true
創(chuàng)建對象看看，
復(fù)制代碼 代碼如下:
var man = new Man("Andy");
var woman = new Woman("Lily");
console.log(man instanceof Man);//true
console.log(woman instanceof Woman);//true
console.log(man instanceof Person);//true
console.log(woman instanceof Person);//true
ok一切如我們所期望。但是有個問題，下面代碼的結(jié)果輸出false，
復(fù)制代碼 代碼如下:
console.log(man.constructor == Person);//false
這讓人不悅：從以上的代碼看出man的確是通過Man類new出來的 var man = new Man("Andy")，那么對象實例man的構(gòu)造器應(yīng)該指向Man，但為何事與愿違呢？
原因就在于$class中重寫了Person的原型：c.prototype = p;
好了，我們把$class稍微改寫下，將方法都掛在構(gòu)造器的原型上（而不是重寫構(gòu)造器的原型），如下：
復(fù)制代碼 代碼如下:
function $class(constructor,prototype) {
var c = constructor || function(){};
var p = prototype || {};
// c.prototype = p;
for(var atr in p)
c.prototype[atr] = p[atr];
return c;
}
相關(guān)文章
Base據(jù)說是最好的js繼承的封裝類,最近讀了一下base2.js的繼承部分,現(xiàn)在將源碼的解析貼下,有錯誤的地方希望大家指出,我會更新的.2008-12-12
ju 應(yīng)該是一個定義了各種方法對象 function(b) 的 b 就是 b(a[d], d) 中的參數(shù) a[d] C 是統(tǒng)計方法數(shù)量的函數(shù)2008-03-03
JavaScript面向?qū)ο笾o態(tài)與非靜態(tài)類
使用JavaScript面向?qū)ο笸耆鲇谂既?，因為大部分時間我都是在無圖形界面的環(huán)境下工作，有時候就算是介入了web客戶端的工作的時候，在寫js和ajax時，最多的也只是寫寫function，從沒有考慮過要使用JavaScript面向?qū)ο筮@么高級的技巧。2010-02-02
上回說到了類的定義，prototype通過一個全局對象Class從形式上將函數(shù)和類區(qū)別開來。2010-05-05
本文介紹了JavaScript里面的this屬性。這個屬性是理解JavaScript類和繼承的重要基礎(chǔ)。2010-09-09
Javascript面向?qū)ο缶幊蹋ㄈ?非構(gòu)造函數(shù)的繼承
這個系列的第一部分介紹了"封裝"，第二部分介紹了使用構(gòu)造函數(shù)實現(xiàn)"繼承"。2011-08-08
我覺得，Object（對象）最難。因為Javascript的Object模型很獨特，和其他語言都不一樣，初學(xué)者不容易掌握。2011-08-08![編寫可維護面向?qū)ο蟮腏avaScript代碼[翻譯]](http://img.jbzj.com/images/xgimg/bcimg7.png)
編寫可維護面向?qū)ο蟮腏avaScript代碼[翻譯]，學(xué)習(xí)js面向?qū)ο缶帉懙呐笥芽梢詤⒖枷隆?/div> 2011-02-02
Javascript 面向?qū)ο螅ǘ┓庋b代碼，需要的朋友可以參考下2012-05-05
js對象的構(gòu)造和繼承實現(xiàn)代碼，學(xué)習(xí)javascript面向?qū)ο蟮呐笥芽梢詤⒖枷?。寫出跟漂亮與復(fù)用的代碼。2010-12-12最新評論