JS でオブジェクトを作成するいくつかの方法を共有する-jsチュートリアル-php.cn

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

小云云

リリース： 2018-03-13 18:04:21

オリジナル

1466 人が閲覧しました

この記事では主に 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"

ログイン後にコピー