<!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定义类或对象的更多相关文章

  1. ES5:深入解析如何js定义类或对象。

    1.原始方式 var oCar = new  Object; oCar.color = "blue"; oCar.showColor = function(){alert(this ...

  2. JS定义类及对象

    1.工厂方式 <script type="text/javascript"> function createObject(name){ var p = new Obje ...

  3. JS创建类和对象

    JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...

  4. JS创建类和对象（好多方法哟！）

    http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html 这是别人写的~~~我借来看看 JavaScript 创建类/对象的几种方式 ...

  5. 我所了解的关于JavaScript定义类和对象的几种方式

    原文:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html 在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hois ...

  6. JavaScript定义类与对象的一些方法

    最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (fu ...

  7. JS创建类和对象，看完了，头就不大了

    JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...

  8. JS定义类的六种方式详解

    转载自: http://www.jb51.net/article/84089.htm 在前端开发中,经常需要定义JS类.那么在JavaScript中,定义类的方式有几种,分别是什么呢?本文就JS定义类 ...

  9. 优雅地创建未定义类PHP对象

    在PHP中,如果没有事先准备好类,需要创建一个未定义类的对象,我们可以采用下面三种方式: new stdClass() new class{} (object)[] 首先是stdClass,这个类是一 ...

随机推荐

  1. Corel VideoStudio Pro X7（会声会影）

    今天了解一天的视频剪辑方面的知识,自己也动手做了一个. 好啦!下面给大家一些建议: 剪辑软件选择: 1.易学易用.容易上手.模板丰富:会声会影:(需要安装包的可以留言和私信我)2.功能齐全.占用资源少 ...

  2. .NET 中易混淆的概念（Delegate vs Event）

    事件(event)是一个非常重要的概念,我们的程序时刻都在触发和接收着各种事件:鼠标点击事件,键盘事件,以及处理操作系统的各种事件.所谓事件就是 由某个对象发出的消息.比如用户按下了某个按钮,某个文件 ...

  3. javascript中字符串常用方法总结

    字符串是javascript编程中不可或缺的元素,掌握字符串常用的方法也是我们学习过程中的必经之路,下面我们总结一些最常用的的字符串方法. string.charAt(postion) charAt方 ...

  4. 清理收缩VMware虚拟机MacOS系统的vmdk文件大小

    屌丝行和差的主要标准,尽管持续性眼贪婪mbp.但是,从另一方面限制患有米,只是在虚拟机中播放MacOS.(我不会告诉你我的笔记本i5+120SSD+500HHD+12G内存,跑MacOS虚拟机一点不卡 ...

  5. timesten备份和恢复

    ttIsql "DSN=ttwind;UID=cacheuser;PWD=cacheuser;OraclePWD=cacheuser;" --1.查看当前版本号 Command&g ...

  6. 开始 space viking 之旅

     设备 cocos2d-v2 眼下cocos2d-v3也不太稳定,它在很大程度上仍然是变化的功能. 对于稳定.我们仍然使用 v2 wget -c http://cocos2d-iphone.goo ...

  7. WebBrowser编程简述

    原文:WebBrowser编程简述 1.初始化和终止化(Initialization & Finalization) 大家在执行TWebBrowser的某个方法以进行期望的操作,如ExecWB ...

  8. [WPF]程序全屏

    原文:[WPF]程序全屏 代码: 使用:

  9. 財智V6.0（完美破解序列号特别版）

    財智V6.0(完美破解序列号特别版)               財智V6.0(完美破解序列号特别版)   財智6是眼下唯一在中央台报道的.比較成熟的国产理財软件.能全面管理家庭的日常收入.消费.储蓄 ...

  10. Asp.net vNext 学习3

    Asp.net vNext 学习之路(三) asp.net vNext 对于构建asp.net 程序带来了一些重大的改变,让我们开发asp.net 程序的时候更加的方便和高效. 1,可以很容易的去管理 ...