Because of the nature of JavaScript, a single constructor can implement the function of a class, so sometimes we can define a class, usually write a constructor:

function Cup(cupCover, cupBody, cupBottom) {
    this.cupCover = cupCover
    this.cupBody = cupBody
    this.cupBottom = cupBottom
}
Copy the code

This definition is flexible and simple, but sometimes there is no warning if the instantiation goes wrong.

For example, our instantiation looks like this:

let cup = Cup('iron'.'plastic'.'rubber')
Copy the code

When we don’t add new, the compiler doesn’t tell us (weak typing), and since Cup is a function itself, it works fine when used.

But when we say that cup is definitely not a cup class, it is obvious that when we execute cup as a function, the value of cup depends on the return of the function. There’s no return, so it’s undefined.

So what happens when we execute this Cup() function? The answer is that the properties of Cup are bound to global variables. For browsers, it’s Windows

cup.cupCover // undefined
window.cupCover // "iron"
Copy the code

So how can we avoid this?

We can modify the Cup constructor a bit:

function Cup(cupCover, cupBody, cupBottom) {
    if(this instanceof Cup) {
        this.cupCover = cupCover
        this.cupBody = cupBody
        this.cupBottom = cupBottom
    }
    else {
        return new Cup()
    }
}
Copy the code

So when we accidentally execute let cup = cup (‘iron’, ‘plastic’, ‘rubber’) again, we return an instance, since this is not a derived class of cup.

let cup = Cup('iron'.'plastic'.'rubber')
cup.cupCover // "iron"
Copy the code

The constructor of this form is the constructor of today’s security pattern.