[js高手之路] es6系列教程 - new.target屬性與es5改造es6的類文法

標籤：複製   error   .com   寫法   instance   bsp   throw   use   div   

es5的建構函式前面如果不用new調用,this指向window,對象的屬性就得不到值了，所以以前我們都要在建構函式中通過判斷this是否使用了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() );

在es6中，為了識別函數調用時，是否使用了new關鍵字，引入了一個新的屬性new.target:

1，如果函數使用了new，那麼new.target就是建構函式

2，如果函數沒有用new，那麼new.target就是undefined

3，es6的類方法中，在調用時候，使用new，new.target指向類本身，沒有使用new就是undefined

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

使用new之後, new.target就是Person這個建構函式，那麼上例也可以用下面這種寫法:

 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

上例，在使用new的時候, new.target等於Person

掌握new.target之後，接下來，我們用es5文法改寫上文中es6的類文法

 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 : true21             } );22 23             return Person;24         })();25 26         console.log( new Person( ‘ghostwu‘ ).sayName() );27         console.log( Person( ‘ghostwu‘ ) ); //沒有使用new,報錯

 

[js高手之路] es6系列教程 - new.target屬性與es5改造es6的類文法