javascript中有沒有類

本篇內容主要講解“javascript中有沒有類”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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中有沒有類”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！