ES6 Class 类语法详解：constructor、原型与静态成员

类的基本语法

ES6 引入了 Class（类）这一概念，作为对象的模板，其写法更贴近传统的面向对象语言（需注意 JavaScript 本质上是基于对象的语言）。Class 关键字用于定义类。本质上，ES6 的 Class 只是语法糖，其核心功能在 ES5 中均可实现，新语法旨在使对象原型的写法更清晰，更符合面向对象编程的语法习惯。


//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
//创建对象
let p = new Point(1,2);
console.log(p.toString());

上述代码定义了一个类，其中包含 constructor 方法，即构造方法，this 关键字代表实例对象。ES5 中的构造函数 Point 对应 ES6 中 Point 类的构造方法。

Point 类除了构造方法外，还定义了 toString 方法。在类中定义方法时，无需添加 function 关键字，直接将函数定义放入即可。此外，方法之间不需要使用逗号分隔，若添加逗号会导致报错。

生成类的实例对象时必须使用 new 命令。如果省略 new 直接像调用 ES5 函数那样调用 Class，程序将报错。


// 报错
let point = Point(2,3);
// 正确
let point = new Point(2,3);

constructor方法

constructor 是类的默认方法，通过 new 命令生成实例时会自动调用。类中必须包含 constructor 方法，若未显式定义，系统将默认添加一个空的 constructor 方法。


constructor() {}

注意：constructor 方法默认返回实例对象（即 this）。

扩展：虽然 constructor 默认返回实例对象（this），但也可以指定返回其他对象。

样例代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			class Point {
			  constructor() {
			    return new Date();
			    //return Object.create(null);
			  }
			}
			let p = new Point();  //返回为Date对象
			console.log(p);
			
		</script>
	</body>
</html>

效果截图：

类的基本语法

Constructor 与普通构造函数的区别在于：类的构造函数若不使用 new 调用，会直接报错，这是其与普通构造函数的主要区别，后者无需 new 即可执行。


class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
let p = Point(); //TypeError: Class constructor Point cannot be invoked without 'new'

this与class（原型）

Class 代表类的模板（或称原型），this 代表当前对象。这些定义与 Java 中的概念一致。但由于 JavaScript 的语言特性，关于 class 和 this 的关系需进一步说明。

注意：在 JavaScript 中，定义类之后仍可继续添加属性和方法。

属性与方法添加到this上


class Point {
  constructor() { }
}
let p = new Point();
p.username = 'zhangsan';
console.log(p.username);  //zhangsan

上述代码中，在 Point 类定义后，为对象 p 添加了 username 属性。这种方式完全可行，但需注意：这仅是给对象 p 添加属性，而非给类本身添加属性。换言之，这是给对象 p 的 this 添加属性，而不是给类添加属性。


class Point {
  constructor() { }
}
let p1 = new Point();
p1.username = 'zhangsan';
console.log(p1.username);  //zhangsan

let p2 = new Point();
console.log(p2.username);  //undefined

上述示例中，仅给对象 p1 添加了 username 属性，未给类添加属性。因此，p2 对象中并不包含 username 属性。

属性与方法添加到类上


class Point {
  constructor() { }
}
Point.prototype.username = 'zhangsan';

let p1 = new Point();
console.log(p1.username);  //zhangsan

let p2 = new Point();
console.log(p2.username);  //zhangsan

上述代码中，使用 Point.prototype 方式为类添加属性。这样，类的所有对象（p1、p2）都将拥有 username 属性。

在 JavaScript 中，每个类都有一个 prototype，即类的原型，所有实例共享该原型。若要访问此原型，可使用 __proto__ 指针。

样例代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			class Point {
			 constructor() { }
			}
			let p = new Point();
			console.log(p.__proto__);   //注意proto指针的写法
			/**
			 * 输出结果：
			 * {constructor: ƒ}
			 * constructor: class Point //这里证明：proto指针指向类的原型
			 * __proto__: Object
			 */
			
			
			
			let p1 = new Point();
			let p2 = new Point(); 
			//这里证明：类的所有实例共享一个原型 
			console.log(p1.__proto__===p2.__proto__); //true
		</script>
	</body>
</html>

效果截图：

类的基本语法

类的静态成员

样例代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			class Point {
			  constructor() { }
			}
			Point.username = '牛哄哄的柯南';
			
			let p = new Point();
			console.log(p.username);    //undefined
			console.log(Point.username);  //牛哄哄的柯南
		</script>
	</body>
</html>

效果截图：

类的基本语法

上述代码中，直接使用 Point.username 方式为类添加属性，这种方式仅添加静态属性，访问时必须通过类名进行。

到此这篇关于 ES6 中类（Class）的文章就介绍到这了，更多相关 ES6 的类（Class）内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

ES6 Class 类语法详解：从基础定义到静态成员

类的基本语法

constructor方法

this与class（原型）

属性与方法添加到类上

类的静态成员

实用工具推荐