【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版)》

相关文章
|
11天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承通过原型链实现共享,节省内存,但不支持私有属性。
19 0
|
11天前
|
JavaScript
JS中Null和Undefined的区别及用法
JS中Null和Undefined的区别及用法
17 1
|
11天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
23 2
|
5天前
|
JavaScript 前端开发
Symbol在JavaScript中有哪些具体的用法和语法
Symbol在JavaScript中有哪些具体的用法和语法
|
6天前
|
前端开发 JavaScript
前端 JS 经典:for-in 和 for-of 用法区别
前端 JS 经典:for-in 和 for-of 用法区别
13 0
|
9天前
|
JavaScript 前端开发
前端 JS 经典:ES6 和 CommonJs 用法
前端 JS 经典:ES6 和 CommonJs 用法
13 0
|
9天前
|
前端开发 JavaScript
前端 JS 经典:Class 面向对象
前端 JS 经典:Class 面向对象
11 1
|
9天前
|
前端开发 JavaScript
前端 js 经典:class 类
前端 js 经典:class 类
7 2
|
11天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
17 0
|
11天前
|
JavaScript 前端开发
JavaScript 用法
【5月更文挑战第1天】JavaScript 用法。
17 3