How many ways are there to declare javascript objects? Six ways to declare javascript objects

What this article brings to you is how many ways are there to declare javascript objects? The six ways of declaring JavaScript objects have certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

-- If you are new to knowledge, you don’t need to write in ES6.

1. Literal declaration

var obj = {
        属性名1 : 属性值,
        属性名2 : 属性值,
        属性名3 : 属性值,
        方法名1 : function() {
            .....
        },
        方法名2 : function() {
            .....
        }
    }

You can read or call the object through obj.property name or obj.method name() properties/methods.

2. Use the new operator to construct the Object object

var obj = new Object();
obj.属性名1 = 属性值1;
obj.属性名2 = 属性值2;
obj.属性名3 = 属性值3;
obj.属性名4 = 属性值4;
obj.方法名1 = function() {
    ....
};
obj.方法名2 = function() {
    ....
};
....

First use new Object() to create an empty object, and then use multiple statements to add properties/methods to the object .

3. Construct objects using function declarations

The functionFunction itself is an instance of the objectObject

var fn = new Function(); //new一个空函数
function myFn() {}; //声明一个空函数
console.log(fn instanceof Object); //true
console.log(myFn instanceof Object); //true

so it can Imitate the way new Objcet() constructs an object, use function myFn() {} to declare a custom function, and then construct the object through new myFn() , for example:

function person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function() {
            console.log('My name is '+ this.name + ', I\'m ' + this.age + ' years old');
        }
    }
    var xiaoMing = new person('xiaoming', 16);
    xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"

For objects declared in this way, each new object is independent and will not affect each other. this in attributes and methods points to the newly created objects that call them.

4. Factory Pattern Declaration Object

Factory pattern declaration object can be understood as a combination of two methods, two and three, using the idea of ​​three to incorporate the content of two. Take the example above:

function person(name, age) {
        var obj = new Object(); 
        obj.name = name;
        obj.age = age;
        obj.say = function() {
            console.log('My name is '+ obj.name + ', I\'m ' + obj.age + ' years old');
        };
        return obj;
    }
    var xiaoMing = person('xiaoming', 16);
    xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"
    var xiaoHong = person('xiaohong', 18);
    xiaoHong.say(); //"My name is xiaohong, I'm 18 years old"

The reason why the factory model is called the factory model is that it is similar to a factory in real life that can produce a large number of similar products, do the same thing, and achieve the same effect. His writing method is similar to 3. Constructing objects using function declaration, but it is slightly different.

Every time the function declared function is called, it new Object() internally, and finally return the newly created object back, When calling, it is just like a normal function call. There is no need to new when instantiating (new is done internally). Although calling this function multiple times follows the same process, the two products produced do not affect each other.

5. Prototype method to declare an object

function person() {/*空*/};
    person.prototype.height = "1.80m";
    person.prototype.grade = "Senior 3";
    person.prototype.say = function() {
        console.log( 'I\'m ' + this.height + ' tall and I\'m in '+ this.grade);
    }
    var xiaoMing = new person();
    xiaoMing.say(); //"I'm 1.80m tall and I'm in Senior 3"

The prototype method is to write the attributes/methods of the object on the object pointed to by its prototype attribute. (Every function or object has a prototype attribute, which exists in the form of an object).

Every time new actually has the following operations:

1) Create an empty object
2) Change the __proto__## of this empty object #Pointing to the constructor prototype3) Assign this empty object to
this4) Execute the code in the constructor

The __proto__ attributes of the new object coming out of new will point to person.prototype, and then the function content on person.prototype can be executed.

This is a bit like the event proxy/delegate often mentioned in JS. The event is not directly bound to the DOM element, but to its parent element. When adding sibling elements to the DOM element, the sibling elements can trigger the same event because of bubbling.

6. Mixed mode

Mixed mode can be understood as a prototype mode constructor. For example:

function person(name, height) {
        this.name = name;
        this.height = height;
    };
    person.prototype.age = 18;
    person.prototype.grade = "Senior 3";
    person.prototype.say = function() {
        console.log('Hello, my name is ' + this.name + '. I\'m ' + this.age + ' years old, ' + this.height + ' tall and I\'m in '+ this.grade + '.');
    }
    var xiaoMing = new person('Xiaoming', '1.80m');
    xiaoMing.say();
    //"Hello, my name is Xiaoming. I'm 18 years old, 1.80m tall and I'm in Senior 3."
    var xiaoHong = new person('Xiaohong', '1.65m')
    xiaoHong.say();
    //"Hello, my name is Xiaohong. I'm 18 years old, 1.65m tall and I'm in Senior 3."

Comparing mixed mode and prototype mode, we can find that the mixed mode function body is not empty , and the content in the function body is the construction method mentioned earlier.

This method is more commonly used in actual development.

Related recommendations:

Summary of several methods of declaring objects under JavaScript_javascript skills

Declaring global variables based on JavaScript Detailed explanation of the three methods_Basic knowledge

The above is the detailed content of How many ways are there to declare javascript objects? Six ways to declare javascript objects. For more information, please follow other related articles on the PHP Chinese website!