js設計モードの二-コンストラクターモード

4857 ワード

紹介する
コンストラクションはみんなよく知っていますが、初心者の方なら、コンストラクションというものを知る必要があります.コンストラクタは、特定の種類のオブジェクトを作成するために使用するオブジェクトだけでなく、オブジェクトを最初に作成したときにオブジェクトのメンバー値を設定するパラメータも受け入れられます.自分のコンストラクタをカスタマイズして、カスタムオブジェクトの属性や方法を中に宣言します.
基本的な使い方
JavaScriptでは、構造関数は典型的に実例を実現するために用いられると考えられています.JavaScriptには類の概念がありませんが、特殊な構造関数があります.newキーワードで定義された初期関数を呼び出します.JavaScriptは新しいオブジェクトを作成し、新しいオブジェクトのメンバー声明はすべて構造関数で定義されています.コンストラクタの内部で、thisキーは新しく作成されたオブジェクトを参照します.基本的な使い方は以下の通りです.
function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output= function () {
        return this.model + "  " + this.miles + "  ";
    };
}

var tom= new Car("cll", 2009, 20000);
var dudu= new Car("geek", 2010, 5000);

console.log(cll.output());
console.log(geek.output());
上の例は非常に簡単なコンストラクターモードであるが、やや問題がある.まず継承を使うのが面倒くさいです.次にoutput()はオブジェクトを作成するたびに定義し直しました.最も良い方法は、すべてのCarタイプのインスタンスにこのoutput()を共有させる方法です.これによって、大量のインスタンスがあれば、多くのメモリが節約されます.
この問題を解決するには、次のような方法が使えます.
function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output= formatCar;
}

function formatCar() {
    return this.model + "  " + this.miles + "  ";
}
この方法は使えますが、次のようなもっといい方法があります.
構造関数とプロトタイプ
JavaScriptの関数にプロトタイプというプロトタイプがあります.コンストラクタを呼び出してオブジェクトを作成すると、このコンストラクタのプロトタイプの属性はすべて新しい作成オブジェクトで使用できます.このように、複数のCasオブジェクトの例は同じプロトタイプを共有できます.上記のコードを拡張します.
function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
}
: Object.prototype. , Object.prototype prototype
Car.prototype.output= function () {
    return this.model + "  " + this.miles + "  ";
};

var tom = new Car("cll", 2009, 20000);
var dudu = new Car("geek", 2010, 5000);

console.log(cll.output());
console.log(geek.output());
ここで、output()の単一の例は、全てのCarオブジェクトのインスタンスで共有して使用することができる.
また、普通の関数を区別するために、コンストラクタを大文字で始まることを勧めます.
newしか使えないですか
上の例は関数carに対してnewでオブジェクトを作成していますが、これだけですか?実は他の方法があります.二つを挙げます.
function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    //      output    
    this.output = function () {
        return this.model + "  " + this.miles + "  ";
    }
}

//  1:      
Car("cll", 2009, 20000);     window   

console.log(window.output());

//  2:              

var o = new Object();
Car.call(o, "geek", 2010, 5000);
console.log(o.output());
このコードの方法1はちょっと特殊です.new直接関数を適用しないと、thisはグローバルオブジェクトwindowを指します.確認してみます.
//      
var tom = Car("cll", 2009, 20000);
console.log(typeof tom); // "undefined"
console.log(window.output()); // "cll  20000  "
この時の対象tomはundefinedで、window.output()は結果を正確に出力します.newキーワードを使うなら、この問題はありません.検証は以下の通りです.
//  new    
var tom = new Car("cll", 2009, 20000);
console.log(typeof tom); // "object"
console.log(tom.output()); // "    20000  "
強制的にnewを使う
上記の例はnewを使わない問題を示していますが、構造関数にnewキーワードを強制的に使わせる方法がありますか?
function Car(model, year, miles) {
    if (!(this instanceof Car)) {
        return new Car(model, year, miles);
    }
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output = function () {
        return this.model + "  " + this.miles + "  ";
    }
}

var tom = new Car("cll", 2009, 20000);
var dudu = Car("geek", 2010, 5000);

console.log(typeof tom); // "object"
console.log(tom.output()); // "cll  20000  "
console.log(typeof dudu); // "object"
console.log(dudu.output()); // "geek  5000  "
thisのinstance ofがCasかどうかを判断してnew Carに戻るかそれともコードを実行し続けるかを決定します.newキーワードを使用すると、次のパラメータの割り当てはそのまま実行されます.newを使用していないと、元のインスタンスに戻ります.
オリジナル包装関数
JavaScriptには3の中の原始包装関数があります.number、string、bootlean、時には両方とも使います.
//         
var s = new String("my string");
var n = new Number(101);
var b = new Boolean(true);


//     
var s = "my string";
var n = 101;
var b = true;
これらの包装関数は数値を残したい時だけ使用します.違いについては下記のコードを参照してください.
//   string
var greet = "Hello there";
//   split()    
greet.split(' ')[0]; // "Hello"
//               
greet.smile = true;
//         (18 ECMAScript          )
console.log(typeof greet.smile); // "undefined"

//   string
var greet = new String("Hello there");
//   split()    
greet.split(' ')[0]; // "Hello"
//                 
greet.smile = true;
//          
console.log(typeof greet.smile); // "boolean"
締め括りをつける
本稿では、構造関数モードの使用方法、呼び出し方法、およびnewキーワードの違いについて説明します.
住所:cll