找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

使用ES6新特性开发微信小程序(3)

作者:模板之家 2018-1-24 15:08 1397人关注

Class(类) Class是ES6引入的最重要特性之一。在没有Class之前,我们只能通过原型链来模拟类。 Class Definition(类的定义) class Shape { constructor(name) { this.name = name; } move(x, y) { console.log(th

Class(类)

Class是ES6引入的最重要特性之一。在没有Class之前,我们只能通过原型链来模拟类。

Class Definition(类的定义)
  1. class Shape {
  2.     constructor(name) {
  3.         this.name = name;
  4.     }
  5.     move(x, y) {
  6.         console.log(this.name + " Move to: " + x + "," + y);
  7.     }
  8. }
上面定义了一个Shape类,他有一个属性 name 和一个方法 move(),还有一个构造函数。
调用Shape类
  1. let shapA = new Shape("Shape A", 180, 240); // 输出: Shape A Move to: 180,200
  2. shapA.move(240, 320); // 输出: Shape A Move to: 240,320
Class Inheritance(类的继承)

通过关键字 extends 来继承一个类,并且可以通过 super 关键字来引用父类。
  1. class Rectangle extends Shape {
  2.     constructor(name) {
  3.         super(name);
  4.     }
  5.     area(width, height) {
  6.         console.log(this.name + " Area:" + width * height);
  7.     }
  8. }
  9.  
  10. class Circle extends Shape {
  11.     constructor(name) {
  12.         super(name);
  13.     }
  14.     area(radius) {
  15.         console.log(this.name + " Area:" + 3.14 * radius * radius);
  16.     }
  17. }
调用Rectangle、Circle类
  1. let rectangleA = new Rectangle("Rectangle B");
  2. let circleB = new Circle("Circle C");
  3. rectangleA.move(100, 200); // 输出: Rectangle B Move to: 100,200
  4. rectangleA.area(30, 40); // 输出: Rectangle B Area:1200
  5. circleB.move(200, 300); // 输出: Circle C Move to: 200,300
  6. circleB.area(50); // 输出: Circle C Area:7850
Getter/Setter

在Class内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
  1. class People {
  2.     constructor(name) {
  3.         this._name = name;
  4.     }
  5.     get name() {
  6.         return this._name.toUpperCase();
  7.     }
  8.     set name(name) {
  9.         this._name = name;
  10.     }
  11.     sayName() {
  12.         console.log(this._name);
  13.     }
  14. }
  15. var p = new People("tom");
  16. console.log(p.name); // TOM
  17. p.name = "john";
  18. console.log(p.name); // JOHN
  19. p.sayName(); // john
Static Members(静态成员)

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
  1. class F3 {
  2.     static classMethod() {
  3.         return 'hello';
  4.     }
  5. }
  6. F3.classMethod() // 输出: hello
  7. var f3 = new F3();
  8. // f3.classMethod(); // 输出: TypeError: f3.classMethod is not a function
  9.  
静态属性指的是Class本身的属性,即Class.propname,而不是定义在实例对象(this)上的属性
  1. class F4 {}
  2. F4.prop = 5;
  3. console.log(F4.prop) // 输出: 5
完整代码:https://github.com/guyoung/GyWxappCases/tree/master/ES6

路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)