使用ES6新特性开发微信小程序(3)——类
时间:2022-04-26
本文章向大家介绍使用ES6新特性开发微信小程序(3)——类,主要内容包括Class(类)、Class Definition(类的定义)、Class Inheritance(类的继承)、Getter/Setter、Static Members(静态成员)、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
Class(类)
Class是ES6引入的最重要特性之一。在没有Class之前,我们只能通过原型链来模拟类。
Class Definition(类的定义)
class Shape {
constructor(name) {
this.name = name;
}
move(x, y) {
console.log(this.name + " Move to: " + x + "," + y);
}
}
上面定义了一个Shape类,他有一个属性 name 和一个方法 move(),还有一个构造函数。
调用Shape类
let shapA = new Shape("Shape A", 180, 240); // 输出: Shape A Move to: 180,200
shapA.move(240, 320); // 输出: Shape A Move to: 240,320
Class Inheritance(类的继承)
通过关键字 extends 来继承一个类,并且可以通过 super 关键字来引用父类。
class Rectangle extends Shape {
constructor(name) {
super(name);
}
area(width, height) {
console.log(this.name + " Area:" + width * height);
}
}
class Circle extends Shape {
constructor(name) {
super(name);
}
area(radius) {
console.log(this.name + " Area:" + 3.14 * radius * radius);
}
}
调用Rectangle、Circle类
let rectangleA = new Rectangle("Rectangle B");
let circleB = new Circle("Circle C");
rectangleA.move(100, 200); // 输出: Rectangle B Move to: 100,200
rectangleA.area(30, 40); // 输出: Rectangle B Area:1200
circleB.move(200, 300); // 输出: Circle C Move to: 200,300
circleB.area(50); // 输出: Circle C Area:7850
Getter/Setter
在Class内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
class People {
constructor(name) {
this._name = name;
}
get name() {
return this._name.toUpperCase();
}
set name(name) {
this._name = name;
}
sayName() {
console.log(this._name);
}
}
var p = new People("tom");
console.log(p.name); // TOM
p.name = "john";
console.log(p.name); // JOHN
p.sayName(); // john
Static Members(静态成员)
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
class F3 {
static classMethod() {
return 'hello';
}
}
F3.classMethod() // 输出: hellovar f3 = new F3();
// f3.classMethod();
// 输出: TypeError: f3.classMethod is not a function
静态属性指的是Class本身的属性,即Class.propname,而不是定义在实例对象(this)上的属性。
class F4 {}
F4.prop = 5;
console.log(F4.prop) // 输出: 5
- SQL常用的基础语法
- 51 Nod 1028 大数乘法 V2【Java大数乱搞】
- Gym 100952J&&2015 HIAST Collegiate Programming Contest J. Polygons Intersection【计算几何求解两个凸多边形的相交面积板子题
- Windows下Cygwin可以使用哪些Linux命令
- Codeforces Round #426 (Div. 2)【A.枚举,B.思维,C,二分+数学】
- Cygwin,打造你的Windows下Linux环境
- “玲珑杯”ACM比赛 Round #19题解&源码【A,规律,B,二分,C,牛顿迭代法,D,平衡树,E,概率dp】
- 2017 Multi-University Training Contest - Team 1 1003&&HDU 6035 Colorful Tree【树形dp】
- BZOJ 1041: [HAOI2008]圆上的整点【数论,解方程】
- POJ 1655 Balancing Act【树的重心】
- 2017 Multi-University Training Contest - Team 1 1006&&HDU 6038 Function【DFS+数论】
- 2017 Multi-University Training Contest - Team 1 1002&&HDU 6034 Balala Power!【字符串,贪心+排序】
- POJ 3662 Telephone Lines【Dijkstra最短路+二分求解】
- 洛谷 P1177 【模板】快速排序【13种排序模版】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浅析C语言中一些“令人吃惊”的结构
- 贪心算法-分数背包问题(Python实现)
- 为什么GNE 不做全自动提取列表页的功能
- 百度地图开发如何自定义控件(无敌的解决办法)
- 百度地图如何创建一个属于自己的地图,附加到项目中?
- FreeRTOS系列第9篇---FreeRTOS任务概述基础篇
- 图书管理系统(四)图书管理系统实战(2)
- 源码分析之 FactoryBean接口不为人知的秘密
- 图书管理系统(三)图书管理系统实战(1)
- 图书管理系统(二)整合 SSM,你学会了么
- CellChat:细胞间相互作用分析利器
- 我对一类常考算法面试题的详细分析
- Python 面向对象编程(上篇)
- 基于TencentOS-tiny实现PM2.5传感器(攀藤PMSA003)数据解析思路及实现
- Centos7搭建SVN+Apache+iF.SVNAdmin实现web管理SVN