class是es6新特性。在ES6中,class(類別)作為物件的模板被引入,可以透過class關鍵字定義類別;新的class寫法讓物件原型的寫法更加清晰、更像物件導向程式設計的語法,也更加通俗易懂。類別(class)是ECMAScript中新的基礎語法糖結構,雖然ES6類別表面上看起來可以支援正式的物件導向編程,但實際上它背後使用的仍然是原型和建構函數的概念,讓物件原型的寫法更加清晰、
本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
class是es6新特性。在ES6中,class (類別)作為物件的模板被引入,可以透過 class 關鍵字定義類別。
ES6 提供了更接近傳統語言的寫法,新引入的class關鍵字具有正式定義類別的能力。類別(class)是ECMAScript中新的基礎語法糖結構,雖然ECMAScript 6類別表面上看起來可以支援正式的物件導向編程,但實際上它背後使用的仍然是原型和構造函數的概念,讓物件原型的寫法更加清晰、更像物件導向程式設計的語法。
傳統的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') }
let p = new Point(); p.classMethod(); // 报错
2.2 靜態屬性
static prop = 1 ; // 静态属性
import classtest from "./classtest"; //先引入父类 class Man extends classtest{ constructor(x,y){ //构造函数尽量与父类参数保持一致 super(); //利用super()关键字,这个必须放在子类构造函数中的第一位置 this.x = x; this.y = y; } } export default Man;
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中文網其他相關文章!