JavaScript MVC学習ノート(三)類の使用(中)

公開記録の勉強はJS MVCですが、どれぐらい続けられますか?「MVCベースJavaScript web富応用開発」を主な学習資料としています.次のクラスの学習は、実際にはめまいを見て、いくつかの例は、何をしているかを理解することができますが、なぜこのようにするのか分からないです.
原型によるクラス継承
JavaScriptはプロトタイプに基づいたプログラミング言語で、プロトタイプはクラスとインスタンスを区別するために使われます.プロトタイプは「テンプレート」オブジェクトで、上の属性は新しいオブジェクトを初期化するために使われます.どのオブジェクトも別のオブジェクトの原型オブジェクトとして属性を共有できます.実際には、それを何らかの形で継承していると考えられています.
オブジェクトの属性を読み取るとき、JavaScriptはまずこの属性を地元のオブジェクトの中で検索します.見つけられなかったら、JavaScriptは対象のプロトタイプの中で検索を開始します.見つからなかったら、プロトタイプのプロトタイプを探し続けます.Object.prototypeまで探します.この属性が見つかったら、この値を返します.そうでなければundefinedを返します.例えば、Aray.prototypeに属性を追加すると、すべてのJavaScript配列はこれらの属性を持っています.
親の属性をサブクラスに継承する方法:まずコンストラクタを定義し、父の新しいインスタンスをコンストラクターのプロトタイプに割り当てます.

//  ，    
var Animal = function(){};
Animal.prototype.breath = function(){
    console.log('breath');
};

//  ，  
var Dog = function(){};

// Dog    Animal
Dog.prototype = new Animal;
Dog.prototype.wag = function(){
    console.log('wag tail');
};

相続の有効性を確認します.

var dog1 = new Dog;
dog1.wag();
dog1.breath(); //      

クラスライブラリへの継承を追加します.
任意の親クラスを導入して新しいクラスを作成します.これは作成クラスの基礎テンプレートとして使用できます.

var Class = function(parent){
    var klass = function(){
        this.init.apply(this, arguments);
    };

    //   klass    
    if (parent) {
        var subclass = function() { };
        subclass.prototype = parent.prototype;
        klass.prototype = new subclass;
    };

    klass.prototype.init = function(){};

    //     
    klass.fn = klass.prototype;
    klass.fn.parent = klass;
    klass._super = klass.__proto__;
    /* include/extend      …… */

    return klass;
};

parentをClass構造関数に導入すると、すべてのサブクラスは同じプロトタイプを共有する.このような一時的な匿名関数を作成するためのテクニックは、クラスを引き継ぐ時にインスタンスを作成することを避けています.ここでは、クラスの属性ではなく、インスタンスの属性だけが引き継がれることを暗示しています.対象のプロトを設定する.属性はすべてのブラウザがサポートしているわけではありません.Super.jsのようなクラスは固有の動的継承によるものではなく、属性コピーによってこの問題を解決します.
Classに父のクラスに入ることによって、簡単な継承を実現します.

var Animal = new Class;
Animal.include({
    breath: function(){
        console.log('breath');
    }
});

var Cat = new Class(Animal);

//   
var tommy = new Cat;

関数の呼び出し
JavaScriptでは、関数は他のものと同じ対象です.他のオブジェクトとは異なり、関数は呼び出し可能です.関数内のコンテキスト、例えば、thisの値は、その位置とメソッドを呼び出します.
四角括弧を使用して関数を呼び出すことができる以外に、関数を呼び出すことができる他の2つの方法があります.apply()およびcall().両者の違いは着信関数のパラメータの形式にある.apply()関数には2つのパラメータがあります.1番目のパラメータはコンテキストで、2番目のパラメータはパラメータからなる配列です.コンテキストがnullの場合は、グローバルオブジェクトを使用します.たとえば:

function.apply(this, [1, 2, 3])

call()の第1のパラメータはコンテキストであり、次いで実際に入ってきたパラメータシーケンスである.

function.call(this, 1, 2, 3);

JavaScriptでは、コンテキストの変更が共有状態、特にイベントのコールバックのために許可されています.jQueryは、そのAPIの実装において、appry()とcall()を利用してコンテキストを変更します.例えば、イベントハンドラにおいて、またはeach()を使って反復する場合.

$('.clicky').click(function(){
    // ‘this’      
    $(this).hide();
});

$('p').each(function(){
    // ‘this’      
    $(this).remove();
});

元のコンテキストにアクセスするために、ローカル変数にthisの値を保存することができます.これは一般的なモードです.

var clicky = {
    wasClicked: function(){
        /* ... */
    },

    addListeners: function(){
        var self = this;
        $('.clicky').click(function(){
            self.wasClicked()
        });
    }
};

clicky.addListeners();

このコードは、別の匿名関数にフィードバックをラッピングすることによって、元のコンテキストを維持するために、applyを使用してよりクリーンになることができる.

var proxy = function(func, thisObject){
    return(function(){
        return func.apply(thisObject, arguments);
    });
};

var clicky = {
    wasClicked: function(){
        /* ... */
    },
    addListeners: function(){
        var self = this;
        $('.clicky').click(proxy(this.wasClicked, this));
    }
};

上記の例では、クリックイベントのコールバックで使用するコンテキストを指定しました.jQueryではこの関数を呼び出すための文脈は無視できます.実際にはjQueryもこの機能を実現したAPIを含んでいます.jQuery.proxy():

$('.clicky').click($.proxy(function(){ /* ... */ }, this));

apply()およびcall()を使用するには、「依頼」のような他に有用な理由があります.呼び出しを別の呼び出しに委託してもよく、着信パラメータを変更することもできます.

var App {
    log: function(){
        if (typeof console == "undefined") return;

        //            
        var args = jQuery.makeArray(arguments);

        //         
        args.unshift("(App)");

        //    console
        console.log.apply(console, args);
    }
};

この例ではまずパラメータ配列を構築し、パラメータを追加し、最後にこの呼び出しをconsole.log()に依頼した.arguments変数は、解釈器に内蔵されている現在起動されているスコープ内でパラメータを保存するための配列である.しかし、それは真の配列ではなく、例えば可変ではないので、jQuery.makeArray()を介して利用可能な配列に変換する必要がある.