首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

javascript_创办类和对象_小结

2012-10-20 
javascript_创建类和对象_小结javascript中的类和对象创建方式?一、构造函数+原型方式创建一个对象,构造函

javascript_创建类和对象_小结

javascript中的类和对象创建方式

?

一、构造函数+原型方式

创建一个对象,构造函数是最直接的方式了,不论对编译型的java还是解释型的ruby,都用new来创建对象。javascript也可以用new来创建。

例子:

        function Car(sColor, iDoors, iMpg) {            this.color = sColor;            this.doors = iDoors;            this.mpg = iMpg;            this.showColor = function () {                alert(this.color);            };        }        var oCar1 = new Car("red", 4, 23)        var oCar2 = new Car("blue", 3, 25)        oCar1.showColor();        oCar2.showColor();

因为javascript中的函数也是一个对象,这种方式就导致了一个问题:每new一个对象,就重复创建一个一模一样的“方法对象”。

因为方法也是一个对象(方法对象),那么可否在构造函数里再增加一个参数呢?可以,如下。这种方式有点儿ruby的味道了(传递一个方法),但是这不符合习惯(方法在类内建立),也不符合科学(建立很多方法总不能这么传递进去吧)。接着往下看。

        showColor = function () {            alert(this.color);        };        function Car(sColor, iDoors, iMpg, fnShowColor) {            this.color = sColor;            this.doors = iDoors;            this.mpg = iMpg;            this.showColor = fnShowColor        }        var oCar1 = new Car("red", 4, 23, showColor)        var oCar2 = new Car("blue", 3, 25, showColor)        oCar1.showColor()        oCar2.showColor()

进一步的解决方式是,利用javascript的prototype属性,可以让所有new的对象“继承”同一个方法。

这种方式遗留的一个缺点是不好看:一个函数定义在了类之外。

//用构造方法设置属性,用原型方法设置函数(因为函数是共享的)        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 oCar1 = new Car("red", 4, 23);        var oCar2 = new Car("blue", 3, 25);        oCar1.drivers.push("Matt");        alert(oCar1.drivers); //outputs "Mike,Sue,Matt"        alert(oCar2.drivers); //outputs "Mike,Sue"
?

二、动态的原型方式

?

        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;            }        }

似乎这种方式最完美,不过也引入了额外的判断代码。

注意:Car是构造方法,javascript中方法是对象,对象可以有属性,而且可以动态添加。这个_initialized属性就是这么来的。

?

三、工厂方式(很少使用)

工厂方式就是在工厂内new一个Object,之后把工厂方法的参数赋给这个对象。

function createCar(sColor, iDoors, iMpg) {var oTempCar = new Object;oTempCar.color = sColor;oTempCar.doors = iDoors;oTempCar.mpg = iMpg;oTempCar.showColor = function () {alert(this.color)};return oTempCar;}var oCar1 = createCar(“red”, 4, 23);var oCar1 = createCar(“blue”, 3, 25);oCar1.showColor(); //outputs “red”oCar2.showColor(); //outputs “blue”

这种方式也有重复建立方法的问题。一个改进如下,但更让代码难看。

function showColor() {alert(this.color);}function createCar(sColor, iDoors, iMpg) {var oTempCar = new Object;oTempCar.color = sColor;oTempCar.doors = iDoors;oTempCar.mpg = iMpg;oTempCar.showColor = showColor;return oTempCar;}var oCar1 = createCar(“red”, 4, 23);var oCar2 = createCar(“blue”, 3, 25);oCar1.showColor(); //outputs “red”oCar2.showColor(); //outputs “blue”

?综合来看,这种方式适合做框架用,但不如前两种易于理解和使用(没关)。

?

+——

+——

+——

)顺便说一句,javaeye或iteye这个编辑器真难用,老出现下面的乱码。真是受不了了。

?

    ????????????<SPAN?style="COLOR:?#000000">if?(typeof?Car._initialized?==?"undefined")?{//这个大括号里定义原型方法</SPAN> ????????????????????Car.prototype.showColor?=?function?()?{ ??????????????????????alert(this.color); ??????????????????}; ?????????????<SPAN?style="COLOR:?#0000ff">?????<SPAN?style="COLOR:?#000000">Car._initialized?=?true;</SPAN> ??</SPAN> ?

?

+——

+——

+——

?

热点排行