快捷導(dǎo)航

ES6中的類（Class）示例詳解

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

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

類的基本語(yǔ)法

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

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

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

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

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

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

// 報(bào)錯(cuò)
let point = Point(2,3);
// 正確
let point = new Point(2,3);

constructor方法

constructor方法是類的默認(rèn)方法，通過new命令生成對(duì)象實(shí)例時(shí)，自動(dòng)調(diào)用該方法。一個(gè)類必須有constructor方法，如果沒有顯式定義，一個(gè)空的constructor方法會(huì)被默認(rèn)添加。

constructor() {}

注意：constructor方法默認(rèn)返回實(shí)例對(duì)象（即this）

擴(kuò)展：constructor方法默認(rèn)返回實(shí)例對(duì)象（即this），但也可以指定返回另外一個(gè)對(duì)象。

樣例代碼：

<!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對(duì)象
			console.log(p);
			
		</script>
	</body>
</html>

效果截圖：

Constructor與普通構(gòu)造函數(shù)的區(qū)別：類的構(gòu)造函數(shù)，不使用new是沒法調(diào)用的，會(huì)報(bào)錯(cuò)。這是它跟普通構(gòu)造函數(shù)的一個(gè)主要區(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：類，是對(duì)象的模板。（或者叫：原型） this：當(dāng)前對(duì)象。以上定義，與java中的概念是相同的。但是，由于javascript語(yǔ)言自身的特點(diǎn)，關(guān)于class與this，還需要做進(jìn)一步說明。

注意：在javascript中，在定義類完畢之后，還可以再添加屬性和方法。

屬性與方法添加到this上

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

上面代碼中，Point類定義之后，給對(duì)象 p 又添加了一個(gè)username屬性。這是完全可以的。但是要注意：此種方式，僅僅是給對(duì)象p添加一個(gè)屬性，而不是給類添加一個(gè)屬性。或者說：此種方式，僅僅是給對(duì)象p的this添加一個(gè)屬性，而不是給類添加一個(gè)屬性。

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

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

上面例子中，只給對(duì)象p1添加了username屬性，但沒有給類添加屬性。所以，p2對(duì)象中并沒有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方式，給類添加屬性。這樣，類的所有對(duì)象（p1、p2）就都有username屬性了。

在javascript中，每一個(gè)類都有一個(gè)prototype，它就是類的原型，類的所有實(shí)例共享一個(gè)原型。如果想訪問這個(gè)原型，可以使用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(); 
			//這里證明：類的所有實(shí)例共享一個(gè)原型 
			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>

效果截圖：