javascript 沒有類別嗎

在ECMAScript6規格之前，JavaScript沒有類別的概念，只允許透過建構函式來模擬類別，透過原型實作繼承。而ECMAScript6後，可以使用class關鍵字來定義類，使用class關鍵字定義類別的寫法比較清晰，比較像是物件導向的語法。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

JavaScript 是基於對象，但不完全物件導向的程式語言。在 JS 物件導向的程式模式中，有兩個核心概念： 物件和類別。在 ECMAScript6 規範之前，JavaScript 沒有類別的概念，僅允許透過建構函數來模擬類別，透過原型實現繼承。

在ES6中新增了class關鍵字用來定義類，使用class關鍵字定義類別的寫法比較清晰，比較像物件導向的語法。但是可以看成是語法糖，因為它還是建構子和原型的概念。

1 類別宣告

定義類別有2中方式，類別宣告與類別運算式：

// 类声明
class Student {}
// 类表达式
const Student = class {}

2 為什麼說它是語法糖

因為類別其實它是一個function，差別在於建構子是函數作用域，類別是塊級作用域，類別中的方法，都是定義在類別的prototype上面，所以文章一開始說它還是建構子和原型的概念：

class Student {
	take() {}
}
const a = new Student()
console.log(typeof Student)	// function
console.log(a.take === Student.prototype.take) // true

// 同等于
function Student() {}
Student.prototype.take = function() {}
const a = new Student()
console.log(typeof Student)	// function
console.log(a.take === Student.prototype.take) // true

3 類別包含的屬性和方法

類別可以包含建構子方法、實例方法、取得函數、設定函數和靜態類別方法，但這些都不是必要的。空的類別定義照樣有效。

class Student {
	// 实例属性 也可以放在这
	// b = 1
	// 静态属性
	static a = 1
	// 构造函数
	constructor() {
		// 实例属性 - 也可以放在类的最顶层
		this.b = 1
	}
	// 获取函数
	get myName() {}
	// 设置函数
	set myName() {}
	// 静态方法 不会被实例继承
	static show() {}
	// 方法
	take() {}
	// 私有方法
	_take() {}
}

3.1 類別的建構子

#類別的建構子關鍵字是constructor，它同等於原型中的prototype.constructor。
如果沒有寫constructor函數，那麼會預設有一個空的constructor函數。

class A {
	constructor() {
		this.name = '小明'
	}
}
const b = new A()
b.constructor === A.prototype.constructor // true

當使用new操作符建立實例時，會呼叫constructor建構子。

3.2 類別的方法

class Student {
	// 方法
	take() {}
}

3.3 類別的靜態方法

#跟類別的方法一樣，只不過前面加上static關鍵字。
靜態方法不會被實例繼承。
父類別的靜態方法可以被子類別繼承。

class A {
	// 静态方法
	static show() {
		console.log('hi')
	}
}
class B extends A {}
const c = new A()
c.show() // c.show is not a function
B.show() // hi

3.4 類別的私有方法

#es6中並沒有提供這個方法，但通常都是在方法前面加上底線來表示。

class A {
	// 私有方法
	_show() {
    	console.log('hi')
  	}
}

3.5 取值函數（getter）和存值函數（setter）

在類別中有set和get關鍵字，可以對某個屬性設定存值和取值函數，攔截它的存取行為。

class A {
  constructor () {
    this.name = '小米'
  }
  get name () {
    return 'get'
  }
  set name (val) {
    console.log('set' + val)
  }
}
const b = new A()
b.name // get
b.name = 123 // set123

4 類別的繼承

4.1 透過extends實作繼承

類別的繼承通過extends關鍵字。

class A {
	// 静态方法
	static show() {
    console.log('hi')
  }
}
class B extends A {}

4.2 super方法

#注意如果子類別如果沒寫constructor建構函數，則會預設有constructor建構子和super方法，但是如果顯性的寫了constructor建構函數，那麼必須在子類別的建構函式中加入super方法，加入之後會呼叫父類別的建構子並得到父類別的屬性和方法，如果沒有加入super方法則會報ReferenceError錯誤。

class A {
  constructor () {
    this.name = '小米'
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
  	super() // 如果不写super，则会报ReferenceError错误
  }
}
const c = new B()

super方法中也可以傳參

class A {
  constructor (name) {
    this.name = name
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
    super('小红')
  }
}
const c = new B()
c.name // 小红

5 其他

5.1 方法中的this指向

類別的方法中如果有this，那麼它指向的是類別的實例。但是如果將它單獨拿出來使用那麼會報錯。

class A {
  constructor () {
    this.name = '小米'
  }
  show () {
    console.log(this.name)
  }
}
const b = new A()
b.show() // 小米
const { show } = b // Cannot read property 'name' of undefined

解決方法有2種:

1、在建構子中綁定this

class A {
  constructor () {
    this.name = '小米'
    this.show = this.show.bind(this)
  }
  show () {
    console.log(this.name)
  }
}

2、使用箭頭函數

class A {
  constructor () {
    this.name = '小米'
    this.show = () => this
  }
  show () {
    console.log(this.name)
  }
}

#5.2 區分是否繼承了這個類別

區分是否繼承了這個類別使用Object.getPrototypeOf函數。

class A {
  constructor () {
    this.name = '小米'
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
    super()
  }
}
class C {}
Object.getPrototypeOf(B) === A // true 是继承的A类
Object.getPrototypeOf(B) === C // false 没有继承C类

【推薦學習：javascript進階教學】

以上是javascript 沒有類別嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！