【ES6】JS类的用法class

简介: 【ES6】JS类的用法class
引言:由于JS之前一直没有特有的class来定义类的语法,ES6把其纳入规范。并且,由于一些JS特性,JS的class也有一些特性。

一、概述


JavaScript语言的传统方法是通过构造函数定义并生成新对象。下面是一个例子。

  function Point(x,y){
    this.x = x;
    this.y = y;
  }
  Point.prototype.toString = function () {
    return '(' + this.x + ',' + this.y + ')';
  }

 上面这种写法跟传统的面向对象语言(比如C++和Java)差异很大,很容易让新学习这门语言的程序员感到困惑。   ES6提供了更接近传统语言的写法,引入了Class (类)这个概念作为对象的模板。通过class关键字可以定义类。基本上,ES6 中的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰,更像面向对象编程的语法而已。上面的代码用ES6的“类”改写,就是下面这样。

//定义类
class Point {
  constructor(x, y) {//构造方法
    this.x = x;
    this.y = y;
  }
  toString() {
    return (' + this.x + ','+ this.y +')';
  }
}

二、构造函数constructor


 constructor方法是类的默认方法,通过new命令生成对象实例时自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

值得注意的是,在Java与C++中,构造函数是原本的类名,JS的类构造函数得用constructor。

三、静态方法与静态变量


 再介绍一下静态方法与静态变量。简而言之,它们属于类的属性,并不属于类的实例的属性。静态方法或静态变量前加static关键字。

class me {
  static this.x=1;
  static getGet(){
    console.log("get!");
  }
}
var me1= new me();
me.x; // 1
me1.x; //TypeError

查看更多ES6教学文章:


1. 【ES6】let与const 详解

2. 【ES6】变量的解构赋值

3. 【ES6】字符串的拓展

4. 【ES6】正则表达式的拓展

5. 【ES6】数值的拓展

6. 【ES6】数组的拓展

7. 【ES6】函数的拓展

8. 【ES6】对象的拓展

9. 【ES6】JS第7种数据类型:Symbol

10. 【ES6】Proxy对象

11. 【ES6】JS的Set和Map数据结构

12. 【ES6】Generator函数详解

13. 【ES6】Promise对象详解

14. 【ES6】异步操作和async函数

15. 【ES6】JS类的用法class

16. 【ES6】Module模块详解

17. 【ES6】ES6编程规范 编程风格

参考文献


阮一峰 《ES6标准入门(第2版)》

相关文章
|
6天前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
13 3
|
17天前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
16 4
|
17天前
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
11 1
|
22天前
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
21 6
|
22天前
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
109 4
|
21天前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
18 1
|
24天前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
15 1
|
2月前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
42 9
|
2月前
|
JavaScript 前端开发
JavaScript用法
JavaScript用法
|
21天前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
43 0