>  기사  >  웹 프론트엔드  >  JavaScript는 new.target 속성 및 es5를 기반으로 es6 클래스 구문을 변환합니다.

JavaScript는 new.target 속성 및 es5를 기반으로 es6 클래스 구문을 변환합니다.

巴扎黑
巴扎黑원래의
2017-09-04 10:31:191273검색

아래 편집기는 new.target 속성과 es5를 기반으로 es6 클래스 구문을 변환하는 js es6 시리즈 튜토리얼을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집기를 따라가서 살펴보겠습니다. 이전에 new를 사용하여 es5의 생성자가 호출되지 않고 이것이 창을 가리키면 개체의 속성이 값을 가져오지 않으므로 이전에는 이것이 아닌지 판단해야 했습니다. 생성자 키워드에서 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은 정의되지 않습니다

3. new를 사용하면 new.target이 클래스 자체를 가리킵니다. new를 사용하지 않으면 정의되지 않습니다.

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의 생성자입니다.

위 예에서 new를 사용할 때 new.target은 Person과 동일합니다

new.target을 마스터한 후 다음으로 es5 구문을 사용하여 위 es6 클래스 구문을 다시 작성합니다


function Person( uName ){
   if ( new.target === Person ) {
    this.userName = uName;
   }else {
    throw new Error( '必须用new实例化' );
   }
  }
  
  // Person( 'ghostwu' ); //报错
  console.log( new Person( 'ghostwu' ).userName ); //ghostwu

위 내용은 JavaScript는 new.target 속성 및 es5를 기반으로 es6 클래스 구문을 변환합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.