前端JavaScript中的class類
1、類
類是用于創(chuàng)建對象的模板。JavaScript中生成對象實例的方法是通過構造函數(shù)，這跟主流面向對象語言（java，C# ）寫法上差異較大，如下：
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 1);
ES6 提供了更接近Java語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。
如下：constructor()是構造方法，而this代表實例對象：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
類的數(shù)據(jù)類型就是函數(shù)，它本身就是指向函數(shù)的構造函數(shù)：
// ES5 函數(shù)聲明
function Point() {
//...
}
// ES6 類聲明
class Point {
//....
constructor() {
}
}
typeof Point // "function"
Point === Point.prototype.constructor // true
在類里面定義的方法是掛到Point.prototype，所以類只是提供了語法糖，本質還是原型鏈調用。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
Point.prototype = {
//....
toString()
}
var p = new Point(1, 1);
p.toString() // (1,1)
類的另一種定義方式類表達式
// 未命名/匿名類
let Point = class {
constructor(x, y) {
this.x = x;
this.y = y;
}
};
Point.name // Point
函數(shù)聲明和類聲明有個重要區(qū)別，函數(shù)聲明會提升，類聲明不會提升。
> let p = new Point(); // 被提升不會報錯
> function Point() {}
>
> let p = new Point(); // 報錯，ReferenceError
> class Point {}
>
1.1 constructor()
constructor()方法是類的默認方法，new生成實例對象時會自動調用該方法。
一個類必須有constructor()方法，如果沒有顯式定義，引擎會默認添加一個空的constructor() 。
constructor()方法默認返回實例對象（即this）。
class Point {
}
// 自動添加
class Point {
constructor() {}
}
1.2 getter和setter
與 ES5 一樣，在類的內部可以使用get和set關鍵字，對某個屬性設置存值函數(shù)和取值函數(shù)，攔截該屬性的存取行為。
class User {
constructor(name) {
this.name = name;
}
get name() {
return this.name;
}
set name(value) {
this.name = value;
}
}
1.3 this
類的方法內部的this，它默認指向類的實例，在調用存在this的方法時，需要使用 obj.method()方式，否則會報錯。
class User {
constructor(name) {
this.name = name;
}
printName(){
console.log('Name is ' + this.name)
}
}
const user = new User('jack')
user.printName() // Name is jack
const { printName } = user;
printName() // 報錯 Cannot read properties of undefined (reading 'name')
如果要單獨調用又不報錯，一種方法可以在構造方法里調用bind(this) 。
class User {
constructor(name) {
this.name = name;
this.printName = this.printName.bind(this);
}
printName(){
console.log('Name is ' + this.name)
}
}
const user = new User('jack')
const { printName } = user;
printName() // Name is jack
bind(this) 會創(chuàng)建一個新函數(shù)，并將傳入的this作為該函數(shù)在調用時上下文指向。
另外可以使用箭頭函數(shù)，因為箭頭函數(shù)內部的this總是指向定義時所在的對象。
class User {
constructor(name) {
this.name = name;
}
printName = () => {
console.log('Name is ' + this.name)
}
}
const user = new User('jack')
const { printName } = user;
printName() // Name is jack
1.4 靜態(tài)屬性
靜態(tài)屬性指的是類本身的屬性，而不是定義在實例對象this上的屬性。
class User {
}
User.prop = 1;
User.prop // 1
1.5 靜態(tài)方法
可以在類里面定義靜態(tài)方法，該方法不會被對象實例繼承，而是直接通過類來調用。
靜態(tài)方法里使用this是指向類。
class Utils {
static printInfo() {
this.info();
}
static info() {
console.log('hello');
}
}
Utils.printInfo() // hello
關于方法的調用范圍限制，比如：私有公有，ES6暫時沒有提供，一般是通過約定，比如：在方法前面加下劃線_print()表示私有方法。
2、繼承
Java中通過extends實現(xiàn)類的繼承。ES6中類也可以通過extends實現(xiàn)繼承。
繼承時，子類必須在constructor方法中調用super方法，否則新建實例時會報錯。
class Point3D extends Point {
constructor(x, y, z) {
super(x, y); // 調用父類的constructor(x, y)
this.z = z;
}
toString() {
return super.toString() + ' ' + this.z ; // 調用父類的toString()
}
}
父類的靜態(tài)方法，也會被子類繼承
class Parent {
static info() {
console.log('hello world');
}
}
class Child extends Parent {
}
Child.info() // hello world
2.1 super關鍵字
在子類的構造函數(shù)必須執(zhí)行一次super函數(shù)，它代表了父類的構造函數(shù)。
class Parent {}
class Child extends Parent {
constructor() {
super();
}
}
在子類普通方法中通過super調用父類的方法時，方法內部的this指向當前的子類實例。
class Parent {
constructor() {
this.x = 1;
this.y = 10
}
printParent() {
console.log(this.y);
}
print() {
console.log(this.x);
}
}
class Child extends Parent {
constructor() {
super();
this.x = 2;
}
m() {
super.print();
}
}
let c = new Child();
c.printParent() // 10
c.m() // 2
2.2 _proto_和prototype
初學JavaScript時， _proto_和prototype 很容易混淆。首先我們知道每個JS對象都會對應一個原型對象，并從原型對象繼承屬性和方法。
prototype一些內置對象和函數(shù)的屬性，它是一個指針，指向一個對象，這個對象的用途就是包含所有實例共享的屬性和方法（我們把這個對象叫做原型對象）。_proto_每個對象都有這個屬性，一般指向對應的構造函數(shù)的prototype屬性。
下圖是一些擁有prototype內置對象：
根據(jù)上面描述，看下面代碼
var obj = {} // 等同于 var obj = new Object()
// obj.__proto__指向Object構造函數(shù)的prototype
obj.__proto__ === Object.prototype // true
// obj.toString 調用方法從Object.prototype繼承
obj.toString === obj.__proto__.toString // true
// 數(shù)組
var arr = []
arr.__proto__ === Array.prototype // true
對于function對象，聲明的每個function同時擁有prototype和__proto__屬性，創(chuàng)建的對象屬性__proto__指向函數(shù)prototype，函數(shù)的__proto__又指向內置函數(shù)對象（Function）的prototype。
function Foo(){}
var f = new Foo();
f.__proto__ === Foo.prototype // true
Foo.__proto__ === Function.prototype // true
2.3 繼承中的__proto__
類作為構造函數(shù)的語法糖，也會同時有prototype屬性和__proto__屬性，因此同時存在兩條繼承鏈。
- 子類的
__proto__屬性，表示構造函數(shù)的繼承，總是指向父類。 - 子類prototype屬性的
__proto__屬性，表示方法的繼承，總是指向父類的prototype屬性。
class Parent {
}
class Child extends Parent {
}
Child.__proto__ === Parent // true
Child.prototype.__proto__ === Parent.prototype // true
2.4 繼承實例中的__proto__
子類實例的__proto__屬性，指向子類構造方法的prototype。
子類實例的__proto__屬性的__proto__屬性，指向父類實例的__proto__屬性。也就是說，子類的原型的原型，是父類的原型。
class Parent {
}
class Child extends Parent {
}
var p = new Parent();
var c = new Child();
c.__proto__ === p.__proto__ // false
c.__proto__ === Child.prototype // true
c.__proto__.__proto__ === p.__proto__ // true
3、小結
到此這篇關于前端JavaScript中的class類的文章就介紹到這了,更多相關JavaScript中的class內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JS代理對象Proxy初體驗簡單的數(shù)據(jù)驅動視圖
這篇文章主要為大家介紹了JS代理對象Proxy初體驗簡單的數(shù)據(jù)驅動視圖，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了JS算法題解搜索插入位置方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
JS中的every()對空數(shù)組總返回true原理分析
這篇文章主要為大家介紹了JS中的every()對空數(shù)組總返回true原理分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
自定義range?sliders滑塊實現(xiàn)元素拖動方法
這篇文章主要為大家介紹了自定義range?sliders滑塊實現(xiàn)元素拖動方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序之前臺循環(huán)數(shù)據(jù)綁定的相關資料,這里提供實例幫助大家學習理解這部分內容，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了微信小程序 tabs選項卡效果的實現(xiàn)的相關資料,微信小程序內部組件沒有Tabs 選項卡的功能，自己實現(xiàn)個類似的，需要的朋友可以參考下2017-01-01
這篇文章主要介紹關于前端JavaScript的Promise，Promise 是異步編程的一種解決方案，下面文章我們就來看看Promise的基本用法及各種方法,需要的朋友可以參考一下，希望對你有所幫助2021-10-10
這篇文章主要為大家介紹了JS實現(xiàn)頁面炫酷的時鐘特效示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
mitt tiny-emitter發(fā)布訂閱應用場景源碼解析
這篇文章主要為大家介紹了mitt tiny-emitter發(fā)布訂閱應用場景源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
前端從開發(fā)到部署前都離不開 Webpack 的參與，本文結合了我們自己在開發(fā)中碰到的種種問題解決方案，同時借鑒了很多開源項目的配置來介紹一種用 3 個 JS 文件來配置 Webpack 的方法。2017-09-09