JSカスタムオブジェクトの理解

3710 ワード

JavaScriptは、正面から対象言語に向かっているものです.プログラミング思想です.
相手は何ですか

オブジェクトは、属性と方法の集合体である.属性:データの保存方法:実行する動作

                    ：obj = {
                      name:12,
                      age:13，
                      skill:function(){}
                  }
                  //name,age:    obj    ，         ，         
                  //skill: obj

オブジェクトのカスタマイズ
1.字面量2.工場モード3.構造関数モード4.原型モード5.混合モード(プロトタイプモードと構造関数モードの混合)
文字の量

長所:簡単で分かりやすいです.

欠点:量産できない

            var obj={
                name:'    ',
                age:78,
                skill:function(){
                    console.log('  ');
                }
            }
            console.log(obj['name']);//    
            obj.skill();//

工場関数モード

長所:対象の量産を実現した

欠点:対象が誰によって生産されたか検出できない

function factory(name,age,callback){
    return {
        name:name,
        age:age,
        callback:callback,//    
        skill:function(){   //  
            console.log('  ');
        }
    }
}
var girlFriend = factory('  ',18);
console.log(girlFriend);//{name: "  ", age: 18, skill: ƒ, callback: undefined}

var girlFriend2 = factory('  ',81);
console.log(girlFriend2);   //{name: "  ", age: 81, skill: ƒ, callback: undefined}

console.log(girlFriend==girlFriend2);//false

var girlFriend = factory('  ',20,function(){
    console.log("      ！");
});
//    
girlFriend3.callback();

コンストラクタモード
すべての属性と方法はthisで定義され、newキーワードで呼び出されます.
newキーワードは何をしましたか?1.新しいオブジェクトを作成します.2.新しいオブジェクトにthisを向けます.3.構造関数を実行するコード4.この新しいオブジェクトに戻ります.

利点:誰によって作成されたかを識別することができない解決策

欠点:同じ方法を実現すると、それぞれ新しい空間を作ってこれらの方法を保存します.これは空間の浪費をもたらします.

            function Human(type,name,gender,age){
                this.type = type;
                this.name = name;
                this.gender = gender;
                this.age = age;
                this.skill = function(){
                    console.log(' ');
                }
            }
            var shiyan = new Human('   ','  ',' ',20);
            console.log(shiyan);//Human {type: "   ", name: "  ", gender: " ", age: 20, skill: ƒ}
            var xiawa = new Human('   ','  ',' ',1000);
            console.log(xiawa);//Human {type: "   ", name: "  ", gender: " ", age: 1000, skill: ƒ}

            console.log(xiawa.__proto__.constructor);//      
            console.log(xiawa.skill==shiyan.skill);//false

プロトタイプ

利点:継承を実現し、構造関数の空間浪費の問題を解決しました.

欠点:カスタマイズできない

function Animal(){};
Animal.prototype.type='cat';
Animal.prototype.skill=function(){
    console.log('eat')
}
var mao = new Animal();
mao.skill();//eat
var mao2 = new Animal();
mao2.skill();//eat
console.log(mao.skill==mao2.skill);//true
console.log(mao2==mao);//false

混合モード(プロトタイプモードとコンストラクターモードの結合)
彼ら2つの長所を結びつけた.

function Student(cls,name,age,gender,num){
    this.cls=cls;  
    this.name=name;
    this.age=age;
    this.gender= gender;
    this.num = num;
}
//     ，       ，    
Student.prototype.skill=function(){
      console.log('  ');
}
var student1 = new Student('01','  ',12,' ','0101');
console.log(student1);

var student2 = new Student('01','  ',12,' ','0101');
console.log(student1.skill==student2.skill);//true
console.log(student1==student2);//false
            
//student.gender          
console.log(student1.gender==student2.gender);//true

.pacスクリプト文法