Summary of Javascript Object Creation Method

Keywords: Attribute Javascript Programming

Summary of Javascript Object Creation Method

  1. Using the Object constructor to create an object, the following code creates a person object and prints Name's attribute values in two ways.

    var person = new Object();
    person.name="kevin";
    person.age=31;
    alert(person.name);
    alert(person["name"]);
  2. Create an object using object literals; don't be surprised that person ["5"], which is legal; in addition, there can be spaces between fields in this bracketed way, such as person ["my age"].

    var person = 
    {
        name:"Kevin",
        age:31,
        5:"Test"
    };
    alert(person.name);
  3. Create objects using factory mode and return person objects with attributes and methods.
function createPerson(name, age,job)
{
    var o = new Object();
    o.name=name;
    o.age=31;
    o.sayName=function()
    {
        alert(this.name);
    };
    return o;
}
createPerson("kevin",31,"se").sayName();
  1. Create objects using a custom constructor pattern; note the naming conventions here, and capitalize the initials of functions as constructors to distinguish other functions. One drawback of this approach is the sayName approach, where each instance points to a different function instance rather than the same one.

    function Person(name,age,job)
    {
        this.name=name;
        this.age=age;
        this.job=job;
        this.sayName=function()
        {
            alert(this.name);
        };
    }
    
    var person = new Person("kevin",31,"SE");
    person.sayName();
  2. Create objects using prototype patterns; solve the shortcomings mentioned in method 4, so that functions of different objects (such as sayFriends) point to the same function. But it has its own drawback, that is, instances share the reference type friends. As can be seen from the following code execution results, the friends of the two instances have the same value, which may not be what we expected.

    function Person()
    {
    }
    Person.prototype = {
        constructor : Person,
        name:"kevin",
        age:31,
        job:"SE",
        friends:["Jams","Martin"],
        sayFriends:function()
        {
            alert(this.friends);
        }
    };
    var person1 = new Person();
    person1.friends.push("Joe");
    person1.sayFriends();//Jams,Martin,Joe
    var person2 = new Person(); 
  3. The combination of prototype pattern and constructor to create objects solves the defects mentioned in method 5, which is also the most widely used and highly recognized method to create objects.

    function Person(name,age,job)
    {
        this.name=name;
        this.age=age;
        this.job=job;
       this.friends=["Jams","Martin"];
    }
    Person.prototype.sayFriends=function()
    {
        alert(this.friends);
    };
    var person1 = new Person("kevin",31,"SE");
    var person2 = new Person("Tom",30,"SE");
    person1.friends.push("Joe");
    person1.sayFriends();//Jams,Martin,Joe
    person2.sayFriends();//Jams,Martin
  4. Dynamic prototype pattern; the advantage of this pattern is that it looks more like traditional object-oriented programming and has better encapsulation because prototype creation is completed in the constructor. This is also a recommended method for creating objects.

    function Person(name,age,job)
    {
        //attribute
        this.name=name;
        this.age=age;
        this.job=job;
        this.friends=["Jams","Martin"];
        //Method
        if(typeof this.sayName !="function")
        {
            Person.prototype.sayName=function()
            {
                alert(this.name);
            };
            Person.prototype.sayFriends=function()
            {
                alert(this.friends);
            };
        }
    }
    var person = new Person("kevin",31,"SE");
    person.sayName();
    person.sayFriends();

There are also two ways to create objects, the parasitic constructor pattern and the prudent constructor pattern.

Posted by sharke on Wed, 27 Mar 2019 20:00:30 -0700