首页 > 代码库 > js定义类或对象

js定义类或对象

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>js oop 总结</title></head><body>    <script>    /*1 原始方式     *缺点:需要创建多个car实例,推荐等级★    */    var ocar = new Object();    ocar.color = "blue";    ocar.doors = 4;    ocar.mpg = 25;    ocar.showColor = function(){        alert(this.color);    }    ocar.showColor();    //2 原始工厂方式    //缺点:重复生成函数,推荐等级★★    function createCar(){        var oTempCar = new Object();        oTempCar.color = "blue";        oTempCar.doors = 4;        oTempCar.mpg = 25;        oTempCar.showColor = function(){            alert(this.color);        }        return oTempCar;    }    var oCar1 = createCar();    var oCar2 = createCar();    oCar1.showColor();    oCar2.showColor();    //3 在工厂函数外定义对象的方法,推荐等级★★★    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();        //输出 "red"    oCar2.showColor();        //输出 "blue"    //4 构造函数方式    //缺点:构造函数会重复生成函数,推荐等级★★    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();    //5 原型方式,    //缺点:必须在对象创建后才能改变属性的默认值,推荐等级★★    function Car(){}    Car.prototype.color = "blue";    Car.prototype.doors = 4;    Car.prototype.mpg = 25;    Car.prototype.showColor = function(){        alert(this.color);    }    var oCar1 = new Car();    var oCar2 = new Car();    oCar1.showColor();    oCar2.showColor();    //我和我的小伙伴惊呆了    //缺点2:真正的问题出现在属性指向的是对象,而不是函数时。函数共享不会造成问题,但对象却很少被多个实例共享    function Car(){}    Car.prototype.color = "blue";    Car.prototype.doors = 4;    Car.prototype.mpg = 25;    Car.prototype.drivers = new Array("Mike","John");    Car.prototype.showColor = function(){        alert(this.colorj);    }    var oCar1 = new Car();    var oCar2 = new Car();    oCar1.drivers.push("Bill");    alert(oCar1.drivers);    alert(oCar2.drivers);    //6混合的构造函数/原型方式     //即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)    //推荐等级★★★★★    八心八箭,吐血推荐    //目前使用最广泛的是混合的构造函数/原型方式    function Car(sColor,iDoors,iMpg){        this.Color = sColor;        this.doors = iDoors;        this.mpg = iMpg;        this.drivers = new Array("Mike","John");    }    Car.prototype.showColor = function(){        alert(this.color);    }    var oCar1 = new Car("red",4,23);    var oCar2 = new Car("blue",45,41);    oCar1.drivers.push("Bill");    alert(oCar1.drivers);    alert(oCar2.drivers);</script></body></html>

参考资料: http://www.w3school.com.cn/js/pro_js_object_defining.asp

js定义类或对象