目錄
一、class簡介
二、靜態方法和靜態屬性
三、class繼承extends
四、class的取值函數getter和存值函數setter
 五、注意事項:
首頁 web前端 前端問答 class是es5還是es6

class是es5還是es6

Nov 16, 2022 pm 07:28 PM
es6 class

class是es6新特性。在ES6中,class(類別)作為物件的模板被引入,可以透過class關鍵字定義類別;新的class寫法讓物件原型的寫法更加清晰、更像物件導向程式設計的語法,也更加通俗易懂。類別(class)是ECMAScript中新的基礎語法糖結構,雖然ES6類別表面上看起來可以支援正式的物件導向編程,但實際上它背後使用的仍然是原型和建構函數的概念,讓物件原型的寫法更加清晰、

class是es5還是es6

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

class是es6新特性。在ES6中,class (類別)作為物件的模板被引入,可以透過 class 關鍵字定義類別。

ES6 提供了更接近傳統語言的寫法,新引入的class關鍵字具有正式定義類別的能力。類別(class)是ECMAScript中新的基礎語法糖結構,雖然ECMAScript 6類別表面上看起來可以支援正式的物件導向編程,但實際上它背後使用的仍然是原型和構造函數的概念,讓物件原型的寫法更加清晰、更像物件導向程式設計的語法。

一、class簡介

傳統的JS只有物件的概念,沒有class類別的概念,因為JS是基於原型的物件導向語言,原型物件特點就是將屬性全部共享給新物件。

ES6引入了class類這個概念,透過class關鍵字可以定義類,這就是更符合我們平常所理解的物件導向的語言。

class Person{   //定义一个名为Person的类
    // 构造函数,用来接受参数
    constructor(x,y){
        this.x = x;    //this代表的是实例对象
        this.y = y;
    }
    todoSome(){  //这是个类的方法,不需要加function,有多个方法也不用逗号隔开
        alert(this.x + "的年龄是" +this.y+"岁");
    }
}
export default  Person;
登入後複製

二、靜態方法和靜態屬性

靜態方法和靜態屬性,是使用static關鍵字的屬性和方法

2.1 靜態方法

static classMethod(){
		console.log('123456')
	}
登入後複製
  • #靜態方法不會被子類別繼承,子類別不能呼叫
  • 靜態方法中的this,指向的是類別class,不是類別的實例。因此靜態方法只能透過類別名稱來呼叫,不能透過實例來呼叫
let p = new Point();
p.classMethod();  // 报错
登入後複製

2.2 靜態屬性

static prop = 1 ;  // 静态属性
登入後複製
  • 靜態屬性不能被子類別繼承,子類別不能呼叫
  • 靜態屬性只能透過類別名稱來調用,不能透過類別的實例來調

三、class繼承extends

  • class可以用過extends關鍵字來繼承
  • ES6繼承,子類別建構子必須使用super()。因為ES6繼承是先將父類別實例物件的屬性和方法,加到this上面,然後再呼叫子類別的建構子修改這個this
  • 如果子類別沒有定義constructor方法,super()會默認新增上
  • 子類別會繼承父類別的方法和屬性,但是靜態方法和屬性必須透過子類別的類別名稱來呼叫
import classtest from "./classtest";  //先引入父类
class Man extends classtest{
    constructor(x,y){   //构造函数尽量与父类参数保持一致
        super();   //利用super()关键字,这个必须放在子类构造函数中的第一位置
        this.x = x;
        this.y = y;
    }
}
export default  Man;
登入後複製

四、class的取值函數getter和存值函數setter

getter、setter就是給class的屬性讀值、傳值用的。

取值函數getter和存值函數setter可自訂賦值和取值行為,當一個屬性只有getter沒有setter的時候,這個屬性就是只讀屬性,不能賦值,第一次初始化也不行。

如果變數定義為私有的(定義在類別的花括號外面),就可以只使用getter不使用setter。

let data=[1,2,3,4];  //放在类外面,属于私有变量,可以只读取
class Person{
    // 构造函数
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    get x(){
        console.log('获得name');
        return this._name;    //get读取属性
    }
    set x(x){
        console.log("设置name");  
        this._name=x;   //set给属性赋值
    }
    get data(){
        return data;   //只读属性,属性返回的值只能是私有变量
    }
    todoSome(){
        alert(this.x + "的年龄是" +this.y+"岁");
    }
    static dayin(){
        alert("dayin");
    }
}
export default  Person;
登入後複製

如何使用:

 var test= new this.$myutils.classtest('haha','18');
  test.x="haha3";   //改变了实例化时候的x的值
  test.todoSome();  //输出:haha3的年龄是18岁。这里就已经不是实例化时候的haha了
  console.log(test.data);   //结果:打印[1,2,3,4]
登入後複製

 五、注意事項:

