Home  >  Article  >  Web Front-end  >  Creating objects in JavaScript (3 ways)

Creating objects in JavaScript (3 ways)

藏色散人
藏色散人Original
2019-04-04 10:08:472466browse

In terms of syntax, JavaScript is a flexible object-oriented language. In this article, we will introduce you to the different ways to instantiate objects in JavaScript.

It is important to note that JavaScript is a classless language, and functions are used in a certain way so that they simulate a class. (Recommended: "javascript tutorial")

Use functions as classes:

One of the simplest ways to instantiate objects in JavaScript. We define a classic JavaScript function and use the new keyword to create an object of the function. Function properties and methods are created using the this keyword.

<script> 
    function copyClass(name, age) { 
        this.name = name; 
        this.age = age; 
        this.printInfo = function() { 
            console.log(this.name); 
            console.log(this.age); 
        } 
    } 
  
// 创建copyClass对象并初始化参数。
var obj = new copyClass("Vineet", 20); 
  
//调用copyClass的方法。
obj.printInfo(); 
</script>

Output:

Vineet
20

Description: A class in OOP has two main components, some parameters and some member functions. In this method, we declare a class-like function with two parameters, name and age (this keyword is used to differentiate the name and age of the class into the name and age of the parameters being supplied.) and the printInfo method, Used to print the values ​​of these parameters. Then we simply create a copyClass object obj, initialize it and call its methods.

Using object literals:

Literals are a smaller and simpler way of defining objects. Below we use a literal to instantiate an object that is exactly the same as the previous object.

<script> 
    var obj = { 
        name : "", 
        age : "", 
        printInfo : function() { 
            console.log(this.name); 
            console.log(this.age); 
        } 
    } 
  
// 初始化参数。
obj.name = "Vineet"; 
obj.age = 19; 
  
// 使用对象的方法。
obj.printInfo(); 
</script>

Output:

Vineet
20

Description: This method works the same as the previous method, but instead of bundling the parameters (name and age) and method (printInfo) in the function, we is to bundle them in the object itself, initialize the object and simply use the methods.

Using a singleton of a function:

The third method is a combination of the other two methods. We can use a function to define a singleton object.

<script> 
    var obj = new function() { 
        this.name = ""; 
        this.age = ""; 
        this.printInfo = function() { 
            console.log(this.name); 
            console.log(this.age); 
        }; 
    } 
  
obj.name = "Vineet"; 
obj.age = 20; 
  
obj.printInfo(); 
</script>

Output:

Vineet
20

Description: This is a combination of the first two methods, we bundle the method and parameters in a function but do not declare a separate function for it ( Like copyClass in method 1), instead simply declare an object using a function structure.

The above is the detailed content of Creating objects in JavaScript (3 ways). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn