es6의 클래스에 대한 간단한 이해(예제 포함)

이 기사는 es6의 클래스에 대한 간단한 이해를 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

수업수업

기본 개념은 나중에 이해를 깊게 할 수 있도록 기록해두세요

#🎜🎜 #클래스란 무엇인지 이해하세요

class란 무엇인가요? 하나를 작성하고

class Demo {
    constructor() {
        this.a = 1;
        this.b = this.f;
    }
    f() {
        return this;
    }
}
Demo.prototype; //{
                //  constructor: class Demo
                //  f: ƒ f()           
                //  __proto__: Object }

Demo의 프로토타입을 살펴보는 것이 좋습니다. 이 세 가지 속성은 통과할 수 없으며 Demo 클래스에 비해 추가 __proto__ 프로토타입 체인이 있음을 알 수 있습니다. 새로운 Demo를 살펴보겠습니다

let o = new Demo();
console.log(Object.getPrototypeOf(o));  //{
                                        //  constructor: class Demo
                                        //  f: ƒ f()           
                                        //  __proto__: Object }

사실 Demo 클래스는 Demo 인스턴스의 프로토타입과 동일합니다

클래스의 생성자

# 🎜🎜#제 생각에는

    constructor() {
        this.a = 1;
        this.b = this.f;
    }

이 부분은 es5의 생성자 역할과 동일합니다. new 과정에서 이 값을 할당하고 이를 반환하여 인스턴스 객체가 됩니다

그래서 생성자에서 반환합니다. 객체가 null이 아닌 경우 인스턴스 객체는 반환 값이며, 이는 es5 생성자와 동일한 효과를 갖습니다.

Method in class

    f() {
        return this;
    }

#🎜 🎜#이 메소드는 궁극적으로 인스턴스 객체에 속합니다. 프로토타입 체인의

탐색 불가능한 메소드

는 인스턴스 객체에서도 사용할 수 있습니다

새로운 지식 포인트# 🎜🎜#클래스의 정적 메서드

# 🎜🎜#메서드가 인스턴스에 의해 상속되지 않고 클래스를 통해 직접 호출됨을 나타냅니다.

class Demo {
    constructor() {
        this.a = this;
        this.b = this.f;
    }
    static g() {
        return this;
    }
    static f() {
        return this;
    }
}
let o = new Demo(); 
//console.log(o.b());    //not a function
//console.log(o.g());     //not a function
Demo.g() === Demo;        //true

정적 메서드 지점에서

은 인스턴스 객체 자체를 가리키는 반면 #🎜🎜 #

정적 메서드는 하위 클래스에서 상속 가능

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
}

Bar.classMethod() // 'hello'

정적 메서드는 상위 개체에서 호출 가능# 🎜🎜#

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

클래스 내부에는 정적 메소드만 있고 정적 속성은 없습니다this.a = this

클래스 표현식의 즉시 실행

var o =  new class {
    constructor(n) {
        this.a = n;
        this.b = this.f;
    }
    g() {
        return n;
    }
    f() {
        return this;
    }

}(1)

o.a;             // 1

클래스 선언에 변수 승격이 없습니다#🎜 🎜#

new.target attribute

은 new에 있습니다. 그런 다음 객체가 반환됩니다. 예를 들어 es5의 생성자 f는 new 호출을 통해 정의되지 않은 값을 반환하지 않고 생성자 자체를 반환합니다. the new call

function f() {
    return new.target;
}
console.log((new f()) === f);       //true

그리고 클래스 클래스에서는 클래스 자체가 반환됩니다. 이는 정적 메서드와 동일합니다. new는 어떤 클래스인지 반환합니다.

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}

var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

위 내용은 es6의 클래스에 대한 간단한 이해(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!