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

10年積累的網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有獨(dú)山子免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

在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ù)作用域，類是塊級(jí)作用域，類中的方法，都是定義在類的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)類方法，但這些都不是必需的?？盏念惗x照樣有效。

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í)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章標(biāo)題：javascript中有沒有類
本文網(wǎng)址：http://aaarwkj.com/article24/goocje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、小程序開發(fā)、微信公眾號(hào)、Google、搜索引擎優(yōu)化、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)