视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript基于new.target属性与es5改造es6的类语法
2020-11-27 20:13:42 责编:小OO
文档

下面小编就为大家带来一篇js es6系列教程 - 基于new.target属性与es5改造es6的类语法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性

function Person( uName ){
 if ( this instanceof Person ) {
 this.userName = uName;
 }else {
 return new Person( uName );
 }
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 console.log( Person( 'ghostwu' ).showUserName() );
 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

function Person( uName ){
 if( new.target !== undefined ){
 this.userName = uName;
 }else {
 throw new Error( '必须用new实例化' );
 }
 }
 // Person( 'ghostwu' ); //报错
 console.log( new Person( 'ghostwu' ).userName ); //ghostwu

使用new之后, new.target就是Person这个构造函数,那么上例也可以用下面这种写法:

function Person( uName ){
 if ( new.target === Person ) {
 this.userName = uName;
 }else {
 throw new Error( '必须用new实例化' );
 }
 }
 
 // Person( 'ghostwu' ); //报错
 console.log( new Person( 'ghostwu' ).userName ); //ghostwu
class Person{
 constructor( uName ){
 if ( new.target === Person ) {
 this.userName = uName;
 }else {
 throw new Error( '必须要用new关键字' );
 }
 } 
 }

 // Person( 'ghostwu' ); //报错
 console.log( new Person( 'ghostwu' ).userName ); //ghostwu

上例,在使用new的时候, new.target等于Person

掌握new.target之后,接下来,我们用es5语法改写上文中es6的类语法

let Person = ( function(){
 'use strict';
 const Person = function( uName ){
 if ( new.target !== undefined ){
 this.userName = uName;
 }else {
 throw new Error( '必须使用new关键字' );
 }
 }

 Object.defineProperty( Person.prototype, 'sayName', {
 value : function(){
 if ( typeof new.target !== 'undefined' ) {
 throw new Error( '类里面的方法不能使用new关键字' );
 }
 return this.userName;
 },
 enumerable : false,
 writable : true,
 configurable : true
 } );

 return Person;
 })();

 console.log( new Person( 'ghostwu' ).sayName() );
 console.log( Person( 'ghostwu' ) ); //没有使用new,报错

下载本文
显示全文
专题