js学習ノート----進級Day 06 js対象と閉パッケージ

2901 ワード

オブジェクト向け

  • バックアップポインタ
  • 
    // this 
    
    // that 
    
    var that = this;
    
    

    オブジェクト向け三大プロパティ
  • パッケージ
  • 継承
  • マルチステート
  • オブジェクト向けの使用

  • フォールトトレランス処理
  • 
    var option = option || {};
    
    

    クローズドパッケージ

  • 内部関数が外部関数以外の変数によって参照されると、閉パケットが形成される.
  • 
    function A(){
       function B(){
           console.log("Hello XMG!");
       }
       return B;
    }
    var b = A();
    b();//Hello XMG!
    
  • 技法の最大目的:グローバル変数私有化
  • 閉パッケージの最大の用途は2つあります:
  • は、関数内部の変数
  • を読み取ることができる.
  • は、これらの変数の値を常にメモリに保持します.

  • すべてのグローバル変数はWindowsのプロパティです.だから書類はあちこちで手に入れることができます
  • !!!関数内部の変数の前にvarが宣言されていない場合は、グローバル変数
  • を表します.
  • 関数ネスト変数の値は近接原則を採用する:
  • 変数のルックアッププロセス(ルックアッププロセスは内部から外へのみ)
  • まず現在の役割ドメインで
  • を検索(遍歴)する
  • 親を除去->祖父の役割ドメイン
  • を検索
  • グローバル変数(Windowプロパティ)が見つかるまで木を返して
  • とエラーを報告します.
  • 欠点:再帰に類似し、性能を浪費する.グローバル変数
  • は使用しないことをお勧めします.
  • は、局所変数を保存するための閉パケットを導入する.しかし、むやみに使用することはできず、多すぎるとメモリが漏洩しやすい.

  • クローズド・パッケージの技術的利点:
  • グローバル空間を汚染しない!
  • 内部のすべての一時変数が実行されると、メモリが解放されます.
  • は、グローバルデータを保存することができる.
  • 複雑な変数を更新します.

  • クローズドパックの書き方
    
    (function(){})();
    ;(function(){})(); // 
    +(function(){})();
    -(function(){})();
    ?(function(){})();
    

    itinショートカットfor inループ
    スコープチェーン
    クローズドスコープ
  • 目的:グローバル変数プライベート化
  • 高級排他---閉包の書き方

    
        //  
        var seleNode = null;
    
        for(var i = 0; i

    高度な関数スロットル

  • Low:タイマ(関数呼び出しの周波数を下げる)
  • は、拡張性
  • を有する閉パケットを用いる.
  • 閉包伝参.パッケージ後に直接呼び出すことができる.
  • 
    function fn(callback,del) {
        var timer = null;
        // ( ).
        return function () {
            clearTimeout(timer);
            timer = setTimeout(function () {
                if(callback) callback();
            },del);
        }
    }
    // onresize onscroll .
    window.onresize = fn(function () {
        console.log(1);
    },200);
    window.onscroll = fn(function () {
        console.log(2);
    },300);
    

    クローズドパス

  • は機能を実現し、画像をクリックして5 px
  • を移動させる.
    
    var imgs = document.getElementsByTagName('img');
    imgs[0].onclick = fn(-5);
    function fn(speed) {
        var num = 0;
        return function () {
            num += speed;
            this.style.left = num + 'px';
        }
    }
    imgs[1].onclick = fn(5);
    

    コンストラクタ

  • すべての構造関数には、頭文字の大文字
  • が特徴です.
  • jsでは、実行後に新しいオブジェクトを返すことができる関数がコンストラクション関数
  • であると理解できる.
  • 構造関数テクニックの最大の目的:完全に独立したオブジェクトを創造し、互いに
  • に影響を与えない
    キーワードnew
  • は、関数をオブジェクトにして返し、この関数の内部でthisを関数自体に向ける
  • である.
  • 構造関数と組み合わせた場合にのみ
  • が使用されます.
  • は、簡略構造関数を用いてオブジェクトを自分で作成し、オブジェクトを返すステップに相当する.

  • プロトタイププロパティprototype
  • は、オブジェクトに属性およびメソッド
  • を追加する能力を有する.
  • 使い方がよくわかりません...