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:

  1. 如果函数使用了new,那么new.target就是构造函数;

  2. 如果函数没有使用new,那么new.target就是undefined

  3. 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 ); //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各版本特性详解》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/125556.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【开题报告】基于SpringBoot的农业电商服务系统的设计与实现

1.研究背景与意义 1.1研究背景 随着信息技术的快速发展和互联网的普及,农业电商在农村经济发展中扮演着越来越重要的角色。传统的农产品销售模式存在着信息不对称、中间环节多、效率低下等问题,而农业电商通过利用互联网平台,将农产品与消费…

食品行业小程序开发攻略

想要设计一个食品小程序商城,却担心自己没有任何设计经验?别担心,现在有了一些简单易用的小程序制作工具,零基础也能成为一个小程序商城设计师!接下来,我们将一步步教你如何使用这些工具快速上手。 首先&am…

mysql---数据用户管理

DDL:CTEATE DROP ALTER dml:对数据进行管理 update insert into delete truncate dpl:查询语句 select dcl:权限控制语句 grant revoke 创建用户 create user xiaobulocalhost identified by 123456;create user 这是创建用户的…

Gson解决数字默认转为double以及时间类型format问题

问题1: 日期类型格式化问题 只需要.setDateFormat("yyyy-MM-dd HH:mm:ss")即可 Gson gson new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create(); 问题2: String json"{\"code\":2,\"sds\&quo…

关于线性模型的底层逻辑解读 (机器学习 细读01)

一 多元线性回归 线性回归是机器学习中 有监督机器学习 下的一种算法。 回归问题主要关注的是因变量(需要预测的值,可以是一个也可以是多个)和一个或多个数值型的自变量(预测变量)之间的关系。 需要预测的值:即目标变量,target,y&#xff0c…

【NI-DAQmx入门】计数器

1.计数器的作用 NI产品的计数器一般来说兼容TTL信号,定义如下:0-0.8V为逻辑低电平,2~5V为高电平,0.8-2V为高阻态,最大上升下降时间为50ns。 计数器可以感测上升沿(从逻辑低到逻辑高的转变)和下降…

无公网IP,如何使用公网SSH远程访问家中的树莓派?

文章目录 前言如何通过 SSH 连接到树莓派步骤1. 在 Raspberry Pi 上启用 SSH步骤2. 查找树莓派的 IP 地址步骤3. SSH 到你的树莓派步骤 4. 在任何地点访问家中的树莓派4.1 安装 Cpolar内网穿透4.2 cpolar进行token认证4.3 配置cpolar服务开机自启动4.4 查看映射到公网的隧道地址…

为什么写作

1记录生活,表达自己的想法和情感,提高沟通能力。 2年轻的时候就有写作的意愿,一直未动笔。 3想突破自己看看自己能写到什么程度。锻炼自己更好组织思路,提高逻辑思维能力。 4给自己的生活增添一些爱好,更好地理解和…

RISC-V IDE MRS无感远程协助模块详解

RISC-V IDE MRS无感远程协助模块详解 一、说明 1.1 概述 针对RISC-V/ARM等内核MCU的嵌入式集成开发环境MRS(MounRiver Studio)从V1.90版本开始内置无感远程协助模块(Sensorless Remote Assistant Module,以下简称SRA模块)。SRA模块是一款支…

Mysql binlog日志功能使用,简单易懂

一、简单了解binlog MySQL的二进制日志binlog可以说是MySQL最重要的日志,它记录了所有的DDL和DML语句(除了数据查询语句select)。因此binlog日志文件我们用cat等查看文件的命令是打不开的,但是mysql提供了专门看binlog文件的命令…

如何创建 Spring Boot 项目

如果有pom.xml有插件异常,可以先删除。 maven配置要配置好 然后yaml,再启动就行 server:port: 9991 spring:application:name: demo3参考 如何创建 Spring Boot 项目_创建springboot项目_良月初十♧的博客-CSDN博客

什么情况下你会使用AI工具(chatgpt、bard)?

在当今数字化和智能化的时代,AI工具已成为许多领域的常见工具。在本文中,我将探讨什么情况下会使用AI工具。前言 – 人工智能教程 ChatGPT是一款由OpenAI开发的大型语言模型,可以生成文本、翻译语言、编写不同类型的创意内容,并以…

VUE el-form组件不绑定model时进行校验

在el-form中如果要使用:rules规则校验时,需要在el-form标签绑定 :model 如何不绑定model而进行校验字段: 思路: 1.假设规则为非空判断 2.获取该字段,进行非空判断,记录该字段是否校验完成,添加到校验标识中 3.表单或数据提交时,判断校验标识 required 红星星 :error 提示项 …

Hadoop时代落幕,开源大数据将何去何从?

Hadoop时代落幕,谁是大数据的新宠儿? 1、 1、

DBA笔记(1)

目录 1、rpm yum 命令的使用,参数的含义 rpm命令: yum命令: 2、上传镜像至虚拟机搭建本地yum源 3、chown chomd 命令每一个参数的含义 chown命令: chmod命令: 4、fdisk partd 硬盘分区命令用法 fdisk命令&am…

C++ 写一个Data类的注意问题

Data类 声明和定义分离的一些问题 声明里面我们不带缺省参数&#xff0c;定义我们给缺省参数&#xff0c;如下面两段代码&#xff1a; Data.h#pragma once #include<iostream> using namespace std; class Data { public:Data(int year,int month,int day);private:in…

Ubuntu定时执行任务

cron一个Linux定时执行工具&#xff0c;可以定时执行一些任务。 crontab -l 如果显示“no crontab for xxx” 说明没有启动cron。 service cron start 这样就启动cron了。 服务相关命令&#xff1a; service cron stop service cron restart service cron reload 查看当…

【错误解决方案】ModuleNotFoundError: No module named ‘xgboost‘

1. 错误提示 在尝试导入名为xgboost的模块时出现了ModuleNotFoundError。 错误提示&#xff1a;ModuleNotFoundError: No module named xgboost 这个错误通常意味着Python环境中没有安装你试图导入的模块。 2. 解决方案 安装xgboost模块即可解决上述问题。 可以通过Python…

Web3公链之Cosmos生态的项目Celestia

文章目录 Web3公链之Cosmos生态的项目&#xff1a;模块化区块链Celestia什么是CelestiaCelestia网络架构数据可用性问题有哪些可用的解决方案&#xff1f; 发展历史运行节点参考 Web3公链之Cosmos生态的项目&#xff1a;模块化区块链Celestia 什么是Celestia 官网&#xff1a…

项目部署之OpenResty

项目部署之OpenResty 1. OpenResty介绍 OpenResty 是一个基于Nginx的高性能Web平台&#xff0c;用于方便地搭建能够处理超高并发、扩展性极高的动态Web应用、Web服务和动态网关。具备下列特点&#xff1a; 具备Nginx的完整功能基于Lua语言进行扩展&#xff0c;集成了大量精良…