外贸企业做网站,个人网站推荐免费,网页设计自我介绍模板代码,wordpress外链图床插件文章目录 一、前言二、new.target 重写三、拓展阅读 一、前言
源码阅读过程中#xff0c;发现以下语句
new.target.prototype鉴于该语法为es6所有#xff0c;项目在编译过程中#xff0c;控制台报Unexpected token: punc(.)错误。按照常规处理#xff0c;应用babel-loade… 文章目录 一、前言二、new.target 重写三、拓展阅读 一、前言
源码阅读过程中发现以下语句
new.target.prototype鉴于该语法为es6所有项目在编译过程中控制台报Unexpected token: punc(.)错误。按照常规处理应用babel-loader即可解决此类问题。在.babelrc的
{presets: [[es2015]]
}经过实践发现build阶段依旧报错。
故采用第二套解决方案使用es5语法重写es6。
二、new.target 重写
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: 如果函数使用了new那么new.target就是构造函数 如果函数没有使用new那么new.target就是undefined es6的类方法中在调用时候使用newnew.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 ); //ghostwu1 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 : true
21 } );
22
23 return Person;
24 })();
25
26 console.log( new Person( ghostwu ).sayName() );
27 console.log( Person( ghostwu ) ); //没有使用new,报错三、拓展阅读
《JavaScript进阶二十六ES各版本特性详解》
