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类,再学不懂,请来找我(语法篇)
上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。
coder_koala
2021/11/12
3530
详解ES6中的class
class是一个语法糖,其底层还是通过 构造函数 去创建的。所以它的绝大部分功能,ES5 都可以做到。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
木子星兮
2020/07/16
5340
ES6特性之:类
面向对象编程是一个很流行也很让人容易理解的方法。面向对象编程中的一个核心概念就是类,我们可以把事物都抽象成一个个的类来描述他们的信息和行为。
一斤代码
2018/08/21
2410
深入理解ES6之——JS类的相关知识
类声明以class关键字开始,其后是类的名称;剩余部分的语法看起来像对象字面量中的方法简写,并且在方法之间不需要使用逗号。
寻找石头鱼
2019/09/11
4760
TypeScript学习笔记之类
TypeScript的类,简单地定义如下: class Person { x: number; // 默认为public类型 y: number; construc
用户1141560
2017/12/25
6050
ES6中的类
ES6中添加的class关键字其实并非真正的类,而是ES5用函数来模拟类的语法糖。在ES6中可以用如下的语法创建一个类:
宅蓝三木
2024/10/09
1350
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
4500
ECMAScript 6教程 (三) Class和Module(类和模块)
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 原文连接,博客地址为 http://www.cnblogs.com/jasonnode/ 。该系列课程是汇智网 整理编写的,课程地址为 http://www.hubwiz.com/course/5594e91ac086935f4a6fb8ef/
笔阁
2018/09/04
5170
《现代Javascript高级教程》面向对象之Class
随着JavaScript的发展,ECMAScript 6(ES6)引入了许多新的语言特性和语法糖,其中包括了面向对象编程的Class(类)机制。Class提供了一种更简洁、更直观的方式来定义对象和操作对象的行为。本文将介绍ES6中Class的概念、语法和特性,并通过示例代码来说明其实际应用。
linwu
2023/07/27
2960
ES6的class详解
声明创建一个基于原型继承的具有给定名称的新类。 和类表达式一样,类声明体在严格模式下运行。构造函数是可选的。类声明不可以提升(这与函数声明不同)
用户10106350
2022/10/28
3910
(转)ES6新特性概览
ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中。要查看ES6的支持情况请点此。 目前想要运行ES6代码的话,可以用google/traceur-compiler将代码转译。点此访问traceur-compiler
前端黑板报
2018/01/29
1K0
使用ES6新特性开发微信小程序(5)——内建对象的变化
Object对象 Object.prototype.proto:对象具有属性proto,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。 Object.assign(target, …sources):可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。 Object.is(value1, value2)用来判断两个值是否是同一个值。 Object.setPrototypeOf(obj, prototype)将一个
极乐君
2018/02/05
1.4K0
软件开发入门教程网之TypeScript 类
定义类的关键字为 class,后面紧跟类名,类可以包含以下几个模块(类的数据成员):
iOS程序应用
2023/01/11
6590
ES6—class类详细教程(下)
上一期出了ES6中Class类用法详解的(上)半部分,以下是(下)半部分,需要复习上半部分的小伙伴可以点击文章末尾的“阅读原文”或者点击文中的超链接。
用户9999906
2022/09/26
7950
es6 class
1.Es6引入了Class 类这个概念,作为对象的模板,通过class 关键字,可以定义类。 2.类和模块的内部,默认就是严格模式,所以不需要使用use strict 指定运行模式。 3.constructor 方法就是类的默认方法,通过new 命令生成对象实例时,自动调动该   方法,一个类必须有constructor 方法,如果没有显示定义,一个空的constructor   方法会默认添加。 4.类的实例对象   必须使用new ,像函数那样调用Class ,将会报错。     例如:       c
用户1197315
2018/01/19
6280
ES6基础-ES6 class
面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它的特性有哪些。比如有姓名,性别,出生年月,身高等,还有人的行为,为吃饭,睡觉。特性和行为组合起来就成为人类,特性和行为都是人都有的,通过这些不同的特性和行为给不同的值,构成不同的人。
达达前端
2019/12/03
8160
ES6基础-ES6 class
【Javascript】ES6新增之类的认识
与函数不同,类声明不会被提升。这意味着在使用类之前,需要先进行类声明。类声明通常包括构造函数和其他成员方法。构造函数是一个特殊的方法,用于创建和初始化类所创建的对象。
且陶陶
2023/10/16
1970
ES6——类(Class)
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。 ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写,就是下面这样。
羊羽shine
2019/07/31
1.1K0
ES6新特性概览
前言 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 标准的制定者有计划,以后每年发布一次标准,使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015,下一年应该会发布小幅修订的ES2016。 废话不多说,直接开始介绍ES6中的新特性,让你一睹新生代JS的风采。
laixiangran
2018/04/11
1.1K0
ES6 主要的新特性
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用。 ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中。要查看ES6的支持情况请点此。 目前想要运行ES6代码的话,可以用go
庞小明
2018/03/09
1.1K0
相关推荐
一万字ES6的class类,再学不懂,请来找我(语法篇)
更多 >
交个朋友
加入云原生工作实战群
云原生落地实践 技术难题攻坚探讨
加入腾讯云技术交流站
洞悉AI新动向 Get大咖技术交流群
加入MCP头号玩家交流群
云原生运维进阶交流 MCP认证经验分享
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档