使用JavaScript进行面向对象开发 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

构造函数

上节中的newWorker并不是真正的构造函数,JavaScript中提供了真正的构造函数,它的语法和定义一个function其实是一样的:

    function worker(name,age){
        this.name = name;
        this.age = age;
        this.isWorking = false;
    }

    //通过new关键字实例化
    var tom = new worker("tom", 24);

怎么样?现在看上去是不是有点像面向对象的样子了?有点酷酷的哦,worker内部通过this关键字给实例增加了新的属性,我们同样可以使用this关键时定义新的方法:

    function worker(name, age){
        this.name = name;
        this.age = age;
        this.isWorking = false;
        this.startWork = function(){
            if(this.isWorking) return;
            this.isWorking = true;
        };
    }

    var tom = new worker("tom", 24);
    tom.startWork();

越来越有点面向对象的样子了,即new了一个实例,又调用了实例上的方法。一切都很好,可是美中不足的是,这代段码实质上是创建了一个worker的实例,并将name,age,isWorking,startWork等成员在创建worker的实例后,放在实例上。

这就好像,我们要创建工人的实例,这些工人需要会打卡、修电灯和吃饭,按照上面代码的逻辑来映射的话就是:

  1. 创建一个什么都不会的工人
  2. 开始教这个工人如何打卡
  3. 开始教这个工人如何修电灯
  4. 开始教这个工人如何吃饭
  5. 投入使用

等下次还需要创建一个工人的时候,依然要重走上面的路线。
那我们不难要问,为什么不发他们一个员工手册自己看呢?

另外通过右边的例子,我们还可以发现jim和tom的startWork并不指向不一个内存,也就意味着,当我们有很多实例的时候,内存开销会非常大。