[js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法

时间:2022-08-29 10:39:13

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的类语法的更多相关文章

  1. [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)

    一.设置属性的值: {{data中的数据}} window.onload = function () { var c = new Vue({ el : '#box', data : { url : ' ...

  2. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  3. [js高手之路] vue系列教程 - 实现留言板todolist(3)

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...

  4. &lbrack;js高手之路&rsqb; vue系列教程 - vue的事件绑定与方法&lpar;2&rpar;

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...

  5. &lbrack;js高手之路&rsqb; vue系列教程 - vue的基本用法与常见指令&lpar;1&rpar;

    本系列课程选用vue的版本为1.0.21, 什么是vue? vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变, ...

  6. &lbrack;js高手之路&rsqb; vue系列教程 - 组件定义与使用上部&lpar;7&rpar;

    组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...

  7. &lbrack;js高手之路&rsqb; vue系列教程 - 绑定class与行间样式style&lpar;6&rpar;

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...

  8. &lbrack;js高手之路&rsqb;深入浅出webpack教程系列7-&lpar; babel-loader&comma;css-loader&comma;style-loader&rpar;的用法

    什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...

  9. &lbrack;js高手之路&rsqb;深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置&lpar;下&rpar;

    上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...

随机推荐

  1. HTTP 协议详解

    相关文章:HTTP 协议之压缩 当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Perl, AJAX 等等. 无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相 ...

  2. JS实时定位

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  3. 吉日嘎拉DotNet&period;BusinessV4&period;2中的一处bug,及我的修复和扩展

    bug所在位置:DotNet.Business\Utilities\BaseManager.GetDataTableByPage.cs的函数 public virtual DataTable GetD ...

  4. C&num; &period;NET更智能的数据库操作的封装

    前述: 对数据库操作的封装,相信网络上已经有一大堆,ORM框架,或者是.NET本身的EF,都很好的支持数据库操作.这篇文章是分享自己所思考的,对数据库操作的简单封装.我对于这篇文章,认为被浏览者所关注 ...

  5. IntelliJ IDEA 最新激活码

    C40PF37RR0-eyJsaWNlbnNlSWQiOiJDNDBQRjM3UlIwIiwibGljZW5zZWVOYW1lIjoiemhhbmcgeW9uZyIsImFzc2lnbmVlTmFtZ ...

  6. &commat;Param注解

    关于mybatis的@Param注解和参数 引用 https://www.cnblogs.com/whisper527/p/6568028.html 薇飘意 1,使用@Param注解 当以下面的方式进 ...

  7. Yii的数值比较验证器

    该验证器比对两个特定输入值之间的关系 是否与 operator 属性所指定的相同. compareAttribute:用于与原属性相比对的属性名称. 当该验证器被用于验证某目标属性时, 该属性会默认为 ...

  8. 如何自动设置网页中meta节点keywords属性-【SEO】

    在处理网页的SEO时,经常需要设置meta节点中keywords的属性. 如果是UGC产生内容的话,对于这个字段可以由用户或编辑手工设置相关的标签或关键词来进行. 但对于MGC(机器产生内容)的内容的 ...

  9. android手机安全性测试手段

    罗列一下自己常用的android手机安全性测试攻击手段: 1. fiddler和tcpdump+wireshark抓包分析,模拟修改http请求参数,检验漏洞 2. 修改AndroidManifest ...

  10. 【BZOJ-1913】signaling信号覆盖 极角排序 &plus; 组合

    1913: [Apio2010]signaling 信号覆盖 Time Limit: 20 Sec  Memory Limit: 64 MBSubmit: 1232  Solved: 506[Subm ...