js之ES6的Class類

JavaScript ES6之前的還沒有Class類的概念，生成實體物件的傳統方法是通過建構式，

例如：

1 function Mold(a,b){
2                  this.a=a;
3                  this.b=b;
4          }
5          Mold.prototype.count=function(){
6              return this.a+this.b;
7          };
8          let sum=new Mold(1,2);
9         console.log(sum.count())　　//3

這中寫法跟傳統的面向物件語言差異較大，寫起來也比較繁雜，

• ES6提供了更加接近其他語言的寫法，引入了Class（類）的概念，作為物件的模板，可以通過class關鍵字，定義類（類似python、java等）；

當然ES6的大部分功能再ES5都能實作，ES6的class可以看作是一個語法糖，只是新的class定義類的寫法讓物件原型的寫法更加簡單明了、更接近與面向物件的編程思想，與上面ES5寫的類使用ES6實作，例如：

 1 class Mold{
 2              constructor(a,b){
 3                  this.a=a;
 4                  this.b=b;
 5              }
 6              count(){
 7                  return this.a+this.b;
 8              }
 9         }
10         let sum=new Mold(1,2);
11         console.log(sum.count())　　//3

這里ES6的類，只需用class定義，并且類的方法不需要用function定義；還有ES6的constructor方法，代表這該類的構造方法；并且它的this關鍵字指向著實體物件，這里ES5的建構式Mold，相當于ES6Mold類的constructor方法，

1. constructor

• • ES6實體物件的建構式就是該類本身；并且當我們new 類名()就是執行了constructor這個函式，

例如：

1   class Mold{
2              constructor(){
3                 console.log("aaa")
4              }
5         }
6  let m=new Mold();// aaa
7  console.log(m.constructor===Mold);//true

上面代碼Mold類的constructor，實體化物件時執行默認constructor；

• • 任何物件都有建構式，并且建構式與當前物件的類是相同；

例如：

1 let arr=new Array();
2  console.log(arr.constructor===Array);//true
3  let str=new String();
4  console.log(str.constructor===String);//true
5  let obj=new Object();
6  console.log(obj.constructor===Object);//true

　　2.  類的繼承 extends

• • 繼承父類后，子類會繼承父類所有的方法和屬性(包括靜態方法和屬性)

  • 如果子類沒有定義constructor方法，會默認被添加該方法

  • 任何子類都有constructor方法;

例如：

 1 //class 類名 extends 被繼承的類{}
 2 Class Father{
 3       constructor(){
 4       }
 5      sum(){
 6          console.log("abc");
 7      }
 8      static fn(){
 9          console.log("hello")
10      }
11  }
12  Class Son extends Father{
13     
14  }
15  let s=new Son();
16  s.sum()//abc,繼承了父類的sum()方法
17  Son.fn()//hello 繼承了父類的靜態方法fn()

• • 繼承后的子類方法的三種處理：

1). 完全繼承，不需要重寫這個方法，子類執行繼承方法內容與父類相同

2). 重寫覆寫，只需要在這個類中重寫這個方法就可以覆寫繼承過來的內容

3). 加工，子類可以用super呼叫父類的方法或屬性進行加工，再加上子類自己的方法和屬性

　　3. super

• • 呼叫父類的建構式直接使用super()，并且可以傳參；

  • 子類的建構式中，只有呼叫了super之后才可以使用this關鍵字，否則會報錯;

例如：

 1 //super.父類函式()；
 2  class Father{
 3       constructor(){
 4         console.log("bbb");
 5      }
 6  }
 7  class Son extends Father{
 8      constructor(x){
 9         this.x=x;//ReferenceError,報錯
10         super();
11         this.x=x;//正確
12      }
13  }
14  let sum=new Son();//bbb

　　4. 類的static靜態

1. • 在屬性或方法前面使用 static定義類的靜態屬性和方法；

   • 所有的靜態屬性和靜態方法都不能通過實體化的物件呼叫；

   • 需要通過類來呼叫,靜態屬性和靜態方法是類的專屬屬性和方法，和實體化物件無關，比如陣列和數學方法中的：Array.from();Math.random（），

例如：

 1 class Mold{
 2          static x=0;
 3          y=1;
 4          static fn1(){
 5              console.log("aaa")
 6          }
 7          fn2(){
 8              console.log("bbb");
 9          }
10         }
11      let m=new Mold();
12      console.log(m.x,m.y);//undefined , 1
13      m.fn1(); // TypeError 
14      m.fn2(); // bbb
15      //需要通過類來呼叫
16      Mold.fn1(); //aaa
17      console.log(Mold.x);//0

• • 靜態的使用場景：

一般靜態的方法是用來解決一系列該型別的方法；

解決具體型別的方法,不是解決某個具體物件的方法

靜態屬性,一般用于存盤該型別的一系列通用的屬性變數

這種存盤,在類創建的時候就已經變成全域的了,可在任何地方呼叫,并且不會被自動銷毀

標籤：JavaScript

上一篇：盒子跟隨滑鼠移動而移動(兼容IE8)

下一篇：高清圖示來襲！在vue專案中使用iconfont