js學(xué)習(xí)筆記之class類、super和extends關(guān)鍵詞
前言
JavaScript 語言在ES6中引入了 class 這一個關(guān)鍵字，在學(xué)習(xí)面試的中，經(jīng)常會遇到面試官問到談一下你對 ES6 中class的認識，同時我們的代碼中如何去使用這個關(guān)鍵字，使用這個關(guān)鍵字需要注意什么，這篇來總結(jié)一下相關(guān)知識點。
正文
1.es6之前創(chuàng)建對象
先來看下es6之前我們要想創(chuàng)建一個對象，只能通過構(gòu)造函數(shù)的方式來創(chuàng)建，將靜態(tài)方法添加在原型上面使得每一個實例能夠調(diào)用該方法。
function Person(name, age) {
this.name = name
this.age = age
Person.prototype.sayHello = function () {
return "hello," + this.name + ",早上好"
}
}
let person = new Person("serendipity", 18)
console.log(person.sayHello())//hello,serendipity,早上好
console.log(person instanceof Person);//true
console.log(person instanceof Object);//true
2.es6之后class的聲明
類是用于創(chuàng)建對象的模板，他們用代碼封裝數(shù)據(jù)以處理該數(shù)據(jù)。js中的 class 類建立在原型之上，但也具有某些語法和語義與ES5類相似語義共享。
實際上，類是一種特殊的函數(shù)，就像定義函數(shù)聲明和函數(shù)表達式一樣，類的語法也有兩個部分組成：類聲明和類表達式。
class Person {
constructor(name, age) {//自有屬性，該屬性出現(xiàn)在實例上，只能在類的構(gòu)造器或者方法內(nèi)部進行創(chuàng)建
this.name = name
this.age = age
}
sayHello() {//等價于Perosn.prototype.sayHello
return `hello,${this.name},早上好`
}
}
let person = new Person("serendipity", 18)
console.log(person.sayHello());//hello,serendipity,早上好
console.log(person instanceof Person);//true
console.log(person instanceof Object);//true
console.log(typeof Person);//function
console.log(typeof Person.prototype.sayHello);//function
類聲明允許在class中使用 constructor 方法定義一個構(gòu)造器，而不需要定義專門的構(gòu)造方法來當(dāng)構(gòu)造器使用。
class 類的語法與普通es5之前的函數(shù)語法相似，但是還存在一些特性需要注意：
?。?）類的聲明不會被提升，類的聲明行為和 let 相似，因此執(zhí)行時類會存在暫時性死區(qū)；
?。?）類中所有代碼自動運行在嚴格模式下，且改嚴格模式無法退出
?。?） 類中所有方法都是不可枚舉的，普通自定義方法只有通過 object.defineProperty() 才能將方法定義為不可枚舉
?。?）類中的所有方法內(nèi)部都沒有 [[construct]] ，因此使用new 來調(diào)用他們會拋出錯誤
（5）調(diào)用類構(gòu)造器時不使用 new 會拋出錯誤
?。?）試圖在類的方法內(nèi)部重寫類名會拋出錯誤
將上面的代碼轉(zhuǎn)換為ES5之前的寫法如下：
let PersonClass = (function () {
"use strict"
const PersonClass = function (name, age) {
// 判斷是否被new調(diào)用構(gòu)造函數(shù)
if (typeof new.target === "undefined") {
throw new Error("Constructor must be call with new.")
}
this.name = name
this.age = age
}
Object.defineProperty(PersonClass.prototype, "sayHello", {
value: function () {
if (typeof new.target !== "undefined") {//保正調(diào)用時沒有使用new
throw new Error("Method cannot be called with new.")
}
return "hello," + this.name + ",早上好！"
},
enumerable: false,
configurable: true,
writable: true
})
return PersonClass
})()
var personClass = new PersonClass("serendipity", 18)
console.log(personClass.name);//serendipity
console.log(personClass.sayHello());///hello,serendipity,早上好！
兩個PersonClass 聲明，一個在外部作用域的 let 聲明，另一個在立即執(zhí)行函數(shù)內(nèi)部的 const 聲明，這就是為何類的方法不能對類名進行重寫，而類的外部的代碼則被允許。同時，只在類的內(nèi)部類名才被視為使用了const聲明，這意味著你可以在外部（相當(dāng)于let）重寫類名，但是不能在類的方法內(nèi)部這么寫。
3.類的繼承
ES6之前的繼承方式主要通過構(gòu)造函數(shù)和原型鏈組合的方式來實現(xiàn)繼承，具體代碼如下：
function Rectangle(length, width) {
this.length = length
this.width = width
Rectangle.prototype.getArea = function () {
return this.length * this.width
}
}
function Square(length) {
Rectangle.call(this, length, length)
}
Square.prototype = Object.create(Rectangle.prototype, {
constructor: {
value: Square,
enumerble: true,
writeable: true,
configurable: true
}
})
var square = new Square(3)
console.log(square.getArea());//9
console.log(square instanceof Square);//true
console.log(square instanceof Rectangle);//true
上面的代碼通過構(gòu)造函數(shù)和原型上面添加靜態(tài)方法實現(xiàn)了 Rectangle 父類，然后子類 Square 通過 Rectangle.call(this，length，length) 調(diào)用了父類的構(gòu)造函數(shù)，Object.create 會在內(nèi)部創(chuàng)建一個空對象來連接兩個原型對象，再手動將 constructor 指向自身。這種方法實現(xiàn)繼承代碼繁雜且不利用理解，于是ES6 class 類的創(chuàng)建讓繼承變得更加簡單，使用extends 關(guān)鍵字來指定當(dāng)前類所需要繼承的父類，生成的類的原型會自動調(diào)整，還可以使用 super() 方法來訪問基類的構(gòu)造器。具體代碼如下：
class Rectangle {
constructor(length, width) {
this.length = length
this.width = width
}
getArea() {
return this.length * this.width
}
}
class Square extends Rectangle {
constructor(length) {
super(length, length)
}
getArea() {
return this.length + this.length
}
}
var square = new Square(3)
console.log(square.getArea());//6
console.log(square instanceof Square);//true
console.log(square instanceof Rectangle);//true
上面的代碼中 Square 類重寫了基類的 getArea() 方法，當(dāng)派生的子類中函數(shù)名和基類中函數(shù)同名的時候，派生類的方法會屏蔽基類的方法，同時也可以再子類中g(shù)etArea () { return super.getArea() }中調(diào)用基類的方法進行擴展。
4.繼承類的靜態(tài)成員
靜態(tài)成員：直接在構(gòu)造器上添加的額外的方法。例如ES5中在原型上添加的方法就屬于靜態(tài)成員，ES6 class類引入簡化了靜態(tài)成員的創(chuàng)建，只需要在方法與訪問器屬性的名稱前添加 static關(guān)鍵字即可。例如下面的代碼用于區(qū)分靜態(tài)方法和實例方法。
function PersonType(name) {
this.name = name;
}
// 靜態(tài)方法
PersonType.create = function(name) {
return new PersonType(name);
};
// 實例方法
PersonType.prototype.sayName = function() {
console.log(this.name);
}; var person = PersonType.create("Nicholas");
在ES6中要想使用靜態(tài)成員如下：
class Rectangle {
constructor(length ,width) {
this.length = length
this.width = width
}
getArea() {
return this.length * this.width
}
static create(length,width) {
return new Rectangle(length , width)
}
}
class Square extends Rectangle{
constructor (length){
super(length,length)
}
}
var square =Square.create(3,4)
console.log(square.getArea());//12
console.log(square instanceof Square);//false
console.log(square instanceof Rectangle);//true
上面的代碼中，一個新的靜態(tài)方法 create() 被添加到 Rectangle 類中，通過繼承，以Square.create() 的形式存在，并且其行為方式與Rectangle.create() 一樣。需要注意靜態(tài)成員不懂通過實例來訪問，始終需要直接調(diào)用類自身來訪問他們。
寫在最后
以上就是本文的全部內(nèi)容，希望給讀者帶來些許的幫助和進步，方便的話點個關(guān)注，小白的成長踩坑之路會持續(xù)更新一些工作中常見的問題和技術(shù)點。
相關(guān)文章
這篇文章主要為大家詳細介紹了bootstrap table表格使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了p5.js臨摹旋轉(zhuǎn)愛心，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
本文介紹了如何使用JavaScript對象添加屬性和方法,通過實例演示了如何給對象添加屬性,以及如何在對象中定義方法,具有一定的參考價值,感興趣的可以了解一下2023-08-08
用ADODB.Stream轉(zhuǎn)換...2007-01-01
這篇文章主要介紹了JavaScript如何向頁面中添加一個按鈕,使用兩種方式向頁面中添加一個按鈕,分別是appendChild()和innerHTML屬性,本文結(jié)合示例代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
很多情況下，需要用到隨機數(shù)，腳本之家特為大家整理了一些具體的使用與說明。2010-08-08
BootStrap初學(xué)者對彈出框和進度條的使用感覺
這篇文章主要介紹了BootStrap初學(xué)者對彈出框和進度條的使用感覺的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
（兼容ff/ie）td點擊背景變色特效...2007-08-08
這篇文章主要介紹了如何實現(xiàn)小程序tab欄下劃線動畫效果,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Javascript運行機制之Event Loop，在學(xué)習(xí)Event Loop前，首先需要了解的幾個概念Javascript是單線程、任務(wù)隊列、同步任務(wù)、異步任務(wù)、Javascript執(zhí)行棧，下面來看看文章的詳細介紹吧2021-12-12