ES6 1 개 클래스
ES6는 표현이 더 객체의 프로토 타입 객체 지향 언어 기록처럼 그래서, 클래스의 개념 (클래스)를 제안했다. ES6는 기본 생성자 방법 및 사용자 정의 메소드를 가진 객체 클래스에 의해 정의 된 클래스에 포함 된 방법을 열거 할 수 없습니다.
class Point{
constructor(){
this.x=x;
this.y=y;
}
toString(){
return this.x+this.y;
}
}주 : 생성자 메소드 ES5 대응 생성자, 클래스 메소드 만들기 기능 키의 사용을 필요로하지 않으며, 상기 방법은 쉼표로 구분이 필요하지 않는다.
ES5 조합 모드와 생성자의 프로토 타입 모델을 사용하여이 모델 생성자가 정의 속성 개체 인스턴스를 정의하는 데 사용됩니다, 프로토 타입 모델은 생성자에 메모리를 저장, 공유 속성을 공유하는 방법을 정의하는 데 사용 및 지원 패스 매개 변수입니다.
function Point (x,y){
this.x=x;
this.y=y;
}
Point.prototype.toString= function(){
return this.x+this.y;
}
2 ES5와 ES6는 개체의 인스턴스를 생성하고 비교
. 1) 생성자 사람 한 사람 ES5 및 프로토 타입 객체 인스턴스와 PERSON1,하여 Person2 관계 : 생성자의 프로토 타입 속성과 속성 인스턴스 __proto__ 포인트 프로토 타입 객체 생성자의 프로토 타입 객체 점의 생성자 속성.
클래스 메소드는 프로토 타입 클래스 (프로토 타입)에 정의 된 위의 클래스의 인스턴스의 메소드를 호출, 실제로이라는 프로토 타입의 방법입니다 : 프로토 타입 생성자 (프로토 타입) 속성은 여전히 및 ES5가로 ES6 존재한다.
//实例的constructor方法就是类的原型(prototype)的constructor方法
class B{
constructor(){}
}
let b = new B();
console.log(b.constructor === B.prototype.constructor);//true
클래스 2)) ES6 다른 방법 생성자 (생성자로 간주 될 수 있고, ES5 동등한 생성자 메소드 아니다 : 클래스 함수 타입, 속성 프로토 타입 객체 생성자 클래스 자체 관한 클래스 ES5이고 같은.
class Point{
// ...
}
console.log(typeof Point) // "function"
console.log(Point === Point.prototype.constructor) // true
3) 클래스를 사용하여 개체의 인스턴스 생성자의 사용 ES5과 일치 직접 클래스에 새로운 명령의 사용이다 만듭니다.
4) 클래스 메소드는 열거되지 않은 내 이것 ES5의 다른.
. 5) 생성자 메서드
클래스가, 생성자 방법이 있어야하지 않을 경우 추가 기본 생성자 () {}. 클래스가 기능이지만,하지만 ES5 다른, 직접적으로이 기능이있는 경우에만 사용하는 새로운 함께 의미가 있는지, 오류의 새로운 유형으로 이어질 것입니다 클래스를 호출하여.
실시 예 6) 클래스
와 동일한 속성 ES5 인스턴스 명시하지 않는 한 그 자체 정의 (즉,이 오브젝트)을 정의하고, 또는 프로토 타입 (즉, 클래스 정의) 정의된다.
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var point = new Point(2, 3);
point.toString() // (2, 3)
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true위의 코드, x와 y가 (이 변수에 정의 된) 객체 점 자신의 속성의 경우, 진정한 hasOwnProperty 방법으로 되돌아가, 프로토 타입 객체의 속성입니다 toString가 (포인트에 정의 된)이며, 메소드 반환 hasOwnProperty 거짓. 다음은 ES5의 동작과 일치한다.
ES5와 클래스의 프로토 타입 객체의 모든 인스턴스의 몫으로.
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__ === p2.__proto__
//true
__proto__ 속성은 프로토 타입 모두가 ES5과 같이,이 방법을 증가 후, 클래스 인스턴스 메소드를 추가함으로써 감소 될 수있다.
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__.printName = function () { return 'Oops' };
p1.printName() // "Oops"
p2.printName() // "Oops"
7) 클래스 변수 리프트 (호이스트)는 완전히 상이하고, ES5이며, 존재하지 않는다.
new Foo(); // ReferenceError
class Foo {}클래스 선언 ES6 코드의 선두로 상승하지 때문에 위의 코드에서, 푸, 정의 후에, 이것을 소정의 상기 제 1 클래스를 사용. 승계에 관한 이러한 조항에 대한 이유는, 부모 클래스 후 그 서브 클래스 정의를 확인해야합니다.
8) 엄격 모드
는 동작의 사용을 엄격 모드를 지정할 필요가 없습니다 내부 클래스와 모듈, 기본 모드는 엄격하다. 만큼 당신의 클래스 또는 모듈에서 코드를 작성으로 만 엄격 모드를 사용할 수 있습니다. 미래의 계정에 모든 코드를 촬영, 실제로 모듈과 ES6 실제로 엄격 모드로 모든 언어를 업그레이드 할 수 있도록 실행 중입니다.
3 개 ES6 클래스 상속
클래스가 상속에 키워드 연장 달성하고, ES5는 다른 프로토 타입 상속 체인을 수정하여이 달성 (동시, SASS는 @extend에 의해 달성 될 상속 스타일) :
class ColorPoint extends Point{}서브 클래스는 새로운 인스턴스를 생성 할 때, 그렇지 않으면 오류가 발생하지, 생성자 메서드의 슈퍼 메서드를 호출해야합니다. 서브 클래스가이 객체를 소유하고 있지 않기 때문이지만,이 객체는 부모 클래스, 후 처리를 상속합니다. 당신이 슈퍼 메소드를 호출하지 않는 경우, 서브 클래스는이 목적을받지 않습니다.
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // super代表父类原型，调用父类的toString()
}
}위의 코드에서, 및의 toString 방법이 등장 생성자 메소드 가운데 최고 키워드 가 상위 클래스의 구조를 도시하고,이 객체는 새로운 상위 클래스를 생성하는데 사용된다.
슈퍼 키워드는 어느 사용하는 기능으로, 당신은 또한 대상으로 사용할 수 있습니다. 첫 번째 경우는, 슈퍼 시간 함수 호출로, 부모 클래스 생성자 대신에, 단지 생성자 서브 클래스에서 사용할 수 있습니다. ES6 주장 서브 클래스 생성자는 슈퍼 기능을 수행해야합니다. 두 번째 경우는, 슈퍼 객체는 프로토 타입 부모 클래스를 대신하여 객체를 참조 할 때.
ES5 상속, 본질적으로, 다음,이 서브 클래스의 객체 인스턴스를 만들 수 위의이 부모 클래스에 추가하는 것입니다 (Parent.apply (이)). (ES5 상속 프로토 타입 모드를 통해 : 다음 서브 클래스 프로토 타입을 다시 작성하고 인스턴스의 새로운 유형으로 교체 자식 클래스 프로토 타입에 부모 클래스의 할당 예를 서브 클래스를 생성합니다.) ES6 상속 메커니즘이 완전히 다른,의 본질을 이이 수정 서브 클래스 생성자를 사용 후, (먼저 슈퍼 메서드를 호출해야합니다) 부모 클래스를 만들 수있는 객체의 첫 번째 인스턴스입니다.
아이는 기본적으로 추가됩니다 클래스 생성자 메서드를 정의하지 않습니다. 생성자 서브 클래스에서, 단지 슈퍼를 호출 한 후, 당신은 그렇지 않으면 오류가 발생하지,이 키워드를 사용할 수 있습니다 . 이 서브 클래스의 인스턴스의 건설은, 부모 프로세스 인스턴스를 기반으로하기 때문에, 단지 슈퍼 방법은 부모 클래스의 인스턴스를 반환하는 것입니다.
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
this.color = color; // ReferenceError
super(x, y);
this.color = color; // 正确
}
}그리고 서브 클래스에 의해 생성 된 인스턴스로 ES5는 부모 클래스와 서브 클래스의 인스턴스입니다 :
let cp = new ColorPoint(25, 8, 'green');
cp instanceof ColorPoint // true
cp instanceof Point // true
4 보충
1) 프로토 타입 클래스의 속성과 __proto__ 속성 (너무 약이 이해하지.)
ES5는 각 객체의 속성, 생성자를 해당 지점 프로토 타입 속성이 __proto__. ES6 생성자 없다, 문법적으로 클래스 생성자, 동시에 prototype 속성 __proto__ 프로퍼티하고,이 개 상속 체인이있다.
(1) __proto__ 속성 서브 클래스는, 상속 생성자, 부모 클래스에 항상 포인트를 나타냅니다.
부모 클래스 (2) __proto__ 속성 서브 클래스 prototype 속성, 표현 상속 방법, 프로토 타입 속성은 항상 점.
이 결과 클래스 상속은 다음과 같은 모드에 따라 구현되어 있기 때문이다.
class A {
}
class B {
}
// B的实例继承A的实例
Object.setPrototypeOf(B.prototype, A.prototype);
const b = new B();
// B的实例继承A的静态属性
Object.setPrototypeOf(B, A);
const b = new B();
두 개의 사슬은 이해 될 수있는이 상속 : 대상으로서, 프로토합니다 (__proto__ 속성) 서브 클래스 (B)의 상위 클래스 (A) 인, 생성자로서, 원형 (원형 특성) 서브 클래스 (B) 인 부모 클래스의 예.
2) Object.getPrototypeOf
Object.getPrototypeOf 방법은 부모 클래스의 서브 클래스에서 얻을 수 있습니다.
Object.getPrototypeOf(ColorPoint) === Point
// true따라서, 사용할 수있는 방법은이 클래스가 다른 클래스를 상속 여부를 판정한다.
__proto__ 예의 속성 3)
__proto__ 재산 __proto__ 속성을 하위 클래스 인스턴스 부모 클래스 인스턴스의 점 __proto__ 속성. 즉, 하위 클래스 인스턴스의 프로토 타입의 프로토 타입은 부모 클래스 프로토 타입의 인스턴스입니다.
var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');
p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true
전반적으로, ES6는 ES5의 형태를 변경하는 것입니다, 진정한 내용이 본질적으로 상속 체인에 의해 프로토 타입은 여전히, 변경되지 않습니다.