1、在類別中定義方法時候,不可以給方法加上function關鍵字,因為JS中建構子是用function定義的,兩個隔開。

2、所有方法不要用逗號隔開,否則會報錯。

【推薦學習:javascript進階教學

#

以上是class是es5還是es6的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Python中的class類別和method方法的使用方法 Python中的class類別和method方法的使用方法 Apr 21, 2023 pm 02:28 PM

類別和方法的概念和實例類別(Class):用來描述具有相同的屬性和方法的物件的集合。它定義了該集合中每個物件所共有的屬性和方法。物件是類別的實例。方法:類別中定義的函數。類別的建構方法__init__():類別有一個名為init()的特殊方法(建構方法),該方法在類別實例化時會自動呼叫。實例變數:在類別的宣告中,屬性是用變數來表示的,這種變數就稱為實例變量,實例變數就是用self修飾的變數。實例化:建立一個類別的實例,類別的具體物件。繼承:即一個派生類別(derivedclass)繼承基底類別(baseclass)的

async是es6還是es7的 async是es6還是es7的 Jan 29, 2023 pm 05:36 PM

async是es7的。 async和await是ES7中新增內容,是對於非同步操作的解決方案;async/await可以說是co模組和生成器函數的語法糖,用更清晰的語意解決js非同步程式碼。 async顧名思義是「非同步」的意思,async用於聲明一個函數是異步的;async和await有一個嚴格規定,兩者都離不開對方,且await只能寫在async函數中。

es6怎麼找出2個數組中不同項 es6怎麼找出2個數組中不同項 Nov 01, 2022 pm 06:07 PM

步驟:1、將兩個陣列分別轉換為set類型,語法「newA=new Set(a);newB=new Set(b);」;2、利用has()和filter()求差集,語法“ new Set([...newA].filter(x =>!newB.has(x)))”,差集元素會被包含在一個set集合中返回;3、利用Array.from將集合轉為數組類型,語法“Array.from(集合)”。

小程式為什麼要將es6轉es5 小程式為什麼要將es6轉es5 Nov 21, 2022 pm 06:15 PM

為了瀏覽器相容。 ES6作為JS的新規範,加入了許多新的語法和API,但現代瀏覽器對ES6新特性支援不高,所以需將ES6程式碼轉換為ES5程式碼。在微信web開發者工具中,會預設使用babel將開發者ES6語法程式碼轉換為三端都能很好支援的ES5的程式碼,幫助開發者解決環境不同所帶來的開發問題;只需要在專案中配置勾選好「ES6轉ES5」選項即可。

es5和es6怎麼實現陣列去重 es5和es6怎麼實現陣列去重 Jan 16, 2023 pm 05:09 PM

es5中可以利用for語句和indexOf()函數來實現數組去重,語法“for(i=0;i<數組長度;i++){a=newArr.indexOf(arr[i]);if(a== -1){...}}」。在es6中可以利用擴充運算子、Array.from()和Set來去重;需要先將陣列轉為Set物件來去重,然後利用擴充運算子或Array.from()函數來將Set物件轉回數組即可。

使用jQuery替換元素的class名稱 使用jQuery替換元素的class名稱 Feb 24, 2024 pm 11:03 PM

jQuery是一種經典的JavaScript庫,被廣泛應用於網頁開發中,它簡化了在網頁上處理事件、操作DOM元素和執行動畫等操作。在使用jQuery時,常會遇到需要取代元素的class名稱的情況,本文將介紹一些實用的方法,以及具體的程式碼範例。 1.使用removeClass()和addClass()方法jQuery提供了removeClass()方法來刪除

es6暫時性死區是什麼意思 es6暫時性死區是什麼意思 Jan 03, 2023 pm 03:56 PM

在es6中,暫時性死區是語法錯誤,是指let和const命令使區塊形成封閉的作用域。在程式碼區塊內,使用let/const指令宣告變數之前,變數都是不可用的,在變數宣告之前屬於該變數的「死區」;這在語法上,稱為「暫時性死區」。 ES6規定暫時性死區和let、const語句不出現變量提升,主要是為了減少運行時錯誤,防止在變量聲明前就使用這個變量,從而導致意料之外的行為。

PHP Class用法詳解:讓你的程式碼更清楚易讀 PHP Class用法詳解:讓你的程式碼更清楚易讀 Mar 10, 2024 pm 12:03 PM

在編寫PHP程式碼時,使用類別(Class)是一個非常常見的做法。透過使用類,我們可以將相關的功能和資料封裝在一個單獨的單元中,使程式碼更加清晰、易於閱讀和易於維護。本文將詳細介紹PHPClass的用法,並提供具體的程式碼範例,幫助讀者更好地理解如何在實際專案中應用類別來優化程式碼。 1.建立和使用類別在PHP中,可以使用關鍵字class來定義一個類,並在類別中定義屬性和方法。

See all articles