• JavaScript 定义类方法


    JavaScript 定义类

    在javascript中定义类或对象有下面几种常用的方式:

    (1)工厂方式

    function createCar(color, doors, mpg){
        var tempCar = new Object;
        tempCar.color = color;
        tempCar.doors = doors;
        tempCar.mpg = mpg;
        tempCar.showColor = function (){
            alert(this.color);
        };
        return tempCar;
    }

    var car1 = createCar("red", 4, 23);
    var car2 = createCar(
    "blue", 3, 25);
    car1.showColor();
    car2.showColor();

    定义了一个能创建并返回特定类型对象的工厂函数,看起来还是不错的,但有个小问题,每次调用时都要创建新函数showColor,我们可以把它移到函数外面,

    function showColor(){
        alert(this.color);
    }
    在工厂函数中直接指向它
    tempCar.showColor = showColor;

    这样避免了重复创建函数的问题,但看起来不像对象的方法了。

    (2)构造函数方式

    function Car(sColor, iDoors, iMpg){
        this.color = sColor;
        this.doors = iDoors;
        this.mpg = iMpg;
        this.showColor = function (){
            alert(this.color);
        };
    }

    var car1 = new Car(
    "red", 4, 23);
    var car2 = new Car(
    "blue", 3, 25);

    car1.showColor();
    car2.showColor();

    可以看到与第一中方式的差别,在构造函数内部无创建对象,而是使用this 关键字。使用new 调用构造函数时,先创建了一个对象,然后用this来访问。
    这种用法于其他面向对象语言很相似了,但这种方式和上一种有同一个问题,就是重复创建函数。

    (3)混合的构造函数/原型方式

    这种方式就是同时使用构造函数方式和原型方式,综合他们的优点,构造函数方式前面介绍过了,现在看一下原型方式

    function Car(){

    }
    Car.prototype.color =
    "red";
    Car.prototype.doors = 4;
    Car.prototype.mpg = 23;
    Car.prototype.showColor = function(){
        alert(this.color);
    };

    var car1 = new Car();
    var car2 = new Car();

    首先定义了构造函数Car,但无任何代码,然后通过prototype 添加属性
    优点:
    a. 所有实例存放的都是指向showColor 的指针,解决了重复创建函数的问题
    b. 可以用 instanceof 检查对象类型
       alert(car1 instanceof Car);  //true

    缺点,添加下面的代码:

    Car.prototype.drivers = new Array(
    "mike", "sue");

    car1.drivers.push(
    "matt");

    alert(car1.drivers);  
    //outputs "mike,sue,matt"
    alert(car2.drivers);  
    //outputs "mike,sue,matt"

    drivers是指向Array对象的指针,Car的两个实例都指向同一个数组。

    下面就用一下混合方式:

    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 car1 = new Car(
    "red", 4, 23);
    var car2 = new Car(
    "blue", 3, 25);

    car1.drivers.push(
    "matt");
    alert(car1.drivers);
    alert(car2.drivers);

    这样就没有问题了,并且还可以使用 instanceof

    (4)动态原型法

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

    var car1 = new Car(
    "red", 4, 23);
    var car2 = new Car(
    "blue", 3, 25);

    car1.drivers.push(
    "matt");
    alert(car1.drivers);
    alert(car2.drivers);

    这种方式是我最喜欢的,所有的类定义都在一个函数中完成,看起来非常像其他语言的类定义,不会重复创建函数,还可以用 instanceof
  • 相关阅读:
    excel的变量
    PHP安装pthreads多线程扩展教程[windows篇]
    识别字符串中的外链图片,下载存到本地,并替换图片地址
    mysql的binlog
    20165327《Java程序设计》实验一 Java开发环境的熟悉 实验报告
    20165327 2017-2018-2 《JAVA程序设计》第5周学习总结
    20165327 2017-2018-2 《Java程序设计》第4周学习总结
    20165327 第三周学习总结
    20165327 预备作业3 Linux安装及学习
    20155339 2016-2017-2 《Java程序设计》第3周学习总结
  • 原文地址:https://www.cnblogs.com/seven_cheng/p/1560319.html
Copyright © 2020-2023  润新知