Seven ways to create JavaScript objects

<script type="text/javascript">
    /**
     * There is no class in JS, so you can create objects directly through Object.* but the biggest problem with creating the following way is that there is no class constraint.* it is impossible to reuse objects, and there is no convention that will take place during operation.Come to a question*/
    var person = new Object();
    person.name = "Leon";
    person.age = 33;
    person.say = function() {
        alert(this.name+","+this.age);
    }
</script>

In many cases, if you can’t pass objects directly through the network, and it’s better to pass strings through the network, can you create objects through strings? We can think of using XML to represent our objects. For example:

<person>
    <id>1</id>
    <username>zhangsan</userame>
    <nickname>Nickname?</nickname>
    <age>23</age>
</person>

 

PersonIdusername attribute and so on. But you can see that the above content to be transmitted is not a lot of content, which is filled with a large number of tags, transmission efficiency is not high. We hope to replace it with another string transfer method.xml“. So there is a new way of delivery.json(JavaScript Object Notation)“.

 

json

 

json isjsxml{} > completes the description of the object.

<script type="text/javascript">
    var person = {
        name:"Zhang three ",//It is represented by attribute name: attribute value.
        age:23,
        say:function() {
            alert(this.name+","+this.age);
        }//No one can be found after the last attribute.
    }
    
    person.say();
    /**
     * JSON can still create an array of objects, creating the same way as JS arrays.*/
    var ps = [
        {name:"Leon",age:22},
        {name:"Ada",age:33}
    ];
    for(var i=0;i<ps.length;i++) {
        alert(ps[i].name);
    }
    /**
     * Create a set of users with attributes of the user.* name:string, age:int, friends:array* the way to write in Java:* List< Person> PS= new ArrayList< Person> ();* ps.add (New Person ("Leon", 22, ["Ada", "Alice"));* ps.adD (New Person ("John", 33, ["Ada", "Chris"));* convert PS to JSON*/
    ps = [
        {
            name:"Leon",
            age:22,
            friends:["Ada","Alice"]
        },
        {
            name:"John",
            age:33,
            friends:["Ada","Chris"]
        }
    ];
    </script>

Without the concept of class, the biggest problem in these two ways is that objects can not be reused. Objects can be created by factory mode.

<script type="text/javascript">
    /**
     * Create Person objects through factory mode* create an object in createPerson.* then set the corresponding properties and methods for this object.* then return to this object.*/
    function createPerson(name,age) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.say = function() {
            alert(this.name+","+this.age);
        }
        return o;
    }
    /**
     * Although the use of factories effectively solves the problem of classes, there is still another problem.* we cannot detect data types of objects P1 and P2.*/
    var p1 = createPerson("Leon",22);
    var p2 = createPerson("Ada",33);
    p1.say();
    p2.say();
    //alert(typeof p1);//Return to object
    //alert(p1 instanceof ?);//Without person class, instanceof cannot be used.
    </script>

The factory mode can not detect the data types of P1 and P2. We can create them through constructors.

 

<script type="text/javascript">
    /**
     * Created by way of constructor, similar to factory based creation.* the biggest difference is that the name of the function is the name of the class, according to the Java agreement, the first one.* capitalization. When using constructor, it is passed through this keyword in function.come* definition of attributes*/
    function Person(name,age) {
        this.name = name;
        this.age = age;
        //The problem with the following approach is that all objects allocate space for this behavior.
        this.say = function() {
            alert(this.name+","+this.age);
        }
    }
    /*
     * Creating objects through new Person*/
    var p1 = new Person("Leon",22);
    var p2 = new Person("Ada",32);
    p1.say(); p2.say();
    /**
     * The way to use constructors can be detected in the following ways* type of object*/
    alert(p1 instanceof Person);
    /**
     * The first problem that comes with building function creation is in every object.* there will be a copy of the method, if the object's behavior is a lot.* the occupancy rate of space will increase greatly.*/
    alert(p1.say==p2.say);//false，This is not the same say.
    </script>