zoukankan      html  css  js  c++  java
  • js定义类或对象

    1. 工厂方式

    var oCar=new Object;
    oCar.color="red";
    oCar.doors=4;
    oCar.mpg=23;
    oCar.showCar=function(){
           alert(this.colorr);
    };

    可能需要创建多个Car对象,所以可以封装在一个函数中,见代码

    function createCar()
    {
    var oTempCar=new Object;
    oTempCar.color="red";
    oTempCar.doors=4;
    oTempCar.mpg=23;
    oTempCar.showColor=function(){
    alert(this.color);
    
    return oTempCar
    }
    View Code

    但是,这样也会出现一个问题,就是每次创建对象的时候,都会需要创建新showCar函数,这样每个对象都有一个自己的showCar函数,解决方法是在创建对象之前先创建函数方法,然后在createCar内部使用函数指针的方式指向该函数。

     2.构造函数方式

     1 function Car(sColor,iDoors,iMpg){
     2     this.color=sColor;
     3     this.doors=iDoors;
     4     this.mpg=iMpg;
     5     this.showColor=function(){
     6                 alert(this.color);
     7     };
     8 }
     9 
    10 var oCar1=new Car("red",4,23);
    11 var oCar2=new Car("blue",3,25);
    View Code

    这样会遇到同样的问题,函数会有多份被创建,解决的方法就是通过原型方式。

    3.原型方式

    function Car(){
    }
    
     Car.prototype.color="red";
     Car.prototype.doors=4;
     Car.prototype.showColor=function(){
                alert(this.color);
    
    var oCar1=new Car();
    var oCar2=new Car();

    如此,在每次创建的时候都是创建的同样有初始值的对象,也不妥当。所以采用构造函数原型结合的方式进行,属性定义为构造函数,方法定义为原型。

    4.混合的构造函数/原型方式

     1 function Car(sColor,iDoors,iMpg){
     2       this.color=sColor;
     3       this.doors=iDoors;
     4       this.mpg=iMpg;
     5       this.drivers=new Array("Mike","Sue");
     6 }
     7 
     8 Car.prototype.showColor=function(){
     9          alert(this.color);
    10 };
    11 
    12 var oCar1=new Car("red",4,23);
    13 var oCar2=new Car("blue",3,25);
    14 
    15 oCar1.drivers.push("Matt");
    16 
    17 alert(oCar1.drivers);
    18 alert(oCar2.drivers);
    View Code

    5.动态原型法
    能够使所有的内容均定义在一个类的内部使用。

     1 function Car(sColor,iDoors,iMpg){
     2       this.color=sColor;
     3       this.doors=iDoors;
     4       this.mpg=iMpg;
     5       this.drivers=new Array("Mike","Sue");
     6        };
     7      if(typeof Car._initialized=="undefined"){
     8          Car.prototype.showColor=function(){
     9                  alert(this.color);
    10             }
    11              Car._initialized=true;
    12        }
    13   }
    View Code
  • 相关阅读:
    逻辑分支中if小括号中的隐式转换
    逻辑运算符
    CSS——元素的显示与隐藏
    JS对象
    JS预解析与变量提升
    JS作用域
    JS函数
    CSS定位(position)
    JS数组
    JS分支结构与循环结构
  • 原文地址:https://www.cnblogs.com/baozi/p/3181420.html
Copyright © 2011-2022 走看看