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

发布了57 篇原创文章 · 获赞 43 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_43592352/article/details/104012941
今日推荐