Detailed explanation of five common ways to create objects in Javascript

Five common ways to create objects in Javascript:

There are seven ways to create objects. Here are examples of the five common ways, among which There are two methods that are frequently used, please be sure to master them:

1. Directly create object method

The creation syntax is as follows:

var 对象变量名 = new Object();
对象变量名. property1 = value1;
…;
对象变量名. propertyN = valueN;
对象变量名. methodName1 = function([参数列表]){
    //函数体}
…;
对象变量名. methodNameN = function([参数列表]){
    //函数体}

Create an object first , define and set the values ​​of the properties and functions

Reference examples and calls are as follows:

var student =new Object();student.name="小李";student.age=21;student.dohomework=function(){
    console.log(this.name+"正在做作业");}
console.log(student.name);student.dohomework();

2. Object initializer method

The creation syntax is as follows:

var 对象变量名 = {
    property1 : value1,
    property2 : value2,
    …, 
    propertyN : valueN,
    methodName1 : function([parameter_list]){
        //函数体
    },
    …, 
    methodNameN : function([parameter_list]){
        //函数体
    }
}

Directly assign values ​​​​to the properties of the object and define function functions within the curly brackets

See the reference examples and calls below:

var teacher = {
    name:"Mr Li",
    age:21,
    teach:function(){
        console.log(this.name+"正在授课ing");
    }
}
teacher.teach();

Note : Different attribute values ​​are directly separated by commas, and there is usually no punctuation mark after the last value

3. Constructor method

The creation syntax is as follows:

function 构造函数([参数列表]){ 
    this.属性 = 属性值; 
    …    this.属性N = 属性值N;    this.函数1 = method1; 
    …    this.函数N = methodN; 
}function method1([参数列表]){
    //函数体}
…function methodN([参数列表]){
     //函数体}

or

function  构造函数([参数列表]){ 
    this.属性 = 属性值; 
    …    this.属性N = 属性值N;    this.函数1 = function([参数列表]){
        //函数体
    } ;
    …    this.函数N = function([参数列表]){
        //函数体
    } ;
}

Note: Some values ​​can be set to default values, and some values ​​can be given in the parameter list as needed and assigned directly
Summary:
1. Compared with the above two methods, using the constructor method to create objects can effectively save code;
2. Using the constructor method to create objects, this cannot be omitted, which is the difference between ordinary functions;
3 , use the constructor method to create objects, the method on the left is more preferable, and improves code reuse;

Reference examples and calls are shown below:

function Student(name){
    this.name=name;    this.age=21;    this.play=function(){
        console.log(this.name+"正在玩");
    }
}var student=new Student("仔仔");
student.play();

4.prototype prototype method

The creation syntax is as follows:

function 对象构造器( ){} 
对象构造器.prototype.属性名=属性值;
对象构造器.prototype.函数名 = function([参数列表]){
    //函数体}

After declaring a new function, the function (in JavaScript, the function is also an object) will have a prototype attribute, through which you can Add new properties and methods to objects.

Reference examples and calls are as follows:

function Student(){}
Student.prototype.name="仔仔";
Student.prototype.age=21;
Student.prototype.dohomework=function(){
    console.log(this.name+"正在做作业");
}var student=new Student();
student.dohomework();

5. Mixed constructor/prototype method

The creation syntax is as follows:

function 对象构造器([参数列表]){} 
对象构造器.prototype.函数名 = function([参数列表]){
    //函数体}

The constructor method is convenient for dynamically assigning values ​​​​to properties, but this method also defines the method in the constructor method body, making the code more complicated; while the prototype method is not convenient for dynamically assigning values ​​​​to properties, but the properties and methods defined in this way are Separation is achieved; so learn from each other's strengths and weaknesses - constructors define properties and prototypes define methods.

See reference examples and calls below:

function Student(name){
    this.name=name;    this.age=21;
}
Student.prototype.dohomework=function(){
    console.log(this.name+"正在做作业");
}var student=new Student("仔仔");
student.dohomework();

There are two other methods. Dynamic prototype method and factory mode are not common, so I won’t explain them here. Thank you for watching my work!

Related recommendations:

#4 ways to create objects in JavaScript

Illustration Seven ways to create objects in javascript

The above is the detailed content of Detailed explanation of five common ways to create objects in Javascript. For more information, please follow other related articles on the PHP Chinese website!