ES6中的類（Class）示例詳解

更新時間：2020年12月09日 09:05:14 作者：牛哄哄的柯南

這篇文章主要給大家介紹了關于ES6中類（Class）的相關資料，文中介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

類的基本語法

ES6提供了更接近面向?qū)ο螅ㄗ⒁猓簀avascript本質(zhì)上是基于對象的語言）語言的寫法，引入了Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。基本上，ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。

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

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
//創(chuàng)建對象
let p = new Point(1,2);
console.log(p.toString());

上面代碼定義了一個“類”，可以看到里面有一個constructor方法，這就是構(gòu)造方法，而this關鍵字則代表實例對象。也就是說，ES5的構(gòu)造函數(shù)Point，對應ES6的Point類的構(gòu)造方法。

Point類除了構(gòu)造方法，還定義了一個toString方法。注意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函數(shù)定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。

注意：生成類的實例對象的寫法，要使用new命令。如果忘記加上new，像ES5函數(shù)那樣調(diào)用Class，將會報錯。

// 報錯
let point = Point(2,3);
// 正確
let point = new Point(2,3);

constructor方法

constructor方法是類的默認方法，通過new命令生成對象實例時，自動調(diào)用該方法。一個類必須有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與普通構(gòu)造函數(shù)的區(qū)別：類的構(gòu)造函數(shù)，不使用new是沒法調(diào)用的，會報錯。這是它跟普通構(gòu)造函數(shù)的一個主要區(qū)別，后者不用new也可以執(zhí)行。

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指針的寫法
			/**
			 * 輸出結(jié)果：
			 * {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>

效果截圖：

類的靜態(tài)成員

樣例代碼：

<!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>

效果截圖：