How to implement the function of new.target in JavaScript by yourself

How to implement the function of new.target in JavaScript by yourself

I still remember Douglas Crockford on JavaScript language essence mentioned:Constructor functions, by convention, they are stored in variables named in uppercase format. If the constructor function is called without adding new in front of it, bad things may happen. There is neither compile-time warning nor runtime warning, so the capitalization convention is very important.
I was also in JavaScript before-in- depth understanding of this documentedOmitting the new keyword in the constructor call may also pollute the global scope

function Person(){
    
    
	this.personName = 'person';
}
let person = Person();
console.log('person.personName : '+person.personName);//Cannot read property 'personName' of undefined
console.log('window.personName : '+window.personName);//window.personName : person

I have also proposed stupid solutions to call the constructor without the new keyword:

function Person(){
    
    
	if(this === window){
    
    
        throw Error('You must use the new keyword.');
    }
	this.personName = 'person';
}
let person = Person();//You must use the new keyword.

Improved version:

function Person(){
    
    
	let context;
    (function(){
    
    
        context = this;
    }())
    if(this === context){
    
    
        throw Error('You must use the new keyword.');
    }
	this.personName = 'person';
}
let person = Person();//You must use the new keyword.

The change is somewhat similar to today's new.target:

function newTarget(){
    
    
    let context;
    (function(){
    
    
        context = this;
    }())
    return context === this ? undefined : this.constructor;
}

function Person(){
    
    
    console.log('newTarget : ' + newTarget.call(this));//newTarget : undefined
    console.log('new.target : ' + new.target);//new.target : undefined
}
Person();
//
function newTarget(){
    
    
    let context;
    (function(){
    
    
        context = this;
    }())
    return context === this ? undefined : this.constructor;
}

function Person(){
    
    
    console.log('newTarget : ' + newTarget.call(this));//newTarget : function Person(){xxx} 指向此函数的引用
    console.log('new.target : ' + new.target);//new.target : function Person(){xxx} 指向此函数的引用
}
new Person();

First post a picture, browser support:
from MDN
Insert picture description here
first, the new.target keyword must be used in the function, if this function is called as a constructor function, new.target points to this constructor function; if this function is a normal function , The value of new.target is undefined; the arrow function does not have new.target, but it can use the new.target of the nearest external function.

new.target can solve the problem of not adding new in front of the constructor function when calling the constructor function, but each constructor function must be judged, obviously it is not convenient to use the class, and this new + constructor function The combination is also not recommended, so I personally think that new.target is very tasteless (It's just my personal current opinion, if I find its usefulness in the future, I will update it)

Guess you like

Origin blog.csdn.net/qq_35508835/article/details/108180209