淺析ES6新特性 —— Class

LiveVideoStack 發布于2019-08-22 15:21 / 3369人閱讀

摘要：如下示例構造函數實例化對象新特性使用類實例化對象引入了類這一概念，可以通過關鍵字，定義類。否則報錯，這是類和構造函數的一個主要區別。其實，的類，可以看作是構造函數的另外一種寫法。

前言

類語法是ES6中新增的一個亮點特性，下文簡單對類的使用進行簡要說明（僅作為個人層面的理解）

js傳統模式實例化對象方法——prototype

在JavaScript中，實例化一個對象的傳統使用方法是通過構造函數。
如下示例：

function Count(num1,num2){
    this.num1 = num1;
    this.num2 = num2;
}
//構造函數
Count.prototype.number = function(){
    console.log(this.num1,this.num2);
}
//實例化對象
var count = new Count(1,2);
count.number(1,3);

ES6新特性——使用Class（類）實例化對象

ES6引入了Class(類)這一概念，可以通過class關鍵字，定義類。
如下示例：

//定義類
class Count{

    //構造方法
    constructor(x,y){
        //this表示實例對象
        this.x = x;
        this.y = y;
    }
    
    //非靜態方法，可以直接用實例.方法名來訪問
    sum(x,y){
        let sum = x+y;
        console.log("sum is :",sum)
    }
    
    //靜態方法，需要通過構造器或者類才能訪問的到
    static sub(x,y){
        let sub = x - y;
        console.log("sub is :",sub);
    }
}

var count = new Count();

//非靜態方法，可以直接訪問
count.sum(1,2);                         // sum is :3

//靜態方法：
//（1）實例對象.constructor.方法名
count.constructor.sub(5,1);             // sub is :4

//（2）類名.方法名
Count.sub(5,1);                         // sub is :4

count.hasOwnProperty("x");              // 定義在this上，是實例對象自身的屬性true
count.hasOwnProperty("y");              // true
count.hasOwnProperty("sum");            // 定義在原型對象上，false
count._proto_.hasOwnProperty("sum");    // true

通過以上的小實例，總結下面幾點:

定義“類”的方法時，不用加function關鍵字。

方法之間不要加逗號，加了會報錯。

類中必須要有constructor方法，若沒有顯示定義，則一個空的會被添加。

類必須使用new調用。否則報錯，這是類和構造函數的一個主要區別。

類中使用static關鍵字聲明的方法，需要通過構造函數constructor或者使用類名才可以訪問的到。

靜態方法，實例對象不能直接訪問。但是父類的靜態方法，子類可以繼承。

非靜態方法，可以直接通過“實例對象.方法名”訪問。

實例自身的屬性，除非顯示定義在this對象上，否則都是定義在原型上（即class上）。

其實，ES6的類，可以看作是構造函數的另外一種寫法。

class B{}
var b = new B();
typeof B;               //`function`
typeof  B === B.prototype.constructor                   //true
typeof  b.constructor === B.prototype.constructor      //true

對比ES6和ES5，有以下相同點

類的數據類型就是函數，類本身就指向構造函數。

在類的實例上調用方法，就是調用原型上的方法。

再來看ES6與ES5的不同點

由于類的方法都定義在prototype上面，那么我們可以使用Object.assign方法給類一次添加多個方法。prototype的constructor方法，直接指向“類”本身，這和ES5的行為是有區別的。另外，類內部所有定義的方法，都是不可枚舉的，而ES5中，prototype上的方法都是可枚舉的。
示例如下：

//ES5
function Test(){}
Test.prototype.log = function(){}
var test = new Test();

Object.keys(Test.prototype);    //列舉出給定對象自身可枚舉屬性(不包括原型上的屬性)   
//["log"]

Object.getOwnPropertyNames(Test.prototype);      //列舉出給定對象所有自身屬性的名稱（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）  
//["prototype","log"]



//ES6
class Test2{
    toValue(){}
}
var test2 = new Test2();

Object.keys(Test2.prototype);
//[]

Object.getOwnPropertyNames(Test2.prototype);
//["constructor","toValue"];

Class的靜態方法

類中所定義的方法，都會被實例繼承，如果在一個方法前，加上static關鍵字，那該靜態方法不會被實例繼承，而是直接通過類來調用的。

class Foo{
    static addMethod(){
        console.log(this);
        console.log("hello class");
        this.
    }
}

//直接通過類來調用
Foo.addMethod();        //Foo ,  hello class

//實例不會繼承靜態方法，所以調用會報錯
var foo = new Foo();
foo.addMethod();    //TypeError:foo.addMethod is not a function

注意：

如果static靜態方法包含this關鍵字，這個this指的是類，而不是實例。

靜態方法可以與非靜態方法同名。

父類的靜態方法，可以被子類繼承。

靜態方法可以從super對象上調用。

待續……

云服務器 GPU云服務器 es6新特性 es6的新特性 es6中的class es6class

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93399.html

ES6 Proxy/Reflect 淺析

摘要：即必須有返回值其中可接受三個參數，為目標對象，為屬性名，為實際接受的對象，默認為本例中新建的，如果單獨指出一個對象，可使指出對象受到相同的方法作用。且中的必須有返回值，的不用，這也正是因為在他之后還會執行所以不需要。 ES6 Proxy/Reflect Proxy 攔截器 proxy是es6的新特性，簡單來講，即是對目標對象的屬性讀取、設置，亦或函數調用等操作進行攔截（處理）。 let...

Juven 2019-08-20 14:14 評論0 收藏0
ES6淺析之路一

摘要：特點是塊級作用域的特點得到明顯的體現再看一個中的循環變量泄露為全局變量很明顯成了全局變量。本人目前了解的還不夠深比如中添加一個新的詞匯暫時性死區，簡稱。 (個人理解ES6就是對ES5的BUG修改和升級)廢話不多說今天要探討的是 var與letECMAScript 6 入門作者：阮一峰下面是個人總結：let不允許在相同作用域內，重復聲明同一個變量。let 特點是塊級作用域先來看一...

BetaRabbit 2019-08-23 12:41 評論0 收藏0
generator探幽(1)--koa中間件機制淺析

摘要：當運行到時，不會暫停，而是直接跳進函數執行函數內的代碼。由于函數中沒有，因此會一直執行完函數中的代碼，并返回至函數中執行后面的代碼。本系列旨在通過對co，koa等庫源碼的研究,進而理解generator在異步編程中的重大作用(ps:所有代碼請在node --harmony或者iojs環境中運行) koa中間件的形式相信用過koa的小伙伴一定很熟悉下面這段代碼 var app ...

Jensen 2019-08-21 10:31 評論0 收藏0
淺析es6-promise源碼

摘要：主要邏輯本質上還是回調函數那一套。通過的判斷完成異步和同步的區分。主要邏輯: 本質上還是回調函數那一套。通過_subscribers的判斷完成異步和同步的區分。通過 resolve，reject -> publish -> invokeCallback -> resolve，reject的遞歸和下一條then的parent是上一條的child來完成then鏈的流轉同步情況...

fox_soyoung 2019-08-23 16:16 評論0 收藏0