ES6 + class 에서 코드 의 진짜 모습

이 글 은 ES6 의 종 류 를 코드 대비 로 해석 하고 있 습 니 다.
1. class 로 빈 클래스 를 ES6 에 정의 합 니 다.

class Person { 

}

ES5 에서:

var Person = (function () {
    function Person() {
    }
    return Person;
}()); 

결론: 이 결 과 는 매우 뚜렷 하 다. 원래 ES6 의 class 류 는 ES5 에서 도 구조 함 수 를 정의 한 다음 에 되 돌 아 왔 다.
2. ES6 에서 속성 정의:

class Person { 
  
  constructor(name,age) { 
    this.name = name;    // constructor     
  }

  age = age;    //      

}

ES5 에서:

var Person = (function () {

    function Person(name, age) {
        this.age = age;    // es6          ，        
        this.name = name;
    }
    return Person;
    
}());

결론: ES6 에서 정 의 된 속성 은 class 에서 직접 정의 하 든 constructor 에서 정의 하 든 모두 가능 하지만 constructor 에서 속성 을 정의 하 는 것 이 야 말로 이다. 왜냐하면 ES6 전 ES5 도 100% 합 리 적 이지 않 기 때문이다.
3. 정의 방법 은 ES6 (전통 적 인 쓰기, 화살표 함수 쓰기) 에 있 습 니 다.

class Person { 

  Run() {    //         
    this;
  }

  eat = () => {    //es6        
    this;
  }

}   

ES5 에서:

var Person = (function () {

    function Person() {
        var _this = this;
        this.eat = function () {    //        Person this 
            _this;
        };
    }
    Person.prototype.Run = function () {    //       prototype   
        this;
    };
    
    return Person;
}());    

결론: 여기 서 방법의 정 의 를 보 여 주 었 을 뿐만 아니 라 ES6 에서 전통 함수 와 화살표 함수 의 차이 도 비교 했다. 전통 함수 의 this 와 es5 함수 의 this 가 가리 키 는 것 은 똑 같 지만 화살표 함수 의 this 가 가리 키 는 것 은 외부 대상 의 역할 영역 이다. 여기 서 자세히 말 하지 않 고 여 기 를 클릭 하 십시오.
4. static 키 워드 는 ES7 에서:

class Person {

  static name = "Jack";    //     static

  static run() {     //       static
    console.log(22)
  }

  static see = () => {    //       static
    
  }
};    

ES5 에서:

var Person = (function () {
    function Person() {
    }
    Person.run = function () {
        console.log(22);
    };
    return Person;
}());

Person.name = "Jack";
Person.see = function () {};

결론: class 에서 속성 이나 방법 전에 static 키 워드 를 사용 하면 외부 에서 접근 할 수 있 습 니 다. 접근 방식 은 Person. xxx 또는 Person. xxx () 입 니 다.