当前位置:首页 > 日记 > 正文

js es6系列教程 - 基于new.target属性与es5改造es6的类语法

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,报错

以上这篇js es6系列教程 - 基于new.target属性与es5改造es6的类语法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

PS合成非常高端的三维教堂PARTY海

PS合成非常高端的三维教堂PARTY海

教堂,海报,电脑软件,PS,PARTY,这篇教程教的PS图片合成学习者们使用PS合成高大上教堂PARTY海报,教程制作出来的海报非常漂亮,非常高端,乍一看很多人会以为是使用三维软件制作的,其实并不是,这都是通过PS找素材和合成的,推荐一下,喜欢的就给我好评啦…

ionic+AngularJs实现获取验证码倒

ionic+AngularJs实现获取验证码倒

验证码,倒计时,按钮,电脑软件,ionic,按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取。主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中。设置一个$timeout,60秒…

详解react如何在组件中获取路由参

详解react如何在组件中获取路由参

路由,参数,组件,详解,如何在,路由参数假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢?这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置。import List from './compo…

Word2013如何设置打印方向为横向Wo

Word2013如何设置打印方向为横向Wo

横向,方法,设置,如何设置,电脑软件,  要使用Word打印文件,打印的一般是纵向,但有时候需要横向的打印方式,这需要怎么才做呢?下面小编来告诉你怎么将Word2013设置打印方向为横向吧。希望对你有帮助!Word2013设置打印方向为横向的方法打开需要…

PPT2007幻灯片如何转换成网页进行

PPT2007幻灯片如何转换成网页进行

浏览,网页,幻灯片,转换成,电脑软件,  在播放幻灯片的时候都希望将其保存为演示文稿的形式进行播放,在ppt2007 中制作的幻灯片可以转换成网页进行网页式的浏览。以下是小编为您带来的关于PPT2007幻灯片转换成网页进行浏览,希望对您有所帮助…

关于JavaScript的单双引号嵌套问题

关于JavaScript的单双引号嵌套问题

嵌套,双引号,电脑软件,JavaScript,单引号和双引号之间可以相互嵌套。1、单引号内只能嵌套双引号。2、双引号内只能嵌套单引号。3、如果想在双引号内,再嵌套双引号,里面的双引号,一定要进行转义(\”)。4、JS中的转义字符是反斜杠(\).常用的转义…

详解Node中导入模块require和impor

详解Node中导入模块require和impor

模块,详解,区别,电脑软件,require,ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。不把require和impo…

一分钟制作水彩 | 水墨头像ps实例

一分钟制作水彩 | 水墨头像ps实例

水墨,实例教程,头像,电脑软件,ps,一分钟制作水彩(水墨)头像素材:水彩材质或水墨材质、头像技巧:通道选区、蒙版教程结束,以上就是一分钟制作水彩(水墨)头像ps实例教程的全部内容,希望大家喜欢!相关教程推荐:Photoshop制作精美的水彩狐狸头像PS水…

AI怎么绘制一款镂空立体感LOGO?

AI怎么绘制一款镂空立体感LOGO?

绘制,立体感,电脑软件,AI,LOGO,今天我们来看看使用AI绘制立体感LO,教程难度中等。主要介绍的是使用AI来刻画立体感和质感的方法。造型方面是比较简单的图形。学习之后相信对于您的标志设计会有非常大的帮助,我们先来看看最终的效果图吧:软件名…

ai cc2018资源导出功能有哪些变化?

ai cc2018资源导出功能有哪些变化?

功能,使用方法,有哪些,电脑软件,ai,ai cc2018中的导出功能该怎么使用呢?下面我们就来看看ai cc2018丰富的资源导出功能的基础知识,请看下文详细介绍。软件名称:Adobe Illustrator CC(AI软件) 2018特别破解版 v22.0.0 简体中文安装版软件大小:79…

PS怎么使用切变滤镜调整图形?

PS怎么使用切变滤镜调整图形?

调整,图形,滤镜,切变,电脑软件,和大家分享一下photoshop中切变滤镜使用方法。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、我们今天就简单说一下,首先要打开一张图片。“文件‘-”…

ps怎么给自拍照P漂亮的玫瑰花纹身?

ps怎么给自拍照P漂亮的玫瑰花纹身?

自拍照,漂亮,电脑软件,ps,ps教程 给你的照片加上漂亮的纹身图案1、打开需要加纹身的照片2、因为照片比较灰所以先用曲线调整一下3、把纹身图案素材拖进来。并把它的图层模式改为 正片叠底4、通过Ctrl+T变形,再结合,控制变形来改变图案的形状…