JavaScript中的定義類 - 建站學院 - 源碼網

源碼網歡迎您!

JavaScript中的定義類(2013-03-21)

在javascript中定義類或對象有下面幾種常用的方式:

工廠方式

復制代碼
function createCar(color, doors, mpg){
    var tempCar = new Object;
    tempCar.color = color;
    tempCar.doors = doors;
    tempCar.mpg = mpg;
    tempCar.showColor = function (){
        alert(this.color);
    };
    return tempCar;
}

var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor();
car2.showColor();
復制代碼

定義了一個能創建并返回特定類型對象的工廠函數,看起來還是不錯的,但有個小問題,每次調用時都要創建新函數showColor,我們可以把它移到函數外面,

function showColor(){
    alert(this.color);
}
在工廠函數中直接指向它
tempCar.showColor = showColor;

這樣避免了重復創建函數的問題,但看起來不像對象的方法了。

構造函數方式

復制代碼
function Car(sColor, iDoors, iMpg){
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.showColor = function (){
        alert(this.color);
    };
}
var car1 = new Car("red", 4, 23);
var car2 = new Car("blue", 3, 25);
car1.showColor();
car2.showColor();
復制代碼

可以看到與第一中方式的差別,在構造函數內部無創建對象,而是使用this 關鍵字。使用new 調用構造函數時,先創建了一個對象,然后用this來訪問。
這種用法于其他面向對象語言很相似了,但這種方式和上一種有同一個問題,就是重復創建函數。

構混合的構造函數/原型方式


這種方式就是同時使用構造函數方式和原型方式,綜合他們的優點,構造函數方式前面介紹過了,現在看一下原型方式
復制代碼
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.mpg = 23;
Car.prototype.showColor = function(){
    alert(this.color);
};
var car1 = new Car();
var car2 = new Car();
復制代碼
首先定義了構造函數Car,但無任何代碼,然后通過prototype 添加屬性
優點:
a. 所有實例存放的都是指向showColor 的指針,解決了重復創建函數的問題
b. 可以用 instanceof 檢查對象類型
   alert(car1 instanceof Car);  //true

缺點,添加下面的代碼:
Car.prototype.drivers = new Array("mike", "sue");
car1.drivers.push("matt"); alert(car1.drivers);  //outputs "mike,sue,matt" alert(car2.drivers);  //outputs "mike,sue,matt" drivers是指向Array對象的指針,Car的兩個實例都指向同一個數組。
下面就用一下混合方式:
復制代碼
function Car(sColor, iDoors, iMpg){
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = new Array("mike", "sue");
}
Car.prototype.showColor = function (){
    alert(this.color);
};
var car1 = new Car("red", 4, 23);
var car2 = new Car("blue", 3, 25);
car1.drivers.push("matt");
alert(car1.drivers);
alert(car2.drivers);
復制代碼
這樣就沒有問題了,并且還可以使用 instanceof

動態原型法

復制代碼
function Car(sColor, iDoors, iMpg){
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = new Array("mike", "sue");
    if(typeof Car.initialized == "undefined"){
        Car.prototype.showColor = function (){
            alert(this.color);
        };
        Car.initialized = true;
    }
}
var car1 = new Car("red", 4, 23);
var car2 = new Car("blue", 3, 25);
car1.drivers.push("matt");
alert(car1.drivers);
alert(car2.drivers);
復制代碼
這種方式是我最喜歡的,所有的類定義都在一個函數中完成,看起來非常像其他語言的類定義,不會重復創建函數,還可以用 instanceof

上一篇:準確獲取指定元素CSS屬性值

下一篇:Photoshop調出外景人物照片頹廢暗黃色

關于本站  |  版權聲明 | 合作聯系 | 網站地圖 | 幫助中心 |  | XHTML/CSS
Copyright © 2004-2010 downcodes.com 程序支持:木翼 冀ICP備05003145號
本站誠招服務器贊助商
贵州11选5漏选情况 甘肃快3开奖号 全天北京pk赛车人工计划 黑龙江6 1体彩开奖结果查询 南国彩票论坛七星彩论 002161股票分析 黑龙江11选5最大遗漏号 重庆时时全天两码计划 哪个平台有湖南幸运赛车 快三在线和值计划网站 最近100期排列五