Home > Web Front-end > JS Tutorial > body text

How does JavaScript create objects? Methods for instantiating objects

青灯夜游
Release: 2018-11-20 13:41:18
Original
5573 people have browsed it

The content of this article is to introduce how to create objects in JavaScript, so that everyone can understand the three methods of creating and instantiating objects with js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In terms of syntax, JavaScript is a flexible object-oriented language. Before we cover the different ways JavaScript creates and instantiates objects, we need to note that JavaScript is a classless language and functions are used in a way so that they simulate a class. [Recommended related video tutorials: JavaScript Tutorial]

Use functions as classes:

This is One of the simplest ways to create and instantiate objects in JavaScript. We define a classic JavaScript function and use the new keyword to create an object of the function; then use the this keyword to create the properties and methods of the function.

<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>
Copy after login

Running results:

How does JavaScript create objects? Methods for instantiating objects

Description: The

class has two main components: Specific parameters and few member functions. In this method, we declare a class-like function that takes two parameters, name and age (this keyword is used to distinguish the name and age of the class from the name and age of the provided parameters); And a printInfo method for printing the values ​​of these parameters. We then simply create a copyClass object obj, initialize it, and call its methods.

Use object literals:

literal is a smaller and simpler way of defining objects.

Below we use object text to create and 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 = "小明"; 
obj.age = 19; 
  
// 使用对象的方法
obj.printInfo(); 
</script>
Copy after login

Running results:

How does JavaScript create objects? Methods for instantiating objects

Explanation:

The difference between this method and the previous method The working principle is actually the same, but instead of binding the parameters (name and age) and methods (printInfo) inside the function, they are bound into the object itself, which can be initialized and the methods simply used.

Using a singleton of a function:

The third way is a combination of the other two ways we have already seen. We can use functions to define individual objects.

<script> 
// 创建单个对象
var obj = new function() { 
        this.name = ""; 
        this.age = ""; 
        this.printInfo = function() { 
            console.log(this.name); 
            console.log(this.age); 
   }; 
} 
  
// 初始化对象
obj.name = "小明"; 
obj.age = 20; 
  
// 对象的调用方法
obj.printInfo(); 
</script>
Copy after login

Running results:

How does JavaScript create objects? Methods for instantiating objects

Description:

This is a combination of the first two methods, we will Methods and parameters are bound in the function, but separate functions are not declared for them (like copyClass in method 1). Instead, we simply declare an object using a function construct.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How does JavaScript create objects? Methods for instantiating objects. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template