【基礎認知】

1、構造器中的this指向——類的實例對象

2、類中的構造器不是必須寫的，要對實例進行一些初始化的操作，如添加指定屬性時才寫。

3、如果A類繼承了B類，且A類中寫了構造器，那么A類構造器中的super時必須要調用的。

4、類中鎖定的方法，都是放在了類的原型對象上，供實例去使用

class類的基礎使用

（靜態屬性，只能構造函數訪問）

（公有屬性，寫在構造函數.prototype）

? (實例屬性，定義在實例對象this上的屬性)

// 手機// 實例成員只能通過實例化對象來訪問// function Phone(brand, price) {// this.brand = brand// this.price = price// }// 添加方法// Phone.prototype.call = function () {// console.log('我可以打電話！！')// }// 實例化對象// let Huawei = new Phone('華為', 5999);// Huawei.call();// console.log(Huawei);class Phone {// 構造方法 名字不能修改constructor(brand, prive) {this.brand = brand;this.price = prive;}// 方法必須使用該語法，不能使用ES5的對象完整形式call() {console.log('我可以打電話！！！')}}let onePlus = new Phone('1+', 1999)onePlus.call()console.log(onePlus)

class靜態成員

function Phone() {}// 靜態成員，屬于類不屬于實例對象// 靜態成員只能通過構造函數來訪問Phone.name = '手機'Phone.change = function () {console.log('我可以改變世界')}Phone.prototype.size = '5.5inch'let nokia = new Phone()console.log(nokia.size)//5.5inchconsole.log(nokia.name)// undefinednokia.change()// 報錯說不是一個函數class Phone1 {// 靜態屬性static name = '手機';static change() {console.log('我可以改變世界')}}let aaa = new Phone1();console.log(Phone1.name)//手機console.log(aaa.name)// undefined

構造函數繼承

// 手機function Phone(brand, price) {this.brand = brandthis.price = price}Phone.prototype.call = function () {console.log('我可以打電話')}// 智能手機function SmartPhone(brand, price, color, size) {Phone.call(this, brand, price);this.color = colorthis.size = size}// 設置子集構造函數的原型SmartPhone.prototype = new Phone;SmartPhone.prototype.constructor = SmartPhone;// 聲明子類的方法SmartPhone.prototype.photo = function () {console.log('我可以拍照')}SmartPhone.prototype.playGame = function () {console.log('我可以玩游戲')}const chuizi = new SmartPhone('錘子', 2499, '黑色', '5.5inch');console.log(chuizi)chuizi.photo()chuizi.playGame()

類的函數繼承

// 手機class Phone {constructor(brand, price) {this.brand = brand;this.price = price;}call() {console.log('我可以電話')}}// 智能手機class SmartPhone extends Phone {constructor(brand, price, color, size) {//super之前調用this會報錯super(brand, price);this.color = color;this.size = size;}photo() {console.log('我可以拍照')}palyGame() {console.log('我可以玩游戲')}}let chuizi = new SmartPhone('錘子', 2999, '黑色', '5.5inch')console.log(chuizi)chuizi.call() //容易出錯的地方 忘記寫extends， 構造函數中的形參， super()

super 這個關鍵字，既可以當作函數使用，也可以當作對象使用。在這兩種情況下，它的用法完全不同。

函數：
子類B的構造函數之中的super()，代表調用父類的構造函數。 super雖然代表了父類A的構造函數，但是返回的是子類B的實例，即super內部的this指的是B，因此super()在這里相當于A.prototype.constructor.call(this)。
對象：
在普通方法中，指向父類的原型對象；在靜態方法中，指向父類。由于super指向父類的原型對象，所以定義在父類實例上的方法或屬性，是無法通過super調用的。
class 作為構造函數的語法糖，同時有 prototype屬性和__proto__屬性，因此同時存在兩條繼承鏈。

類的get 和set

// get 和 setclass Phone {get price() {console.log('價格屬性被讀取了');return 'iloveyou'}set prive(newVal) {// 必須要設置一個參數，不然報錯console.log('價格屬性被修改了')}}// 實例化對象let s = new Phone();// console.log(s.price)s.prive = 'free'// 類似于vue的watch和computed

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的class 类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。