JS面向对象

Posted 2020-10-22 qianboy

假如现在需要我们来编写一个游戏,游戏里面的用兵单位是机器人,这时我们需要创建一个机器人对象.这里我们可以这样来创建我们的机器人对象

一：创建对象

1、对象字面量法

var robot={
        "main title":"javascript",
        "sub-title":"The Definite"
    }

2、通过new创建对象

var robot = new Object()

这里来看明显后面的方式看起来比较简洁,所以我们这里主要使用后者来创建我们的对象

我们需要给我们的 robot 赋予一些方法,例如他的代号code,他的生产序号number,他的攻击方式attackMode等属性,这时我们就可以这么来写：

/*第一种写法*/
    var robot={};

    robot.code = "r007";
    robot.number = "666";
    robot.attachMode = function(){
        //
        //.....
    }

    /*第二种写法*/
    var robot = {
        code:"r007";
        number:"666";
        attachMode:function(){

        }
    }

这时我们访问我们的机器人对象属性时就可以通过以下两种方式来访问.

• robot.code
• robot[‘code‘]

但这时的我们肯定不会只满足制造一个机器人呀,这种机器人我们需要量产时,但是我们又不可能使用我们上面这种方法来制造多个机器人,这样写出来的代码量会有很多重复无用的代码,这时我们的工厂模式就应运而生.

工厂模式

工厂模式形象店来说就是我们自己创建一个模具,然后用这个模具来量产.

var createRobots = function(code,number){
        //新建一个对象
        var robot = new Object();
        robot.code = code;
        robot.number = number;
        robot.attactMode = function(){
            //
            //。。。。
        }

        //返回一个对象
        return robot
    }

    var robotA = createRobots("r007","666");
    var robotB = createRobots("r008","777");

这个时候看着很美好,但是渐渐地有些人发现了一些不同寻常的地方,那就是用工厂模式造出来的对象,我们没有办法去识别对象的类型,因为它们直接由 Object() 构造函数创建，原型链上只有 Object.prototype 对象.所以这里我们的构造函数也应运而生

var robot = function(code,number){
        //新建一个对象
        this.code = code;
        this.number = number;
        this.attactMode = function(){
            //
            //。。。。
        }

    }

    var robotA = new robot("r007","666");
    var robotB = new robot("r008","777");

使用构造函数虽然解决了我们类型判断的问题,但是,他还是一个对象的复制过程,跟上面的工厂模式还是有一定的相似之处,所以他也存在这工厂模式的另一个问题,就是我们的attackMode这个方法随着这个对象被声明1000个,这个方法也会因为属于不同的实例而在内存中重复声明1000次.在这里,就需要用到原型相关知识了

var robot = function(code,number){
        //新建一个对象
        this.code = code;
        this.number = number;
    }

    robot.prototype.attachMode = function(){
        //
        //....
    }

    var robotA = new robot("r007","666");
    var robotB = new robot("r008","777");

但这里又出现了一个小问题,如果我们所有的原型上面的方法都像这样来写,那就成下面这个样子了?

var robot = function(code,number){
        //新建一个对象
        this.code = code;
        this.number = number;
    }

    robot.prototype.attachMode = function(){
        //
        //....
    }

    robot.prototype.defendMode = function(){
        //
        //....
    }

    var robotA = new robot("r007","666");
    var robotB = new robot("r008","777");

这样的代码是不是看着不够优雅?所以这个时候我们可以采用下面这种写法来替代上面的.

robot.prototype=function(){
        constructor:robot,
        attachMode:function(){
            //
            //
        },
        defendMode:function(){
            //
            //
        }

    }