Clever Geek Handbook

JavaScriptのOOP





この記事では、JavaScriptのオブジェクト指向プログラミングの主な機能について説明します。







JavaScriptオブジェクト



JavaScriptのオブジェクトは、キーと値のペアのセットを含む連想配列です（「ハッシュ」、「オブジェクト」、「連想配列」はJavaScriptでも同じことを意味します）。



JavaScriptでオブジェクトを作成する： 



 var obj = new Object(); //    var obj = {}; //    .


オブジェクトプロパティの設定： 



 obj.name = 'Victor'; //  .property obj['name']='Victor'; //


プロパティへのアクセス： 



 console.log(obj.name); //  .property console.log(obj['name']); //


拡張オプション： 



 var obj = { name : 'Viktor', age : 32 };


コンストラクターとキーワードnew



「 コンストラクターは、コンストラクターとして使用される関数です 。」 ECMAScript 6より前は、JavaScriptにはコンストラクターの概念がありませんでした。 new



キーワードを使用して呼び出される関数であればどれでもかまいません。



コンストラクターの使用例： 



  var Donkey = function(){ //… }; //   «» var iaDonkey = new Donkey();


新しいドンキー（）を呼び出すとき、JavaScriptは4つのことを行います。



  1. 1.新しいオブジェクトを作成します。

    iaDonkey = new Object(); // .



  2. 2. Donkeyオブジェクトのコンストラクタプロパティを配置します。

    aDonkey.constructor == Donkey // true





    iaDonkey instanceof Donkey // true



  3. 3. Donkey.prototypeに転送するオブジェクトを設定します。

    iaDonkey.__proto__ = Donkey.prototype



  4. 4.新しいオブジェクトのコンテキストでドンキー（）を呼び出します。 

      var iaDonkey = function(){ this.constructor(); // function Donkey() // … };
      
      
    
        
        
        
      
    
    
        
        
        
      
      
    
        
        
        
      
    
    
     


 //   ,    : function New (F, args) { /*1*/ var n = {'__proto__': F.prototype}; /*2*/ F.apply(n, args); /*3*/ return n; }


  1. 新しい値（n）を作成し、 prototype



    値をproto



    書き込みます。
  2. apply



    を介してメソッドコンストラクターを呼び出しapply



    。
  3. クラスNew



    新しいオブジェクトを返します。


短絡カプセル化



クロージャーは、関数を介して作成できるスコープベースのメカニズムです。 各関数は新しいスコープを作成します。



2つの例を見てみましょう。



例1： 



  for (var i = 0; i < 10; i++) { setTimeout(function () { console.log(i); }, 0); }


このループでは、ダースが10回表示されます。最後の繰り返しの後、10が表示され、 setTimeout



が開始されます。



例2： 



  for (var i = 0; i < 10; i++) { (function (m) { setTimeout(function () { console.log(m); },0); })(i) }


匿名の自己呼び出し関数を使用すると、宣言された直後に関数の実行を開始できます。



クロージャの原則を適用しました。関数を宣言し、実際の値を渡し、変数i. m



値をそれ自体で「閉じます」 i. m



i. m



はクロージャを介して最も近い上位のスコープから値を取得しようとします。 そして、それを自己呼び出し関数に渡したため、毎回その値（変数i



の値）に等しくなり、0から9を10回取得します。



クロージャーとカプセル化に関するこの例は、実際のプロジェクトから引用したものです。







BarChart



関数があり、パブリックメソッドがあります-チャートを作成し、その値を更新します。 プライベートなメソッドとプロパティがあります-それを外の世界に見せないでやるべきことです。



new



を介してBarChart



にアクセスすると、これがコンストラクター関数であることがわかり、このクラスの新しいオブジェクトを作成します。 ただし、すべてのプライベートメソッドはこの変数でロックされており、内部でアクセスできます。 これらは、この関数が作成するスコープ内に残ります。



多態性および呼び出し/適用キーワード



apply



構造のapply



： 



 var obj = { outerWidth: 'pliers' }; function getWidth(){ return this.outerWidth; } var a = getWidth(); var b = getWidth.apply(obj); console.log(a); //   , this  windows console.log(b); //    pliers. outerWidth —    windows, ,  ,  windows.outerWidth


メカニズム呼び出し： 



 Calling func.call(context, a, b...)


書くことと同等： 



 func(a, b...), but this == context.


両方の呼び出しは同一で、配列を介してパラメータを渡すことができるのは適用のみです。 



 call(context, param1, param2 …) apply(context, [args])


4つの呼び出しオプションとその結果： 



  function: function(args) – this == window  method: obj.funct(args) – this == obj Apply: func.apply(obj,args) – this == obj Constructor: new func(args) – this == new object


継承および実装方法







基本フィルターモデルは、任意のアプリケーションのフィルター内にあるパラメーターの標準セットです。 これらのパラメーターは、ページネーション、ページ番号などに必要です。



彼にプロトタイプを通してメソッドを提供します。 サーバーモデルを受け取った後、このメソッドを呼び出し、データの一部を目的の形式に変換します。



後継クラスと特定の「RouteHistorical」ページがあります。 クラスはベースフィルターを継承しますが、さらに独自のフィールドとパラメーターを持っています。







73行目RouteHistorical



は、同じ引数RouteHistorical



新しく作成されたRouteHistorical



オブジェクトRouteHistorical



apply



コンテキストを通じて基本クラスに渡します。 メソッドはすべてのフィールドを初期化し、新しいオブジェクトを取得します。



行RouteHistorical



ベースフィルターの継承者にすることができます。 81行目に、 prototype



プロパティにベースコンストラクタークラスへの参照を記述します。 prototype



メソッドは完全に上書きされ、コンストラクタは失われます。 新しいオブジェクトを作成するとき、何に向けるべきかわかりません。



82行目で、 prototype.constructor



プロパティをそれ自体へのリンクに設定します。 constructor



クラスのプロパティは常に自身を参照します。



プロトタイプ



prototype



プロパティは、 new



キーワードと組み合わせたときに意味があります。 新しいオブジェクトを作成するとき、 prototype



値を__proto__



プロパティに書き込みます。 クラスの親であるクラスへの参照が含まれています。







prototype



、新しいオブジェクトをインスタンス化するときに__proto__



に書き込む必要があるものを言うためにのみ必要です。 



  // unsafe var filter = { EnablePagination: true }; function BaseFilter(size) { this.PageSize = size; this.__proto__ = filter; } // safe var filter= { EnablePagination: true }; function BaseFilter(size) { this.PageSize = size; } BaseFilter.prototype = filter;


2つのエントリは同じですが、 __proto__



直接アクセスすることは安全ではないと見なされ、すべてのブラウザがこれを許可するわけではありません。



基本クラスから子孫を作成する



extend



機能： 



  function extend(Child, Parent) { var F = function() { } F.prototype = Parent.prototype // Child.prototype = new F() //   Child  __proto__    prototype Child.prototype.constructor = Child //  ,     . Child.superclass = Parent.prototype //      Parent };


使用法： 



  function BaseFilterModel(..) { ... } function RouteHistoricalFilterModel(..) { ... }


instanceof



オブジェクトがプロトタイプチェーン全体に基づいて、コンストラクターのインスタンスであるかどうかを判断できます。



instanceof（擬似メソッドコード）： 



  function isInstanceOf(obj, constructor) { if (obj.__proto__ === constructor.prototype) { return true; } else if (obj.__proto__ !== null) { return isInstanceOf(obj.__proto__, constructor) } else { return false } };


まとめ



1. ECMAScript 6より前のJavaScriptでは、クラスはなく、 new



キーワードを使用して呼び出されるコンストラクター関数のみがありました。

2.プロトタイピングチェーンは、JavaScript継承の基盤です。

3.プロパティにアクセスすると、オブジェクトで検索されます。 そうでない場合は、チェーン全体で__proto__



などになります。 したがって、継承はJavaScriptで実装されます。

4. fn.__proto__



へのリンクをfn.prototype



ます。

5. new



演算子は、 F.prototype



を参照するF.prototype



プロパティを持つ空のオブジェクトを作成します。 コンストラクターはF



実行します。thisコンテキストは以前に作成されたオブジェクトであり、そのプロパティを設定してこのオブジェクトを返します。

6. instanceof



オペレーターは、 ObjectsConstructor



コンストラクターを介してオブジェクトが作成されたことを確認しませんが、プロトタイピングチェーン全体に基づいて決定を行います。

7. JavaScriptでは、 this



はコンテキストに依存します。つまり、 関数の呼び出し方法について。


More articles:


All Articles