How to use JavaScript constructor?

The constructor is to initialize an instance object, and the prototype attribute of the object is to inherit an instance object. This article will share with you a detailed explanation of the JavaScript constructor. Friends who are interested in knowledge about the JS constructor should learn together.

The constructor is to initialize an instance object, and the prototype attribute of the object is to inherit an instance object.

Notes on the constructor:

1. The first letter of the default function is capitalized

2. The constructor does not return anything. The new operator automatically creates the given types and returns them. When the constructor is called, new automatically creates the this object, and the type is the constructor type.

3. You can also call return explicitly in the constructor. If the returned value is an object, it will be returned instead of the newly created object instance. If the returned value is a primitive type, it is ignored and a newly created instance is returned.

 function Person( name){
        this.name =name;
      }
       var p1=new Person('John');

is equivalent to:

   function person(name ){
        Object obj =new Object();
        obj.name =name;
         return obj;
      }
       var p1= person("John");

4. Because the constructor is also a function, it can be called directly, but Its return value is undefine. At this time, the this object in the constructor is equal to the global this object. this.name actually creates a global variable name. In strict mode, an error occurs when you call the Person constructor via new.

5. You can also use the Object.defineProperty() method in the constructor to help us initialize:

  function Person( name){
        Object.defineProperty(this, "name"{
          get :function(){
             return name;
          },
           set:function (newName){
            name =newName;
          },
          enumerable :true, //可枚举，默认为false
           configurable:true //可配置
         });
      }  
       var p1=new Person('John');

6. Use the prototype object in the constructor

 //比直接在构造函数中写的效率要高的多
       Person.prototype.sayName= function(){
         console.log(this.name);
      };

But if there are many methods, most people will adopt a simpler method: directly use an object literal form Replace the prototype object as follows:

 Person.prototype ={
        sayName :function(){
           console.log(this.name);
        },
        toString :function(){
           return "[Person "+ this.name+"]" ;
        }
      };

This method is very popular because you don’t have to type Person.prototype multiple times, but there is a side effect you must pay attention to:

The prototype object is rewritten in literal form and the properties of the constructor are changed, so it points to Object instead of Person. This is because the prototype object has a constructor property, which other object instances do not have. When a function is created, its prototype property is also created, and the constructor property of the prototype object points to the function. When the prototype object is rewritten using object literal form, its constructor property will be set to the generic object Object. In order to avoid this, you need to manually reset the constructor when rewriting the prototype object, as follows:

 Person.prototype ={
        constructor :Person,
        
        sayName :function(){
           console.log(this.name);
        },        
        toString :function(){
           return "[Person "+ this.name+"]" ;
        }
      };

Test again:

p1.constructor===Person

true

p1.constructor= ==Object

false

p1 instanceof Person

true

The above is the detailed content of How to use JavaScript constructor?. For more information, please follow other related articles on the PHP Chinese website!