愚公移山でJavascriptの創建対象の各種姿勢を説明します.

5003 ワード

全部退いたら、話を続けます.
北山の愚公者は,年は九十にして,面山に臨んで住んでいる.
var person = {
    name : '  ',
    age: 90,
    address: '    ',
    whereToLive: function () {
        alert(this.address)
    }
};
北山愚公曰く、「私の死といえども、子ありて、子ありて、子ありて、子あり、孫あり、子あり、子あり、子あり、子あり、子あり、子あり、また孫あり.子あり、子あり、子あり、子あり、子あり、孫あり、窮乏なし」.
ここを見て、問題が来ました.愚公の子々孫々があんなに多くて、明らかに対象の字面量を使って作成するのは不合理です.私たちは最初の作成方法を紹介します.
工場モード
function createPerson (name, age, address){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.address = address;
    o.whereToLive = function () {
        alert(this.address)
    };
    return o;
}

var son = createPerson('   ', 30, '  ');
var grandSon = createPerson('    ', 5, '  ');
工場モードの比較的に明らかな欠点の一つは、中間オブジェクトを生成して返すため、対象のタイプを判断できないということです.
コンストラクタモード
function Person(name, age, address) {
        this.name = name;
        this.age = age;
        this.address = address;
        this.whereToLive = function(){
            alert(this.address);
        }; 
}
var son = new Person('   ', 30, '  ');
var grandSon = new Person('    ', 5, '  ');
コンストラクタは普通の関数と同じで、文法的には何の違いもなく、呼び出し時にnewキーワードを使っただけです.だから、newが何をしているかを話す必要があります.
  • は、新しい中間オブジェクト
  • を作成する.
  • は、この中間オブジェクト
  • に構造関数の役割を与える.
  • 構築関数のコード
  • を実行します.
  • は、中間オブジェクト
  • に戻る.
    ここのコードを例にとって、実際には第二ステップと第三ステップの動作をPerson.applyとまとめることができます.ここでは、bindとcall/applyの違いを説明します.bindは関数を返します.call/applyはこの関数をついでに実行して、実行後の結果を返します.
    じゃ、コンストラクションモードには何の問題がありますか?実はよく分かります.もし愚公が千人の子々孫々を持っているなら、どの子孫もwhere Toliveの方法を持っています.このやり方は明らかに非芸術的です.
    プロトタイプ
    function Person () {
        
    }
    
    Person.prototype.name = '  ';
    Person.prototype.age = 90;
    Person.prototype.address = '  ';
    Person.prototype.whereToLive = function () {
        alert(this.address); 
    };
    
    var son = new Person();
    var grandSon = new Person();
    son.name = '   ';
    son.address = '    ';
    
    
    son.whereToLive();   //  '    '
    grandSon.whereToLive();   //  '  '
    
    私たちはsonオブジェクトでaddress属性を修正しようとしていますが、grandSonの属性に影響はありません.この二つのaddressは実は違っています.なぜですか?私たちは次のような操作をしています.
    delete son.address;
    son.whereToLive();   //  '  '
    
    私たちはsonのaddress属性を削除しました.この時sonのaddressはまた原型の中で定義された値になりました.したがって、私たちはaddress属性を修正する時、モデルの値には移動しませんでした.このオブジェクトに属性を新規作成しました.また、この属性を取得しようとすると、優先的にオブジェクト上の属性値を返します.私たちはこの現象を属性遮蔽と呼びます.
    また、オブジェクト属性を読み取る際には、まずそのオブジェクト自体があるかどうかを確認します.ない場合はプロトタイプチェーンに沿って上に探します.プロトタイプチェーンのトップに到達しても見つからない場合は、undefinedに戻ります.ここにもう一つの知識点をはさんでください.初心者の多くの開発者がこのようなミスをします.
    var a = {};
    console.log(a.b.c)
    
    b属性が存在するかどうかチェックしないで、c属性を取得しようとします.プロトタイプチェーンの先端までbが見つからなかったら、a.bの値はundefinedですので、undefinedのc属性を取得すると間違いがあります.正しいやり方は、該当属性があるかどうかを判断しない場合は、まず判断します.
    ただし、基本タイプの属性を書き込む際には異なりますが、現在のオブジェクトに書き込みたい属性が見つからない場合は、上に検索するのではなく、現在のオブジェクトに属性を新たに作成します.これは他のオブジェクトの属性値を汚染しないためです.注意深いあなたは私が最初に基本タイプの属性を強調したことを発見したかもしれません.引用のタイプならどうなりますか?
    function Person () {
        
    }
    
    Person.prototype.name = '  ';
    Person.prototype.age = 90;
    Person.prototype.address = ['  '];
    Person.prototype.whereToLive = function () {
        alert(this.address); 
    };
    
    var son = new Person();
    var grandSon = new Person();
    son.address.push('    ');
    
    grandSon.whereToLive();   //  '  ','    '
    
    ここにはもう一つの小さな知識点があります.引用タイプはメモリの中にあります.違うところの応用は実は同じブロックのメモリを指しています.したがって、元のオブジェクトのアプリケーションのタイプを変更しようとすると、全体的に汚染されます.これはプロトタイプの致命的な欠点です.
    コンストラクタモードとプロトタイプモードを組み合わせて使用します.
    落ち着いてください.また新しい知識を詰め込みます.私たちは簡単に書くことで、原型モデルに原型オブジェクトを与える方法を避けることができます.
    function Person(name, age, address) {
            this.name = name;
            this.age = age;
            this.address = address;
    }
    Person.prototype = {
        constructor : Person,  //           
        whereToLive : function () {
            alert(this.address); 
        },
        howOld : function () {
            alert(this.age); 
        }
    }
    
    コンストラクターモードとプロトタイプモードを組み合わせて使う書き方は、コンストラクターモードとプロトタイプモードの問題を同時に回避するのではないですか?共通の関数を共有することもできますし、オブジェクトごとに独自の属性を楽しむこともできます.
    注意したいのは、私たちがPerson.prototypeを書き換える時、実はconstructがObjectを指しているので、ここで手動修正を行いました.
    寄生構造関数モード
    function PersonList (name, age, address){
        var o = new Array();
        o.push.apply(o, arguments);
        o.consoleString = function () {
           return this.join(",");
        };
        return o;
    }
    
    var list = new PersonList('   ', '    ');
    alert(list.consoleString());
    
    見覚えがあるかどうかは、工場モデルと同じですが、呼び出し時にnewキーワードを使っただけです.このモードを利用して、対象に追加の能力を追加できます.この例では、私たちが付与した新しい能力を持つことができるように、配列にカスタムの方法を追加します.
    実際に開発するにはやはり実際の場面によって活用しなければならないです.いつもあなたに似合うタイプがあります.
    最後に
    学習を楽にし、効率的にするために、多くの資料を無料で共有し、全体のスタックのエンジニアになるために、さらには構築師の道を切り開いています.ここで皆さんに一つの先端を紹介します.交流サークルを勉強します.
    本当に勉強を始めたら、どこから始めたらいいのか分かりません.効率の低下が学習を続ける自信に影響を与えます.
    しかし、一番重要なのは、どの技術が重点的に身につけなければならないか分かりません.勉強する時、頻繁にピットを踏んで、最終的に大量の時間を浪費します.だから、有効な資源が必要です.
    最後に、瓶の病気にあって、どうすればいいのか分からないフロントエンドプログラマーたちを祝福します.これからの仕事と面接が順調に行われますように.