es5와 es6류의 비교

3606 단어
function Person(name) {
    this.name = name; 
}

Person.prototype.sayHello = function(){
    return 'Hi, I am ' + this.name;
}

/*  es5             ,        */ 

ES6의 Write로 다시 작성한 결과 Person은 본질적으로 여전히 함수인 것으로 나타났습니다.
class Person {
    //       
    constructor(name){
        this.name = name;
    }
    sayHello(){
        return 'Hi, I am ' + this.name;
    } 
}
typeof Person; //'function'

호출 방법은 모두 일치합니다.
var me = new Person('Jason');    

ES6에서 class를 정의하는 방법으로 원형 대상에 정의합니다.ES5와 달리 이러한 정의가 원형 대상에 적용되는 방법은 일일이 열거할 수 없다.
ES6 클래스 및 모듈은 엄격한 모드입니다.
변수 상승이 존재하지 않으며 자류 부류의 순서를 보증합니다.
클래스의 계승에도 새로운 문법이 있다.
class Female extends Person {
    constructor(name){
        super(name); //     ,    ,    this
        this.gender = 'female';
    }
    sayHello(){
        return super.sayHello() + ', I am ' + this.gender; 
    }
}

하위 클래스는 부모 클래스의 구조 함수에서 슈퍼 () 를 호출해야만 this 대상이 있습니다. 왜냐하면 this 대상은 부모 클래스에서 계승되기 때문입니다.하위 클래스에서 부류를 호출하는 방법은 슈퍼 키워드로 부류를 가리킬 수 있다.ES5 중류 계승의 관계는 상반된다. 먼저 자류의this가 있고 부류의 방법으로this에 응용된다.ES6 클래스에서 하위 클래스를 계승하는this는 상위 클래스에서 계승된 이 특성으로 ES6에서 원본 데이터 구조의 하위 클래스를 구성할 수 있게 하는 것은 ES5가 할 수 없는 것이다.ES6도 클래스의 정적 방법과 정적 속성을 정의할 수 있다. 정태는 이런 것들이 실례에 계승되지 않고 실례화 클래스가 필요하지 않아도 직접 가져올 수 있다는 뜻이다.ES6에서는 class 내부에서 방법만 정의할 수 있고 속성은 정의할 수 없습니다.방법명 앞에 static을 더하면 이 방식이 정적 방법이고 속성은 ES5의 방식에 따라 이루어진다는 것을 나타낸다. 
// ES5   
Person.total = 0; //    
Person.counter = function(){  //    
    return this.total ++ ;
}

// ES6  
class Person {
    ...
    static counter(){
        return this.total ++ ;
    }
}
Person.total = 0;

ES6에서 함수가 new 키워드를 사용할 때 new가 추가되었습니다.target 속성은 현재 호출된 구조 함수를 판단합니다.이것은 무슨 쓸모가 있습니까?함수의 호출을 제한할 수 있습니다. 예를 들어 반드시 new 명령으로 호출해야 하거나, 함수의 하위 클래스를 직접 실례화할 수 없습니다.
function Person(name){
    if(new.target === Person){
        this.name = name;
    }
    else{
        throw new Error('   new    ');
    }
}

요약:

  • ES6의 객체는 원형 체인에 별도로 쓸 필요가 없음
  • ES6에는 정적 방법의 성명과 사용이 많아졌고 정적 방법은 실례적인 대상이 호출할 수 없는 원형을 통과했다.방법명 호출, 정적 방법은 대부분 공공 방법을 저장하는 데 사용된다. 예를 들어 이 같은 종류의 대상을 정렬하는 등
  • 류의 상속 중 상속 관계는 상반된다(es6: 먼저 부류가 있고 또 자류가 있으며,es5는 반대이다). 문법도 다르다
  • ES6 클래스와 모듈은 엄격한 모드에서 변수 상승이 존재하지 않고 하위 클래스 부류의 순서를 확보한다
  • 전재 대상:https://juejin.im/post/5be13cb6e51d451aa47cad2c

    좋은 웹페이지 즐겨찾기