• [js高手之路] es6系列教程


    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的类方法中,在调用时候,使用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,报错
  • 相关阅读:
    iphone6闪存检测
    knowledges address
    类linux系统/proc/sysrq-trigger文件功能作用
    iphone 6s pp助手 越狱
    C pointers
    ubuntu15.04 TLS
    ubuntu cenots 禁止本地登陆
    CentOS7
    CentOS7安全设置 yum-cron系统自动更新,firewalld防火墙简单使用
    SAS学习笔记之函数应用
  • 原文地址:https://www.cnblogs.com/ghostwu/p/7465209.html
Copyright © 2020-2023  润新知