JS-最も完全な作成対象方式

5290 ワード

JSの最も完全な作成対象方式のまとめ
1.最も簡単な方法--Objectのインスタンスを作成する

var person = new Object();     //    
person.name = "BlueBeginner";  //       
person.age = 21;               //    
person.sayName = function(){   //    
    alert(this.name);
}

2.対象文字数

var person = {
    name:'BlueBeginner',
    age:21,
    5:true,
    sayName:function(){
        alert(this.name);
    }
}

以上はすべて単一のオブジェクトを作成する方法であり、いくつかの異なる属性と方法を持つオブジェクトが必要であれば、上記の方法は簡単で便利ですが、類似の属性と方法を持つ多くのオブジェクトが必要な場合、上記の方法は明らかに非現実的です.次の方法は、一つの種類のオブジェクトを作成するために生まれます.
3.工場モード

function createPerson(name,age,job){
    var o = new Object();//      
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    }
    return o;//    
}
var personone = createPerson("BlueBeginner",21,"web Engineer");
var persontwo = createPerson("DJL",23,"web Engineer");

関数は、受け入れられたパラメータに基づいて対応するオブジェクトを作成します.この関数を何度も呼び出すことができます.毎回3つの属性1つの方法を含むオブジェクトを返します.
工場モード注意:

はオブジェクト

をvarで明示的に作成する必要がある.

は、return文があり、オブジェクト

に戻る.

工場モードには解決対象の識別問題がないので、対象がどの関数で作成されたかは確認できないということは理解できません.以下のコードを見てください.

alert(personone instanceof createPerson);//false
alert(personone instanceof Object);//true

4.コンストラクタモード

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    }
}
var personone = new Person("BlueBeginner",21,"web Engineer");
var persontwo = new Person("DJL",23,"web Engineer");

コンストラクタモードの注意:

は、オブジェクトを明示的に作成しない

は、属性と方法を直接にthisオブジェクト

に与えた.

リセット文がありません.

コンストラクション名の頭文字大文字

newオペレータを使用して例を作成する.

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

は、このオブジェクトに構造関数のスコープを割り当てます.

構築関数のコード

を実行します.

は、新しいオブジェクト

に戻る.

構造関数は工場モードが対象タイプを識別できない問題を解決したという理由で、下記のコード

を参照してください.

alert(personone instanceof Object);//true
alert(personone instanceof Person);//true

しかし、工場モードであろうと、構造関数モードであろうと、同じ問題が存在します.すなわち、異なる例での同名関数は等しくないです.以下のコードを見てください.

alert(personone.sayName == persontwo.sayName);//false

このように、上記の2つのモードは、同じタスクを完了するFunctionのインスタンスを2つ作成しています.このようにする必要はありません.また、構造関数モードについては、thisオブジェクトがあるので、コードを実行する前に関数法を特定のオブジェクトに結びつける必要は全くない.大部分は次のコードに示すように、構造関数の外側に方法を書くことができる.

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
}
function sayName(){
    alert(this.name);
}

このようにして、全例はグローバルスコープで定義された関数方法を共有する.しかし、明らかに多くの方法が必要ですか?この方法では多くの大域関数を定義する必要があるのではないですか?グローバルで定義された関数は、特定のオブジェクトにのみ呼び出されます.幸い、これらの問題はプロトタイプによって解決できます.
5.原型モード

function Person(){};
Person.prototype.name = "BlueBeginner";
Person.prototype.age = 21;
Person.prototype.job = "web Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var personone = new Person();
var persontwo = new Person();
personone.sayName();//'BlueBeginner'
persontwo.sayName();//'BlueBeginner'
alert(personone.sayName == persontwo.sayName);//true

プロトタイプの注意:

のすべての例は、同じ属性および方法を共有する

は、方法と基本的な属性値に適切であるが、引用タイプの値については、問題が発生している.例で参照タイプの値を書き換えると、元の名前の属性が変更されます.

function Person(){};
Person.prototype = {
    constructor:Person,
    name:'BlueBeginner',
    age:21,
    friends:['DJL','ZH'],
    sayName:function(){
        alert(this.name);
    }
}
var personone = new Person();
var persontwo = new Person();
personone.friends.push('YR');
alert(personone.friends);//'DJL','ZH','YR'
alert(persontwo.friends);//'DJL','ZH','YR'
alert(personone.friends == persontwo.friends);//true

第一の例のpersoneで引用タイプの値を書き換えた後、第二の例で得られたプロトタイプの参照値も修正されました.これは明らかに不本意です.だからプロトタイプを単独で使う人は少ないです.
プロトタイプの理解についてはご覧ください.
6.コンストラクターモードとプロトタイプモードを組み合わせる

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ['DJL','ZH']
}
Person.prototype = {
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}
var personone = new Person("BlueBeginner",21,"web Engineer");
var persontwo = new Person("DJL",23,"web Engineer");
personone.friends.push('YR');
alert(personone.friends);//'DJL','ZH','YR'
alert(persontwo.friends);//'DJL','ZH'
alert(personone.sayName === persontwo.sayName);//true
alert(personone.friends == persontwo.friends);//false

このモードは构造関数とプロトタイプを分けて、构造関数の中に属性を书き、プロトタイプの中に方法を书きます.これは引用タイプを定义するためのデフォルトモードです.もちろん、独立した构造関数とプロトタイプを见ると、困惑します.
7.ダイナミックプロトタイプモード

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    if(typeof this.sayName != 'function'){
        Person.prototype.sayName=function(){
            alert(this.name);
        };
    };
}

このようなモードの方法は確かに完璧です.ifはコードが最初にコンストラクタを呼び出す時だけ実行されると判断しました.その後、プロトタイプは初期化されました.これ以上の変更は必要ありません.
もちろん,第三版では寄生構造関数モードと安定構造関数モードも紹介したが,この二つのモードはあまり使われていないので,ここでは多く紹介しない.興味のある方は自分で関連資料を調べてください.

BootStrap Modal Create