Artikelverzeichnis
I. Einleitung
Während des Lesevorgangs des Quellcodes habe ich die folgende Aussage gefunden
new.target.prototype
Da diese Syntax Eigentum von es6 ist, hat die Konsole während des Kompilierungsprozesses des Projekts einen Unexpected token: punc(.)-Fehler gemeldet. Die übliche Anwendung von babel-loader kann solche Probleme lösen. bei.babelrc
{
"presets": [
["es2015"]
]
}
Nach dem Üben stellte sich heraus, dass die build-Stufe immer noch Fehler meldete.
Also wird die zweite Lösung übernommen, bei der die es5-Syntax zum Umschreiben verwendet wirdes6.
2. Neues Ziel umschreiben
es5Wenn der Konstruktor von nicht vor new aufgerufen wird und this auf window zeigt, gelten die Eigenschaften des Objekts erhält den Wert nicht. Daher mussten wir zuvor prüfen, ob das Schlüsselwort this im Konstruktor verwendet wurde, um sicherzustellen, dass die normale Funktionsaufrufmethode das Objekt in das Attribut kopieren kann. new
1 function Person( uName ){
2 if ( this instanceof Person ) {
3 this.userName = uName;
4 }else {
5 return new Person( uName );
6 }
7 }
8 Person.prototype.showUserName = function(){
9 return this.userName;
10 }
11 console.log( Person( 'ghostwu' ).showUserName() );
12 console.log( new Person( 'ghostwu' ).showUserName() );
Ines6 wird ein neues Attributnew beim Aufruf der Funktion verwendet wird =3>:new.target
-
Wenn die Funktion
newverwendet, dann istnew.targetder Konstruktor; -
Keine Verwendung der Funktion
new，Nananew.targetist esundefined； -
es6Verwenden Sie in der Klassenmethode von beim Aufrufnewundnew.target, um auf die Klasse selbst zu verweisen. Wennnewnicht verwendet wird, dannundefined;
1 function Person( uName ){
2 if( new.target !== undefined ){
3 this.userName = uName;
4 }else {
5 throw new Error( '必须用new实例化' );
6 }
7 }
8 // Person( 'ghostwu' ); //报错
9 console.log( new Person( 'ghostwu' ).userName ); //ghostwu
Nachdem new verwendet, ist new.target der Konstruktor von Person, sodass das obige Beispiel auch folgendermaßen geschrieben werden kann:
1 function Person( uName ){
2 if ( new.target === Person ) {
3 this.userName = uName;
4 }else {
5 throw new Error( '必须用new实例化' );
6 }
7 }
8
9 // Person( 'ghostwu' ); //报错
10 console.log( new Person( 'ghostwu' ).userName ); //ghostwu
1 class Person{
2 constructor( uName ){
3 if ( new.target === Person ) {
4 this.userName = uName;
5 }else {
6 throw new Error( '必须要用new关键字' );
7 }
8 }
9 }
10
11 // Person( 'ghostwu' ); //报错
12 console.log( new Person( 'ghostwu' ).userName ); //ghostwu
Im obigen Beispiel ist bei Verwendung von new new.target gleich Person.
Nachdem wir es beherrscht habennew.target, verwenden wir als nächstes die es5-Grammatik, um die obige es6-Klassengrammatik neu zu schreiben.
1 let Person = ( function(){
2 'use strict';
3 const Person = function( uName ){
4 if ( new.target !== undefined ){
5 this.userName = uName;
6 }else {
7 throw new Error( '必须使用new关键字' );
8 }
9 }
10
11 Object.defineProperty( Person.prototype, 'sayName', {
12 value : function(){
13 if ( typeof new.target !== 'undefined' ) {
14 throw new Error( '类里面的方法不能使用new关键字' );
15 }
16 return this.userName;
17 },
18 enumerable : false,
19 writable : true,
20 configurable : true
21 } );
22
23 return Person;
24 })();
25
26 console.log( new Person( 'ghostwu' ).sayName() );
27 console.log( Person( 'ghostwu' ) ); //没有使用new,报错