• (转)Javascript-类的基本定义方式


    经典模式

    直接生成对象实例,并操作实例

    //定义  
    var aCar = new Object();  
    aCar.color = "red";  
    aCar.doors = 4;  
    aCar.showColor = function() {}
     //调用  
    aCar.showColor();

    工厂模式

    其实就把上面的代码用过函数封装一下

    //定义
     function createCar(color,doors){ 
    var aCar = new Object();  
    aCar.color = color;  
    aCar.doors = doors;  
    aCar.showColor = function() {
    alert(this.color);};  
    return aCar;  
    }
     //调用  
    bCar = createCar('red',4);  
    bCar.showColor();

    混合工厂模式

    函数名直接用类名,然后用了关键字new,其实这样写仅仅是好看一些,和上面的工厂方法没有本质区别。

    //定义  
    function car(color,doors){  
    var aCar = new Object();
     aCar.color = color;
     aCar.doors = doors;
     aCar.showColor = function() {
    alert(this.color);};  
    return aCar;  
    }  
    //调用  
    bCar = new car('red',4);  
    bCar.showColor();

    构造模式(常用方式)

    //定义
     function car(color,doors){  
    this.color = color;
     this.doors = doors;
     this.showColor = function() {alert(this.color);};  
    }  
    //调用  
    bCar = new car('red',4);  
    bCar.showColor();

    和上面相比,少了2句:var aCar = new Object()  return aCar 。实际上关键字 new 默认执行了一个操作:this = new Object() ,而this会作为构造函数的默认返回值。

    原型模式

    //定义  
    function car(){}
     car.prototype.color = 'red';
     car.prototype.doors = 4;
     car.prototype.showColor = function() {alert(this.color);};    
    //调用  
    bCar = new car();  
    bCar.showColor();

    动态原型模式

    定义并判断类的静态属性_initialized,在构造函数内部动态定义修改类原型。

    //定义
     function car(color,doors) {  
    this.color = color;
     this.doors = doors;
     if (typeof car._initialized == "undefined") {
     car.prototype.showColor = function() {  alert(this.color);  };  
    }  
    car._initialized = true;  
    }  
    //调用  
    aCar = new car('red',4);  
    aCar.showColor();

     

    总结:

    这些是JavaScript类定义的几种基本模式,实际每种模式下定义出的属性和类都是有区别的,经典模式和工厂模式因为不符合OOP的语法习惯,基本没有人用了。我们通常使用构造模式和原型模式的混合定义类

    目前最流行的也是最实用的类定义结构如下:

    //用构造模式定义类的构造器和属性  
    function car(color,doors){  
    //用构造模式定义属性  
    this.color = color;
     this.doors = doors;  }    
     
    //用原型模式定义方法  
    car.prototype.showColor = function(){  alert(this.color);  };    
     
    //这是静态属性  
    car.type = 'vehicle';  
     
     aCar = new car('red',4);  
    aCar.showColor();

    1.使用构造模式定义类的构造函数和非函数属性

    2.使用原型模式定义类的函数属性(方法)

    3.可以通过ClassName.name的方式定义静态属性

    4.函数(方法)在本质上也是一种属性,有关各种属性定义方式的区别可以参看后面的参考章节。

     

  • 相关阅读:
    vue-cli搭建项目结构及引用bootstrap
    万年历案例
    art-template模板渲染及其过滤器
    字符串中全角半角之间的转换
    大话主席(superslide和 touchslide)插件的使用
    JS中对URL进行转码与解码
    animate.css引入实现动画效果
    [MySQL]group by 与 having 结合函数 的统计技巧
    [HTTP] 基本认证的工作流程
    [HTTP]Etag的工作流程
  • 原文地址:https://www.cnblogs.com/zjsct/p/3880012.html
Copyright © 2020-2023  润新知