「対象に向かって」と恋愛をする-クラス(四)

4419 ワード

構造関数引き継ぐ原型オブジェクト指向プログラミング javascript

前の記事では、オブジェクト指向プログラミングの概念を紹介しましたが、最後にようやくES6が提供したクラスの概念を見ました.この種類はどう使いますか?この文章のテーマです.ES6は、classのキーワードを提供してくれました.このキーワードは以前のvar let constと似ています.これらはすべて声明として用いられています.classは一つのクラスを宣言するために用いられています.
構文

class name [extends]{   //extends      ，    
    //class body
};

注意

classは声明を繰り返してはいけない(let、constと同じ)

類の本質はやはり構造関数です.

class Div{  // 
    constructor(x,y){   //    
        this.x=x;    //    ，  constructor 
        this.y=y;
    }//          
    move(){    //    ，      Div.prototye     
        console.log('   ');
    }
}
console.dir(Div);   //         ES5

ES5の中の対象に向けて、いわゆる「クラス」とコンストラクションは実は一つのもので、つまり二重の役割です.ES6に来て、本当のクラスとコンストラクションは今は分離されています.上のコードから見てもいいです.このような書き方は対象に向かっての正統な書き方です.また、このオブジェクトとES5のオブジェクトの違いは、表示された名前の上にclassキーワードが一つ増えているだけであることをコンソールで見ました.
次に、ES5とES6の対象にはどのような違いがありますか?また、このように書いたオブジェクトはECMAScriptの内蔵オブジェクトとどのような違いがありますか?このようにすると、対象向けプログラミングとはどのような形なのかが分かります.
1、ES 5との比較

const [div1,div2]=[new Div(10,20),new Div(15,20)];    //                 
div1.z=30;    //           

console.log(
    typeof Div,    //function     （    ，         ）
    Div.prototype.constructor===Div,    //true          （      ）
    
    //Object.getPrototypeOf             ，    __proto__
    Object.getPrototypeOf(div1)===Div.prototype,    //true               
    Object.getPrototypeOf(div1)===Object.getPrototypeOf(div2),  //true           ，           
    
    div1 instanceof Div,        //true div     
    div1.constructor===Div,        //true           
    
    /*
     *     
     *  Object.getOwnPropertyNames()                   
     *  hasOwnProperty()              (true)，          (false)
     *  Object.keys()         （  ）    
     */
    Object.getOwnPropertyNames(div1),//["x", "y", "z"]        
    div1.hasOwnProperty('x'),        //true      
    div1.hasOwnProperty('move'),    //false           
    Object.keys(Div.prototype)        //[]               
);

//ES5     ，           
function Car(){}
Car.prototype.drive=function(){
    console.log('     ');
}
console.log(Object.keys(Car.prototype));  //["drive"]

上のコードから以下の結論を出します.

類の本質はやはり構造関数です.実はclassは文法飴です.内部はまだ構造関数です.

class宣言の対象はES 5宣言の対象と実質的に同じです.

classの声明の対象は、すべての方法を列挙することはできません.
2、内蔵オブジェクトとの比較

const [d1,d2]=[new Date(),new Date()];  //          
d1.x=10,d1.y=20,d1.z=30;    //           

console.log(
    typeof Date,    //function
    Date.prototype.constructor===Date,    //true
    Object.getPrototypeOf(d1)===Date.prototype, //true
    Object.getPrototypeOf(d1)===Object.getPrototypeOf(d1),  //true
    d1 instanceof Date, //true
    d1.constructor===Date,  //true
    Object.getOwnPropertyNames(d1), //["x", "y", "z"]
    d1.hasOwnProperty('x'),  //true
    d1.hasOwnProperty('getDate'),   //false         Date   
    Object.keys(Date.prototype),    //                
);

上のコードから以下の結論を出します.

カスタムオブジェクトは、私たちが宣言した内蔵オブジェクトのようなオブジェクト

です.

JavaScriptのオブジェクト指向プログラミングは、実質的にある機能をオブジェクトとして作成し、このオブジェクトは内蔵オブジェクト

を模倣している.
属性と方法を追加class宣言のオブジェクトは、共有とプライベートを含む、仲間のわがままな属性と方法の追加を可能にする.

共有属性はconstructorにあり、共有方法は大括弧内にある

プライベート属性をクラスに置いて、私的方法を大括弧内に置いて、同時に前にstaticキーワード

を追加します.

プライベート方法では、thisは、クラス自体を指し、他の方法ではthisは、インスタンスオブジェクト

を指す.

class Bear{
    constructor(){
        this.name='  ';   //    （  constructor ）
    }
    sleep(){    //    （        ）
        this.name='  ';    //this    ，      this           
        console.log(`${this.name}   `);
    }
    static gohome(){    //    
        //        name  ，  class       
        console.log(`${this.name}     `);  //   this       ，     
    }
}

//       
const b1=new Bear();
console.log(b1.name);    //      
b1.sleep();    //     
console.log(b1.name);    //    sleep      name  ，        

//       
Bear.age=5;        //         
console.log(b1.age);    //undefined      
Bear.gohome();            //Bear     
//b1.goHome();            //  ，

次の文章はclass里の継承を詳しく紹介します.

JavaScript配列の基本操作--追加、削除、切り取り、置換