상권 제2 부 부록 A ES6 중의 Class

2202 단어
먼저 ES5 가 ES6 Class 에 대한 실현 (Babel) 을 살 펴 볼 수 있다. 여기 에는 ES6 class 의 일부 원리 와 두 번 째 부분 이 포함 되 어 있다. '유형 디자인' 은 선택 할 수 있 는 디자인 모델 로 JS 에서 유형 을 실현 하 는 것 이 좋 지 않다. 이런 것 은 문법 뿐만 아니 라 복잡 한 .prototype 인용, 위조 다 형, 신뢰성 이 없 는 .constructor그리고 류 의 본질은 복제 입 니 다. 여 기 는 없습니다. 어떤 것 은 의뢰 일 뿐 입 니 다.
class 
class Widget {
    constructor(width, height) {
        this.width = width
        this.height = height
        this.$ele = null
    }
    render($where) {
        const {
            width,
            height
        } = this
        if (this.$ele) {
            this.$ele.css({
                height,
                width
            }).appendTo($where)
        }
    }
}
class Button extends Widget {
    constructor(width, height, label) {
        super(width, height)
        this.label = label
        this.$ele = $('
  1. 没有繁乱的.prototype
  2. 可以用super来实现相对多态
  3. 声明Button时就直接继承了Widget，不用修改.prototype
  4. 可以通过extends很自然的扩展对象子类型，甚至是Array之类的内置对象
  5. 值得注意的是可以声明实例属性，和方法平级，也可以和上例一样挂在this上

class陷阱

首先最大的误解就是不能一味ES6引入了新机制，它仅仅是之前我们写的.prototype“类设计”的语法糖，本质上它还是个对象。所以声明的类是可以被改的，而且父类改了，子类也被影响，它本质上还是没有实现复制

  1. class语法有可能出现意外屏蔽
class C {
    constructor(id) {
        // id       id()   
        this.id = id
    }
    id() {
        console.log('Id: ' + id)
    }
}
var c1 = new C('c1')
c1.id() // // TypeError -- c1.id        "c1"
  • 슈퍼 의 바 인 딩 입 니 다. this 와 같은 동적 바 인 딩 이 라 고 생각 할 수 있 습 니 다. 하지만 동적 바 인 딩 은 성능 을 소모 합 니 다. 슈퍼 는 설명 할 때 '정적' 바 인 딩 을 합 니 다. [[HomeObject] 를 가리 키 고 있 습 니 다. [Prototype], [HomeObject] 가 가리 키 는 방법 으로 호출 된 대상 은 정적 바 인 딩 입 니 다. 수정 할 수 없습니다
    • class 는 유효 하지 않 은 prototype 속성 이 없 는 함 수 를 확장 할 수 없습니다. 예 를 들 어 bind 가 지나 간 함수 입 니 다.
    [leetcode] Next Permutation
    대체 연산자

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage