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


Posted in Javascript onSeptember 02, 2017

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的类语法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js控制表单操作的常用代码小结
Aug 15 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 #Javascript
使用vue-resource进行数据交互的实例
Sep 02 #Javascript
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
自制简易打赏功能的实例
Sep 02 #Javascript
Vue使用vue-cli创建项目
Sep 01 #Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 #Javascript
ionic2懒加载配置详解
Sep 01 #Javascript
You might like
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
PHP Pear 安装及使用
2009/03/19 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
php简单中奖算法(实例)
2017/08/15 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
js单词形式的运算符
2014/05/06 Javascript
JavaScript DOM基础
2015/04/13 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
javascript基本算法汇总
2016/03/09 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python 登录网站详解及实例
2017/04/11 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python保存数据到本地文件的方法
2018/06/23 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python实现静态web服务器
2019/09/03 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Python Django view 两种return的实现方式
2020/03/16 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
python数据抓取3种方法总结
2021/02/07 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
高二历史教学反思
2014/01/25 职场文书
关于教师节的广播稿
2015/08/19 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
golang中的struct操作
2021/11/11 Golang