欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

使用ES6新特性开发微信小程序（3）

发布：2018-01-24 15:16浏览： 次来源：网络 作者：tianshu

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



免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有