JavaScript进阶(二十九): 走近 es6 之 new.target
文章目录
- 一、前言
- 二、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的类方法中,在调用时候,使用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 : true
21 } );
22
23 return Person;
24 })();
25
26 console.log( new Person( 'ghostwu' ).sayName() );
27 console.log( Person( 'ghostwu' ) ); //没有使用new,报错
三、拓展阅读
- 《JavaScript进阶(二十六):ES各版本特性详解》
相关文章:
JavaScript进阶(二十九): 走近 es6 之 new.target
文章目录 一、前言二、new.target 重写三、拓展阅读 一、前言 源码阅读过程中,发现以下语句 new.target.prototype鉴于该语法为es6所有,项目在编译过程中,控制台报Unexpected token: punc(.)错误。按照常规处理,应用babel-loade…...
JVM虚拟机:堆结构的逻辑分区
堆内存的逻辑分区 堆内存的逻辑分区如下所示: 堆内存中分为新生代和老年代,二者空间大小1:3。在新生代里面分为两类区域(eden、survivor),三个区域(eden、survivor、survivor),三个区大小比例为8:1:1。 对象存放的位置 栈 当我们new一个对象的时候,首先会将对象…...
RabbitMQ学习02
Hello World(Java) 1.导入依赖 <!--指定 jdk 编译版本--><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration&g…...
android中的Package安装、卸载、更新替换流程
android系统在安装,删除,替换,清除数据等与应用相关的动作时,会发出对应的Broadcast,上层的应用通过注册相应的广播事件来做相应的处理。 官方文档中给出了详尽的罗列: ACTION_PACKAGE_ADDED 一个新应用包已…...
思维训练第三课 反意疑问句
系列文章目录 文章目录 系列文章目录前言一、什么是反意疑问句二、反意疑问句的回答💚主系表/主谓宾(肯定),否定提问1、一般现在时2、一般过去时3、一般将来时4、现在完成时 💛 主谓宾1、一般现在2、一般过去3、一般将…...
nvm安装步骤
注意事项 不要安装任何版本的node.js,有的话卸载干净!注意:要卸载干净了! 安装步骤: nvm下载 点击exe文件安装 安装目录选择:D:\NVM 下一步创建nodejs文件放在D:\NVM 下,然后一直next到最后 …...
关于比较级(内含名词比较级)
在比较级中,修饰形容词一般使用more 或者-er的变体,但是怎么修饰名词呢? 即,如果我们想表达:你能不能表现得更马屁精一点?这种针对一个具体名词的程度升级怎么表达呢? 使用be more of 名词的…...
【算法|动态规划 | 线性dp | 最长上升子序列模型No.1】AcWing1017.怪盗基德的滑翔翼 AcWing1014.登山
个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【AcWing算法提高学习专栏】 🍔本专栏旨在提高自己算法能力的同时,记录一下自己的学习过程,希望对大家…...
2023年道路运输企业主要负责人证模拟考试题库及道路运输企业主要负责人理论考试试题
题库来源:安全生产模拟考试一点通公众号小程序 2023年道路运输企业主要负责人证模拟考试题库及道路运输企业主要负责人理论考试试题是由安全生产模拟考试一点通提供,道路运输企业主要负责人证模拟考试题库是根据道路运输企业主要负责人最新版教材&#…...
Linux学习第26天:异步通知驱动开发: 主动
Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 在正式开启今天的学习前,讲一讲为什么标题中加入了【主动】俩字。之前学习的阻塞和非阻塞IO,都是在被动的接受应用程序的操作。而今天的学…...
SpringBoot的核心配置:YAML概述、基础语法;JSR303数据校验;多环境切换
SpringBoot核心配置 SpringBoot配置文件分类 SpringBoot是基于约定的,所以很多配置都有默认值,但如果想使用自己的配置替换默认配置的话,就可以使用 application.properties或者application.yml(application.yaml)进…...
把Qt6.2.4内置的标签打印了一遍
2023年10月31日,周二晚上 #include <QGridLayout> #include <QPushButton> #include <QLabel> #include <QApplication> #include <QStyle>int main(int argc, char *argv[]) {QApplication a(argc, argv);QWidget widget;widget.set…...
element-ui 表单校验・大全
目录 1、对全部表单项的校验2、校验指定字段3、自定义函数校验表单4、一行内多个输入框的校验 element-ui 官网 element-ui 表单校验的规则如下: <属性名>: [{ required: true,// 是否必填(若有label则在其左上角显示红点,否则不显示必…...
搭建高性能分布式存储-minio
文章目录 搭建高性能分布式存储-minioDocker搭建minio(单机部署纠删码模式)⭐创建minio的bucket(桶)⭐SpringBootminio项目实战 ⭐1:导入minio的maven依赖2:编写MinioProperties.class3:applica…...
leetCode 137. 只出现一次的数字 II(拓展篇) + 模5加法器 + 真值表(数字电路)
leetCode 137. 只出现一次的数字 II 题解可看我的往期文章 leetCode 137. 只出现一次的数字 II 位运算 模3加法器 真值表(数字电路) 有限状态机-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/134138112?spm1001.2014.3001.5501…...
docker导致root空间满进入不了系统解决方案
由于docker建立镜像会产生很多缓存文件,最终导致root目录满,进入不了系统 df -h docker默认路径是在/var/lib/docker下 可以通过命令查看docker占用空间 docker system df 如果占用空间太大 可用以下命令清理 $ docker image prune -h Flag shorth…...
uni-app遮罩遮住小程序tabbar
uni-app遮罩遮住小程序tabbar 1、用uni-app自带的方法显示隐藏 //通过弹窗显隐控制导航栏的显示和隐藏 const popupChange e >{if(e.show){//隐藏tabbaruni.hideTabBar()}else{//显示tabbaruni.showTabBar()}state.searchIcon e.show } //通过弹窗显隐控制导航栏的显示和…...
Flink on yarn 加载失败plugins失效问题解决
Flink on yarn 加载失败plugins失效问题解决 flink版本:1.13.6 1. 问题 flink 任务运行在yarn集群,plugins加载失效,导致通过扩展资源获取任务参数失效 2. 问题定位 yarn容器的jar包及插件信息,jar包是正常上传 源码定位 加载plugins入口,TaskMana…...
显卡服务器的特点和优势在哪里
随着科技的发展以及人们对于计算机性能的需求提高,显卡服务器是主要使用图形处理器进行计算和运算,拥有更加强大的计算能力,今天小编就来给大家讲一讲显卡服务器的特点和优势是什么! 1.高可靠性:显卡服务器采用高品质的…...
c++设计模式二:原型模式
使用场景:当需要构建多个相同的类对象时,而且该类对象结构较为复杂,如果每个都重新组织构建会很麻烦。 其实,就是写一个拷贝构造函数,或者写一个拷贝每个成员变量的clone()方法。 举例说明:比如一个相亲网站…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
什么是VR全景技术
VR全景技术,全称为虚拟现实全景技术,是通过计算机图像模拟生成三维空间中的虚拟世界,使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验,结合图文、3D、音视频等多媒体元素…...
SpringAI实战:ChatModel智能对话全解
一、引言:Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力,Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件,通过标准化接口简化了与大语言模型(LLM࿰…...
Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程
鸿蒙电脑版操作系统来了,很多小伙伴想体验鸿蒙电脑版操作系统,可惜,鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机,来体验大家心心念念的鸿蒙系统啦!注意:虚拟…...
