JavaScript Object Oriented Series - Constructor

Constructor

In general, javascript uses constructors and prototype objects for object-oriented programming. Their performance is similar to and different from classes in other object-oriented programming languages. This article will introduce how to use constructors in detail.

The constructor is the function that is called when an object is created with new . The only difference from ordinary is that the name of the constructor should be capitalized.

function Person(){
    this.age = 30;
}
var person1 = new Person ();
console.log(person1.age);//30

 Constructors can accept parameters as needed

function Person(age){
    this.age = age;
}
var person1 = new Person (30 );
console.log(person1.age);//30

If there are no parameters, parentheses can be omitted

function Person(){
    this.age = 30;
}
// equivalent to var person1 = new Person() 
var person1 = new Person;
console.log(person1.age);//30

If you forget to use the new operator, this will represent the global object window

function Person(){
    this.age = 30;
}
var person1 = Person();
//Uncaught TypeError: Cannot read property 'age' of undefined
console.log(person1.age);

instanceof

　　The instanceof operator can be used to identify the type of an object

function Person(){
    //
}
var person1 = new Person;
console.log(person1 instanceof Person);//true

constructor

　　Every object automatically has a constructor property constructor when it is created, which contains a reference to its constructor. And this constructor property actually inherits from the prototype object, and the constructor is also the only own property of the prototype object

function Person(){
    //
}
var person1 = new Person;
console.log(person1.constructor === Person);//true    
console.log(person1.__proto__.constructor === Person);//true

The following are the internal properties of person1, and found that the constructor is an inherited property

 

 

Although such a relationship exists between an object instance and its constructor, it is recommended to use instanceof to check the object type. This is because constructor properties can be overridden and not necessarily completely accurate

function Person(){
    //
}
var person1 = new Person;
Person.prototype.constructor = 123;
console.log(person1.constructor);//123
console.log(person1.__proto__.constructor);//123

return value

　　The return statement in the function is used to return the return value after the function call, and the return value of the new constructor is a bit special

　　If the constructor uses a return statement without specifying a return value, or returns a primitive value, then the return value is ignored and the new object is used as the result of the call

function fn(){
    this.a = 2;
    return;
}
var test = new fn ();
console.log(test);//{a:2}

If the constructor explicitly returns an object using the return statement, then the value of the calling expression is that object

var obj = {a:1};
function fn(){
    this.a = 2;
    return obj;
}
var test = new fn ();
console.log(test);//{a:1}

Therefore, the solution to the missing new constructor is to use instanceof inside the constructor to determine whether to use the new command. If it is found not to be used, then use the return statement to return an instance object directly.

function Person(){
    if(!(this instanceof Person)){
        return new Person();
    }
    this.age = 30;
}
var person1 = Person ();
console.log(person1.age);//30
var person2 = new Person();
console.log(person2.age);//30

The advantage of using constructors is that all objects created with the same constructor have the same properties and methods 

function Person(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name);
    }
}
var person1 = new Person ('bai' );
var person2 = new Person ('hu' );
person1.sayName();//'bai'

Constructors allow objects to be configured with the same properties, but constructors do not eliminate code redundancy. The main problem with using constructors is that each method is recreated on each instance. In the above example, each object has its own sayName() method. This means that if there are 100 object instances, there are 100 functions that do the same thing, just using different data

function Person(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name);
    }
}
var person1 = new Person ('bai' );
var person2 = new Person ('hu' );
console.log(person1.sayName === person2.sayName);//false

The problem can be solved by casting the function definition outside the constructor

function Person(name){
    this.name = name;
    this.sayName = sayName;
}
function sayName(){
    console.log(this.name);
}
var person1 = new Person ('bai' );
var person2 = new Person ('hu' );
console.log(person1.sayName === person2.sayName);//true

However, functions defined in the global scope can actually only be called by an object, making the global scope a bit of a misnomer. Moreover, if the object needs to define many methods, it is necessary to define many global functions, which seriously pollutes the global space. This custom reference type has no encapsulation at all.