[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的类语法的更多相关文章
- [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)
一.设置属性的值: {{data中的数据}} window.onload = function () { var c = new Vue({ el : '#box', data : { url : ' ...
- [js高手之路] vue系列教程 - 事件专题(4)
本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型. 之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...
- [js高手之路] vue系列教程 - 实现留言板todolist(3)
通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...
- [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)
本系列课程选用vue的版本为1.0.21, 什么是vue? vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变, ...
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...
随机推荐
- linux下yum安装redis以及使用
1.yum install redis --查看是否有redis yum 源 2.yum install epel-release --下载fedora的epel仓库 3. yum ...
- 【Java入门提高篇】Day6 Java内部类——成员内部类
内部类是什么,简单来说,就是定义在类内部的类(一本正经的说着废话). 一个正经的内部类是长这样的: public class Outer { class Inner{ } } 这是为了演示而写的类,没 ...
- 小白的Python之路 day1 Python3的bytes/str之别
原文:The bytes/str dichotomy in Python 3 Python 3最重要的新特性大概要算是对文本和二进制数据作了更为清晰的区分.文本总是Unicode,由str类型表示,二 ...
- 》》初识移动端--rem
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...
- Golang中的信号处理
信号类型 个平台的信号定义或许有些不同.下面列出了POSIX中定义的信号. Linux 使用34-64信号用作实时系统中. 命令 man 7 signal 提供了官方的信号介绍. 在POSIX.1-1 ...
- 2017最新安装mysql教程及遇到的问题解决Windows下
今天因为换了个LINUX系统 把我的E盘不小心给卸载了 结果还是不能用 导致 我E盘里面的mysql也都被删除了 所以又要在次重新装一个MYSQL 了 花了很多时间 也看了很多教程.好 ...
- mov指令具体解释
MOV指令能够在CPU内或CPU和存储器之间传送字或字节.它传送的信息能够从寄存器到寄存器,马上数到寄存器,马上数到存储单元,从存储单元到寄存器.从寄存器到存储单元,从寄存器或存储单元到除CS外的段寄 ...
- Android之本地相冊图片选取和拍照以及图片剪辑
转载请注明出处:http://blog.csdn.net/loveyaozu/article/details/51160482 相信有非常多Android开发者在日常开发中,因为项目需求,须要我们的A ...
- 高版本号chrome安装flashplayer debuger后无法使用的问题
起因应该是苹果公司指出flash player的安全问题,还有各种原因导致google将在未来取消NPAPI的支持,所以fp们就悲剧了在高版本号chrome(42以上)默认是关闭外部安装的插件使用的, ...
- JAVA入门[3]—Spring依赖注入
Spring支持属性注入和构造器注入,它支持XML和注解两种方式.本文介绍Spring控制反转容器加载包含beans的XML文件,实现依赖注入. 一.创建bean实例 暂且抛开对象依赖,我们先看下如何 ...