類的基本語法

ES6提供了更接近面向物件（注意：javascript本質上是基于物件的語言）語言的寫法，引入了Class（類）這個概念，作為物件的模板，通過class關鍵字，可以定義類，基本上，ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓物件原型的寫法更加清晰、更像面向物件編程的語法而已，

//定義類
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 方式給類添加一個屬性，此種方式只是添加了一個靜態屬性，訪問時，只能通過類名才能訪問，

看完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看到右下角的 “一鍵三連” 了嗎，沒錯點它[哈哈]
在這里插入圖片描述
加油！

共同努力！

Keafmd

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/229162.html

標籤：java

上一篇：使用java來實作一個簡單的計算器

下一篇：水仙花數的判斷（JAVA）