JavaScript constructor creates objects (summary sharing)

This article brings you relevant knowledge about javascript, which mainly introduces related issues about JavaScript constructor function to create objects. Constructor (Constructor) is also called constructor and type function. , the function is similar to the object template. A constructor can generate any number of instances. The instance objects have the same attributes and behavioral characteristics, but are not equal. Let’s take a look at them together. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end】

What is a constructor

JavaScript constructor (Constructor) is also called a constructor and a type function. Its function is similar to an object template. A constructor can generate any number of instances. The instance objects have the same attributes and behavioral characteristics, but are not equal.
Use constructors to create objects of different classes.

Creation of constructor

The constructor is an ordinary function. There is no difference between the creation method and ordinary functions. It is customary for constructors to capitalize the first letter

The difference between constructors and ordinary functions

The difference between constructors and ordinary functions is the calling method The difference

Ordinary functions are called directly
• The constructor needs to be called using the new keyword

This points to the problem

Three The pointing situation of this form.

• When called as a function, this is window

• When called as a method, this is whoever calls the method

• When called in the form of a constructor, this is the newly created object

The execution flow of the constructor

• Create a new object immediately

• Set the new object to this in the function. You can use this in the constructor to refer to the new object (that is, this points to Newly created object)

• Execute the code in the function line by line

• Return the newly created object as the return value

Objects created using the same constructor are called a class of objects, and a constructor is also called a class. We will call the object created through a constructor an instance of this class. As far as the above is concerned, Obj is a class, and obj is an instance of the class Obj.

Constructor instance

Create two classes, one Person class and one Dog class.

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script>
        //构造一个创建人的类
        function Person(name , age , gender){
            console.log(&#39;指向:&#39;,this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = function(){
                console.log(this.name)
            }
        }

        //构造一个创建狗的类
        function Dog(name , age ){
            console.log(&#39;指向:&#39;,this);
            this.name = name;
            this.age = age ;
            this.sayHello = function(){
                console.log(&#39;汪汪汪~~&#39;);
            }
        }

        //创建一个人的实例
        var per = new Person(&#39;苏凉&#39;,21,&#39;男&#39;);
        console.log(per);
        per.sayName();

        //创建一个狗的实例
        var dog = new Dog(&#39;旺财&#39;,5);
        console.log(dog);
        dog.sayHello();
    </script>
    

Running results:

The advantage of the constructor is that we can distinguish many different objects, that is, we can clearly know where the created object belongs. First, it is impossible to distinguish the type of objects between creating objects using ordinary objects and creating objects using factory mode. They all belong to one big class (Object).

instanceof keyword

Use instanceof to check whether an object is an instance of a class

Syntax:

Object instanceof constructor

If yes, return true, otherwise return false

  console.log(dog instanceof Dog); //true
  console.log(dog instanceof Person); //false
  console.log(dog instanceof Object); //true

All objects are descendants of Object, so any object and 0object will return true when instanceof is checked.

Performance optimization

Create a Person constructor

In the Person constructor, a sayName method is added for each object

Currently our The method is created inside the constructor, that is, a new sayName method will be created every time the constructor is executed.

That is, the sayName of all instances is unique.

This will occupy a lot of memory, and a new method will be created for each newly created object.

Solution: Extract the method of the newly created object separately, as shown below

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script>
		//将新创建对象的方法单独提取出来
        function sayName(){
            console.log(this.name)
        }

        //构造一个创建人的类
        function Person(name , age , gender){
            console.log(&#39;指向:&#39;,this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = sayName;
        }
        var per = new Person(&#39;苏凉&#39;,21,&#39;男&#39;);
        var per1 = new Person(&#39;小红&#39;,18,&#39;女&#39;);
        console.log(per);
        per.sayName();
        per1.sayName();
        console.log(per.sayName == per1.sayName); //true
    </script>
    

You can see the per The sayName method is the same as the sayName method of per1. This solves the problem of creating a new sayName method when creating different instances, which greatly reduces memory usage.

Knowledge expansion

(1.) Why do we need the constructor:

Because of the previous Both methods of creating objects can only create one object at a time.

(2.) What is a constructor:

Constructor: It abstracts some of the same properties and methods in our objects and encapsulates them into functions

(3.)利用构造函数创建对象及使用方法

构造函数的函数名从第一个单词开始，每个单词的首写字母都要大写。

/ /4.在构造函数里面我们的属性和方法前面都必须加this关键字

//声明构造函数语法格式：
function 构造函数名() {
this.属性 = 值;
this.方法 = function() {}
}
//调用构造函数语法格式：
new 构造函数名();

以下是构造函数语法格式的案例：

【相关推荐：javascript视频教程、web前端】

The above is the detailed content of JavaScript constructor creates objects (summary sharing). For more information, please follow other related articles on the PHP Chinese website!