1. 程式人生 > >ES6之class

ES6之class

tor 逗號 之間 ima 註意 type 屬性 clas method

ES5中通常通過構造函數和原型的組合形式來創建對象。在ES6中引入class作為對象模板,

Class定義語法

class point{
     constructor(x,y){
               this.x = x;

               this.y = y;
     }

     toString(){
               return ‘[‘ + this.x + ‘,‘ + this.y + "]" ;
     }
   }

var instance = new point(1,2);

等價於

function
point(x, y){ this.x = x; this.y = y; } point.prototype.toString = function(){ return ‘[‘ + this.x + ‘,‘ + this.y + "]" ; }

var instance = new point(1,2);

在class中constructor方法就是構造方法,this關鍵字代表實例對象,toString方法實際上是protoType上的方法,方法的定義不需要加關鍵字,並且方法之間不能用逗號分隔。

註意:ES6的class中不存在變量提升,這與繼承有關,必須保證子類在父類定以後使用。class內部默認就是嚴格模式。

Class繼承

ES5中使用原型,讓一個引用類型繼承另一個引用類型的屬性和方法。

 class child extends point{
     constructor(x,y,z){

               supor(x,y);

               this.color = z;
     }

     childMethod(){
               console.log(this.z);
     }

   }

通過extends關鍵字實現繼承,在子類的constructor構造函數中調用super方法,繼承父類的this。同時可以添加自己的實例屬性z和原型函數childMethod。

與ES5區別:

(1)在ES5中是先創建 子類的this對對象,然後將父類的方法添加到this上,即Parent.apply(this)。而ES6中是用super方法創建父類的實例對象this,再用子類的構造函數修改this。因此在子類中必須調用super方法後才可以使用this。

(2)ES5中,每個對象都有_proto_屬性,指向對應構造函數的原型對象;而prototype指向其方法的原型對象。

ES6中

l 子類的_proto_屬性表示構造函數的繼承,總是指向父類。

l 子類的prototype屬性的_proto_屬性表示方法的繼承,總是指向父類的prototype屬性。

l 子類的_proto_屬性的_proto_屬性,指向父類實例的_proto_屬性。

在ES6中,使用class類實現繼承,與ES5原型鏈繼承相同的是,而子類prototype(原型對象)的__proto__屬性總是指向父類的prototype(原型對象)屬性,即child.prototype.__protot__ = parent.prototype。與ES5原型鏈繼承不同的是,子類的__proto__總是指向父類,即child.__proto__ = parent(註意:ES5中,child.__proto__ = Function.prototype),表示構造函數的繼承。而且子類__proto__的__proto__是父類的__proto__,也就是說,子類原型的原型是父類的原型。

class parent{

          constructor(x,y){

                   this.x = x;

                   this.y = y;

          }

          toString(){

                   return ‘[‘ + this.x + ‘,‘ + this.y + "]" ;

          }

   }

//class 繼承

   class child extends parent{
          constructor(x,y,z){
                   supor(x,y); //super()創建父類的實例
         }
          childMethod(){
                   console.log(this.z);
          }

   }

   console.log(child.__proto__ == parent); //true
   console.log(child.prototype.__proto__ == parent.prototype); //false

技術分享

ES6之class