javascript中有沒有類

本篇內(nèi)容主要講解“javascript中有沒有類”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“javascript中有沒有類”吧!

在ECMAScript6規(guī)范之前，JavaScript沒有類的概念，僅允許通過構(gòu)造函數(shù)來模擬類，通過原型實(shí)現(xiàn)繼承。而ECMAScript6后，可以使用class關(guān)鍵字來定義類，使用class關(guān)鍵字定義類的寫法更加清晰，更像面向?qū)ο蟮恼Z法。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

JavaScript 是基于對象，但不完全面向?qū)ο蟮木幊陶Z言。在 JS 面向?qū)ο蟮木幊棠Ｊ街校袃蓚€(gè)核心概念： 對象和類。在 ECMAScript6 規(guī)范之前，JavaScript 沒有類的概念，僅允許通過構(gòu)造函數(shù)來模擬類，通過原型實(shí)現(xiàn)繼承。

在ES6中新增了class關(guān)鍵字用來定義類，使用class關(guān)鍵字定義類的寫法更加清晰，更像面向?qū)ο蟮恼Z法。但是可以看作是語法糖，因?yàn)樗€是構(gòu)造函數(shù)和原型的概念。

1 類聲明

定義類有2中方式，類聲明和類表達(dá)式：

// 類聲明
class Student {}
// 類表達(dá)式
const Student = class {}

2 為什么說它是語法糖

因?yàn)轭悓?shí)際上它是一個(gè)function，區(qū)別在于構(gòu)造函數(shù)是函數(shù)作用域，類是塊級作用域，類中的方法，都是定義在類的prototype上面，所以文章開頭說它還是構(gòu)造函數(shù)和原型的概念：

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 類包含的屬性和方法

類可以包含構(gòu)造函數(shù)方法、實(shí)例方法、獲取函數(shù)、設(shè)置函數(shù)和靜態(tài)類方法，但這些都不是必需的。空的類定義照樣有效。

class Student {
	// 實(shí)例屬性 也可以放在這
	// b = 1
	// 靜態(tài)屬性
	static a = 1
	// 構(gòu)造函數(shù)
	constructor() {
		// 實(shí)例屬性 - 也可以放在類的最頂層
		this.b = 1
	}
	// 獲取函數(shù)
	get myName() {}
	// 設(shè)置函數(shù)
	set myName() {}
	// 靜態(tài)方法 不會(huì)被實(shí)例繼承
	static show() {}
	// 方法
	take() {}
	// 私有方法
	_take() {}
}

3.1 類的構(gòu)造函數(shù)

類的構(gòu)造函數(shù)關(guān)鍵字是constructor，它同等于原型中的prototype.constructor。
如果沒有寫constructor函數(shù)，那么會(huì)默認(rèn)有一個(gè)空的constructor函數(shù)。

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

當(dāng)使用new操作符創(chuàng)建實(shí)例時(shí)，會(huì)調(diào)用constructor構(gòu)造函數(shù)。

3.2 類的方法

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

3.3 類的靜態(tài)方法

跟類的方法一樣，只不過前面加上static關(guān)鍵字。
靜態(tài)方法不會(huì)被實(shí)例繼承。
父類的靜態(tài)方法可以被子類繼承。

class A {
	// 靜態(tài)方法
	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中沒有提供這個(gè)方法，但是通常都是在方法前面加上下劃線來表示。

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

3.5 取值函數(shù)（getter）和存值函數(shù)（setter）

在類中有set和get關(guān)鍵詞，可以對某個(gè)屬性設(shè)置存值和取值函數(shù)，攔截它的存取行為。

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實(shí)現(xiàn)繼承

類的繼承通過extends關(guān)鍵字。

class A {
	// 靜態(tài)方法
	static show() {
    console.log('hi')
  }
}
class B extends A {}

4.2 super方法

注意如果子類如果沒寫constructor構(gòu)造函數(shù)，則會(huì)默認(rèn)有constructor構(gòu)造函數(shù)和super方法，但是如果顯性的寫了constructor構(gòu)造函數(shù)，那么必須在子類的構(gòu)造函數(shù)中添加super方法，添加之后會(huì)調(diào)用父類的構(gòu)造函數(shù)并得到父類的屬性和方法，如果沒有添加super方法則會(huì)報(bào)ReferenceError錯(cuò)誤。

class A {
  constructor () {
    this.name = '小米'
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
  	super() // 如果不寫super，則會(huì)報(bào)ReferenceError錯(cuò)誤
  }
}
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，那么它指向的是類的實(shí)例。但是如果將它單獨(dú)拿出來使用那么會(huì)報(bào)錯(cuò)。

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、在構(gòu)造函數(shù)中綁定this

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

2、使用箭頭函數(shù)

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

5.2 區(qū)分是否繼承了這個(gè)類

區(qū)分是否繼承了這個(gè)類使用Object.getPrototypeOf函數(shù)。

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中有沒有類”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！