ホームページ > 記事 > ウェブフロントエンド > JS でオブジェクトを作成するいくつかの方法を共有する

JS でオブジェクトを作成するいくつかの方法を共有する

小云云オリジナル: 2018-03-13 18:04:211429ブラウズ

この記事では主に JS でオブジェクトを作成するいくつかの方法を紹介します。お役に立てれば幸いです。

1. ネイティブコンストラクターを使用して、特定の型のオブジェクトを作成します

  var person =new Object();
    person.name="wangwu";
    person.age="20";
    person.sayName=function(){
    alert(this.name);
}

2. オブジェクトリテラルを使用します

var person = {
    name:"wangwu",
    age:"20",
    sayName: function(){
        alert(this.name);
    }
}

概要: どちらの方法も単一のオブジェクトを作成するために使用できますが、多数のオブジェクトを作成する場合には明らかな欠点があります。同じインターフェイスを持つオブジェクトでは、大量の重複コードが生成されます。

3. ファクトリパターンを使用する

function createPerson(name,age){
    var o=new Object();
    o.name=name;
    o.age=age;
    o.sayName=function(){
            alert(this.name);
    };
    return o;
}
var person1=createPerson("wangwu",20);

特定のオブジェクトを作成するプロセスを抽象化し、関数を発明し、その関数を使用して、特定のインターフェイスでオブジェクトを作成する詳細をカプセル化します。

4. コンストラクターパターン

function  Person(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
        alert(this.name);
    };
}
var person1=new Person("wangwu",20);

カスタムオブジェクトタイプのプロパティとメソッドを定義するカスタムコンストラクターを作成します。

5. プロトタイプパターン

function Person(){
}
Person.prototype.name="wangwu";
Person.prototype.age=20;
Person.prototype.sayName=function(){
    alert(this.name);
}
var person1=new Person();
person1.sayName(); //wangwu

作成するすべての関数にはプロトタイプ属性があり、この属性はオブジェクトを指すポインターであり、このオブジェクトの目的は、特定の型で表現できるすべてのインスタンスを含めることです。共有プロパティとメソッド。プロトタイプパターンの欠点は、初期化パラメータをコンストラクターに渡すステップが省略されることです。その結果、すべてのインスタンスがデフォルトで同じ属性値を取得します。参照型の値の場合、問題はさらに顕著になります。

6. コンストラクターパターンとプロトタイプパターンの併用

function Person(name,age){
    this.name=name;
    this.age=age;
    this.friends=["wangwu","zhangsan"];
}
Person.prototype={
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}
var person1=new Person("wangwu",20);
var person2=new Person("zhangsan",23);
person1.friends.push("lisi");
alert(person1.friends); //"wangwu,zhangsan,lisi"
alert(person2.friends); //"wangwu,zhangsan"

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);
    };
}
}
var  friend=new Person("wangwu",20);
friends.sayName();

9. 安全なコンストラクターパターン

function Person(name,age){
    var 0=new Object();
    o.name="wangwu";
    o.age=20;
    o.sayName=function(){
        alert(this.name);
    };
    return o;
}
var friend=new Person("wangwu",20);
friend.sayName(); //"wangwu"

JS でオブジェクトを作成するいくつかの方法を共有する

関連記事