Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用ES6新特性开发微信小程序(3)——类

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

作者头像
极乐君
发布于 2018-02-05 08:55:59
发布于 2018-02-05 08:55:59
1.6K00
代码可运行
举报
文章被收录于专栏:极乐技术社区极乐技术社区
运行总次数:0
代码可运行

Class(类)

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

Class Definition(类的定义)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Shape {
    constructor(name) {       
        this.name = name;
    }
    move(x, y) {       
        console.log(this.name + " Move to: " + x + "," + y);
    }
}

上面定义了一个Shape类,他有一个属性 name 和一个方法 move(),还有一个构造函数。

调用Shape类

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 关键字来引用父类。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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类

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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)上的属性。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class F4 {}
F4.prop = 5;    
console.log(F4.prop) // 输出: 5
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2016-12-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极乐技术社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ES6——类(Class)
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。 ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写,就是下面这样。
羊羽shine
2019/07/31
1.1K0
使用 TypeScript 探索面向对象编程
在软件开发领域,面向对象编程 (OOP) 已成为创建复杂且可扩展应用程序的基本范例。支持 OOP 概念的最流行的编程语言之一是 TypeScript。TypeScript 是 JavaScript 的超集,它增加了静态类型和其他功能以增强代码的可维护性和可读性。在这篇博客中,我们将探讨 TypeScript 中面向对象编程的强大功能,以及它如何帮助我们构建健壮且高效的应用程序。
IT千锋教育
2023/06/05
7490
使用 TypeScript 探索面向对象编程
一万字ES6的class类,再学不懂,请来找我(语法篇)
上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。
coder_koala
2021/11/12
3650
详解ES6中的class
class是一个语法糖,其底层还是通过 构造函数 去创建的。所以它的绝大部分功能,ES5 都可以做到。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
木子星兮
2020/07/16
5460
ES6中的类
ES6中添加的class关键字其实并非真正的类,而是ES5用函数来模拟类的语法糖。在ES6中可以用如下的语法创建一个类:
宅蓝三木
2024/10/09
1540
es6 class
1.Es6引入了Class 类这个概念,作为对象的模板,通过class 关键字,可以定义类。 2.类和模块的内部,默认就是严格模式,所以不需要使用use strict 指定运行模式。 3.constructor 方法就是类的默认方法,通过new 命令生成对象实例时,自动调动该   方法,一个类必须有constructor 方法,如果没有显示定义,一个空的constructor   方法会默认添加。 4.类的实例对象   必须使用new ,像函数那样调用Class ,将会报错。     例如:       c
用户1197315
2018/01/19
6380
ES6的class详解
声明创建一个基于原型继承的具有给定名称的新类。 和类表达式一样,类声明体在严格模式下运行。构造函数是可选的。类声明不可以提升(这与函数声明不同)
用户10106350
2022/10/28
4030
ES6特性之:类
面向对象编程是一个很流行也很让人容易理解的方法。面向对象编程中的一个核心概念就是类,我们可以把事物都抽象成一个个的类来描述他们的信息和行为。
一斤代码
2018/08/21
2480
TypeScript抽象类
在 TypeScript 中,抽象类是一种特殊的类,它用于作为其他类的基类,但不能直接实例化。抽象类提供了一种定义通用属性和方法的方式,而具体的实现由其派生类完成。
堕落飞鸟
2023/05/22
4670
深入理解ES6之——JS类的相关知识
类声明以class关键字开始,其后是类的名称;剩余部分的语法看起来像对象字面量中的方法简写,并且在方法之间不需要使用逗号。
寻找石头鱼
2019/09/11
4860
(转)ES6新特性概览
ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中。要查看ES6的支持情况请点此。 目前想要运行ES6代码的话,可以用google/traceur-compiler将代码转译。点此访问traceur-compiler
前端黑板报
2018/01/29
1K0
ES6新特性以及一些规范
` class goodStudent extends Student { sayAge() { console.log(this.age) } } let goodStu = new goodStudent("CJG", 20, "SYSU); goodStu.sayAge() // 20 6.3方法可以通过返回this来实现方法链式调用 class Person { setName(name) { this.name = name; return this; } sayName() { console.log(this.name); return this } } 这样,我们就可以直接链式调用它的方法了 let p = new Person() b.setName("cjg").sayName().setName("zht").sayName() 6.4使用class的时候,如果你没有声明构造函数的话,它会自己提供默认的构造函数,如果你不需要在构造函数做额外的事情(例如给某个变量赋值等),就没必要主动声明构造函数 //bad,没有必要,这是系统默认的 class goodStudent extends Student { constructor(...args) { super(...args); } } //good 如果需要在构造函数做额外的工作,则主动声明构造函数 class goodStudent extends Student { constructor(...args) { super(...args); this.age = 22; } }
嘿嘿嘿
2018/09/10
4590
ES6 主要的新特性
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用。 ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中。要查看ES6的支持情况请点此。 目前想要运行ES6代码的话,可以用go
庞小明
2018/03/09
1.1K0
《现代Javascript高级教程》面向对象之Class
随着JavaScript的发展,ECMAScript 6(ES6)引入了许多新的语言特性和语法糖,其中包括了面向对象编程的Class(类)机制。Class提供了一种更简洁、更直观的方式来定义对象和操作对象的行为。本文将介绍ES6中Class的概念、语法和特性,并通过示例代码来说明其实际应用。
linwu
2023/07/27
3200
ES6新特性概览
前言 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 标准的制定者有计划,以后每年发布一次标准,使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015,下一年应该会发布小幅修订的ES2016。 废话不多说,直接开始介绍ES6中的新特性,让你一睹新生代JS的风采。
laixiangran
2018/04/11
1.1K0
ES6基础-ES6 class
面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它的特性有哪些。比如有姓名,性别,出生年月,身高等,还有人的行为,为吃饭,睡觉。特性和行为组合起来就成为人类,特性和行为都是人都有的,通过这些不同的特性和行为给不同的值,构成不同的人。
达达前端
2019/12/03
8300
ES6基础-ES6 class
TypeScript进阶(一)深入理解类和接口
TypeScript 是一种静态类型的 JavaScript 超集,它提供了类和接口的概念,使得我们能够更好地组织和管理代码。在本文中,我们将深入探讨 TypeScript 类和接口的各种特性,包括类的继承、抽象类、静态成员、接口、索引器以及 this 指向约束。
can4hou6joeng4
2023/11/28
5730
TypeScript学习笔记之类
TypeScript的类,简单地定义如下: class Person { x: number; // 默认为public类型 y: number; construc
用户1141560
2017/12/25
6180
ECMAScript 6教程 (三) Class和Module(类和模块)
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 原文连接,博客地址为 http://www.cnblogs.com/jasonnode/ 。该系列课程是汇智网 整理编写的,课程地址为 http://www.hubwiz.com/course/5594e91ac086935f4a6fb8ef/
笔阁
2018/09/04
5310
Typescript笔记
数值类型有很不止 number, bigint也是。同时值的话可以是十进制,二进制,还可以是NaN。
踏浪
2020/11/05
6190
相关推荐
ES6——类(Class)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档