UDN-企业互联网技术人气社区

板块导航

浏览  : 1290
回复  : 0

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

[复制链接]
舞操的头像 楼主
发表于 2017-1-6 21:00:17 | 显示全部楼层 |阅读模式
  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.   class Circle extends Shape {

  10.   constructor(name) {

  11.   super(name);

  12.   }

  13.   area(radius) {

  14.   console.log(this.name + " Area:" + 3.14 * radius * radius);

  15.   }

  16.   }
复制代码


  调用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.   }
复制代码


  调用People类

  1.   var p = new People("tom");

  2.   console.log(p.name); // TOM

  3.   p.name = "john";

  4.   console.log(p.name); // JOHN

  5.   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
复制代码


  静态属性指的是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

原文作者:佚名  来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部