ES6中的类

Posted wydumn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6中的类相关的知识,希望对你有一定的参考价值。

ES6中的类

  1. class

    class Fo {
        constructor(a,b) {
            this.x = a;
            this.y = b;
        }
    
        gimmeXY() {
            return this.x * this.y;
        }
    }
    

    等价于如下代码

    function Fo(a, b) {
        this.x = a;
        this.y = b;
    }
    
    Fo.prototype.gimmeXY = () => this.x * this.y;
    

    以上两种方式的区别

    1. function Fo有变量提升,class Fo并不会提升(所以实例化一个class之前要先声明)
    2. class Fo并不会创建一个window属性

2.extends和super

class Bar extends Fo {
    constructor(a, b, c) {
        super(a, b, c);
        this.z = c;
    }
    
    gimmeXYZ() {
        return super.gimmeXY() * this.z;
    }
}
class ParentA {
    constructor() {
        this.id = "a";
    }
    foo() {
        console.log("ParentA:", this.id);
    }
}

class ChildA extends ParentA {
    foo() {
        super.foo();
        console.log("ChildA:", this.id);
    }
}

var a = new ChildA();
a.foo(); // Parent: a
		 // ChildA: a

class ParentB {
    constructor() {
        this.id = "b";
    }
    foo() {
        console.log("ParentB:", this.id);
    }
}

class ChildB extends ParentB {
    foo() {
        super.foo();
        console.log("ChildB:", this.id);
    }
}

var b = new ChildB();
b.foo();	// ParentB: b
			// ChildB: b

b.foo.call(a);	// ParentB: a
				// ChildB: a
// this.id被动态绑定,super.foo()并没有被动态绑定

3.子类构造器

  • 类和子类的构造器并不是必须的;省略的话会自动提供一个默认构造器

  • 默认构造器可以认为是这样的

    constructor(...args) {
        super(...args);
    }
    
    1. 子类构造器中调用super(...)之后才能访问this(机制,可以理解为对实例中this进行创建/实例化的是父构造器
    class Foo {
        constructor() { this.a = 1; }
    }
    class Bar extends Foo {
        constrcutor() {
            this.b = 2;	//不允许在super()之前使用this
            super();	// Uncaught SyntaxError: ‘super‘ keyword unexpected here
        }
    }
    

以上是关于ES6中的类的主要内容,如果未能解决你的问题,请参考以下文章

如何将 View 类中的代码片段移动到 OnAppearing() 方法?

ES6中的类

ES6中的类

扩展片段的类中的选项卡

ES6中的类

ES6中的类