ホームページ > 記事 > ウェブフロントエンド > JavaScript でオブジェクトを作成するための 7 つのパターン
JavaScript でオブジェクトを作成するための 7 つのパターン
- 黄舟オリジナル
- 2017-02-07 14:19:32829ブラウズ
ECMA-262 はオブジェクトを「属性を持たないコレクション。その属性には基本的な値、オブジェクト、または関数を含めることができます。」と定義しています。厳密に言えば、これはオブジェクトが特定の順序ではない値のセットであると述べているのと同じです。 。オブジェクトの各プロパティまたはメソッドには名前があり、それぞれの名前は値にマップされます。このため、ECMAScript オブジェクトはハッシュ テーブルとして考えることができます。つまり、値がデータまたは関数になる名前のペアのセットにすぎません。
カスタム オブジェクトを作成する最も簡単な方法は、以下に示すように、Object のインスタンスを作成し、それにプロパティとメソッドを追加することです:
var person = new Object();
person.name = "liubei";
person.age = 29;
person.job = "shayemuyou";
person.sayName = function(){
alert(this.name);
}上の例では、person という名前のオブジェクトが作成され、He は 3 つのプロパティとメソッドを追加しました。方法。 SayName() メソッドは name 属性を表示するために使用され、this.name は person.name として解析されます。初期の開発者はオブジェクトの作成にこのモードをよく使用していましたが、その後、オブジェクト リテラル メソッドがオブジェクトの作成に使用されるようになりました。上記のオブジェクト リテラル構文を使用した例は次のように記述できます:
var person = { name:"liubei", age:29, job:"shayemuyou", sayName:function(){ alert(this.name); }} この例の person オブジェクトは前のオブジェクトと同じであり、同じプロパティとメソッドを持ちます。
Object コンストラクターまたはオブジェクト リテラル メソッドを使用して単一のオブジェクトを作成できますが、これらのメソッドには明らかな欠点があります。同じインターフェイスを使用して多数のオブジェクトを作成すると、大量の重複コードが生成されます。この問題を解決するために、人々は工場パターンの変形を使用し始めました。
1 ファクトリ パターン
ファクトリ パターンは、ソフトウェア エンジニアリングの分野でよく知られている設計パターンであり、特定のオブジェクトを作成するプロセスを抽象化します。 ECMAScript ではクラスを作成できないことを考慮して、開発者は、以下に示すように、特定のインターフェイスを使用してオブジェクト作成の詳細をカプセル化する関数を発明しました。
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 person1 = createPerson("wei",25,"software");
var person2 = createPerson("bu",25,"software");関数 createperson() は、受け入れるすべてのパラメーターを含むファイルを構築できます。必要な情報が記載されています。この関数は複数回呼び出すことができ、毎回 3 つのプロパティと 1 つのメソッドを含むオブジェクトを返します。ファクトリ パターンは、複数の同様のオブジェクトを作成する問題を解決しますが、オブジェクトの識別の問題、つまり、これがどのオブジェクト タイプであるかを知る方法の問題は解決しません。
2 コンストラクター パターン
Array や Object などのネイティブ コンストラクターは、実行時に実行環境に自動的に表示されます。さらに、カスタム コンストラクターを作成して、カスタム型のプロパティとメソッドを定義できます。たとえば、コンストラクターを使用して前の例を書き直すことができます:
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
}}
var person1 = new Person("wei",25,"software");
var person2 = new Person("bu",25,"software");この例では、 person() 関数が createperson() 関数を置き換えます。 Person() と createperson() の違いは次のとおりです。
明示的なオブジェクトの作成はありません- このオブジェクトにプロパティとメソッドを直接割り当てます
- return ステートメントはありません
console.log(person1.constructor == Person); //true console.log(person2.constructor == Person); //true console.log(person1.constructor == Person); //true console.log(person2.constructor == Person); //trueオブジェクトのコンストラクター属性は、最初にオブジェクトの種類を識別するために使用されます。ただし、オブジェクト タイプの検出に関しては、instanceof 演算子の方が信頼性が高くなります。この例で作成するオブジェクトはすべて Object オブジェクトのインスタンスであり、また Person オブジェクトのインスタンスでもあります。これは、instanceof 演算子によって確認できます。
console.log(person1 instanceof Object); //true console.log(person1 instanceof Person); //true console.log(person2 instanceof Object); //true console.log(person2 instanceof Person); //trueカスタム コンストラクターを作成すると、将来的にはそのインスタンスを特定の型として識別できるようになり、この点でコンストラクター パターンがファクトリ パターンよりも優れたパフォーマンスを発揮します。この例で、person1 と person2 が両方とも Object のインスタンスである理由は、すべてのオブジェクトが Object から継承しているためです。
コンストラクターの主な問題は、各メソッドをインスタンス上で再作成する必要があり、メモリの無駄が発生することです。前の例では、person1 と person2 の両方にsayName() という名前のメソッドがありますが、2 つのメソッドは同じ Function のインスタンスではありません。 ECMAScript の関数もオブジェクトであることを忘れないでください。そのため、関数を定義するたびにオブジェクトがインスタンス化されます。論理的な観点から見ると、この時点のコンストラクターは次のように定義できます。
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = new Function("alert(this.name);") //与声明函数在逻辑上是等价的}
从这个角度来看构造函数，更容易看明白每个Person实例都会包含一个不同的Function实例的本质。说明白些，会导致不同的作用域链和标识符解析，但是创建Function新实例的机制仍然是相同的。因此，不同实例上的同名函数是不相等的，以下代码可以证实这一点。
alert(person1.sayName == person2.sayName); //false
然而，创建两个完成同样任务的Function实例的确没有必要；况且有this对象在，根本不用在执行代码前就把函数绑定到特定的对象上。因此，可以像下面这样，通过把函数定义转移到构造函数外部来解决这个问题。
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;}
function sayName(){
alert(this.name);这样做解决了多个函数解决相同问题的问题，但是有产生了新的问题，在全局作用域中实际上只被某个对象调用，这让全局对象有点名不副实。更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在这些问题可以使用原型模式来解决。
3 原型模式
我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的实例就是让所有实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象的实例信息，而是可以将这些信息直接添加到原型对象中，如下所示：
function Person(){
}
Person.prototype.name = "wei";
Person.prototype.age = 27;
Person.prototype.job = "Software";
Person.prototype.sayName = function(){
alert(this.name);
}
var person1 = new Person();
person1.sayName(); //"wei"
var person2 = new Person();
person2.sayName(); //"wei"
alert(person1.sayName == person2.sayName);在此，我们将sayName()方法和所有的属性直接添加在了Person的prototype属性中，构造函数变成了空函数。即便如此，我们仍然可以通过构造函数来创建新对象，而且新对象还会具有相同的属性和方法。但是与构造函数不同的是，新对象的这些属性和方法是由所有实例共享的。换句话说，person1和person2访问的都是同一组属性和同一个sayName()函数。要理解原型模式的工作原理，就必须先理解ECMAScript中原型对象的性质。
原型对象的本性由于篇幅太长将会在下一章节详细分析。上面我们说了原型模式的好处，接下来我们来看一下原型模式的缺点。原型模式省略了为构造函数传递参数的这一环节，结果所有实例在默认情况下都具有相同的属性值。这会在某些程度上带来一种不便，这并不是原型模式最大的问题，因为如果我们想为一个通过原型模式创建的对象添加属性时，添加的这个属性就会屏蔽原型对象的保存的同名属性。换句话说，就是添加的这个属性会阻止我们去访问原型中的属性，但并不会改变原型中的属性。
原型模式最大的问题是由其共享的本质所导致的。原型中所有的属性被很多实例共享，这种共享对函数非常合适，对包含基本值的属性也说的过去，但是对引用类型的属性值来说问题就比较突出了，下面我们来看一个例子：
function Person(){}Person.prototype = {
constructor:Person,
name:"wei",
age:29,
friends:["乾隆","康熙"],
sayName:function(){
alert(this.name);
}}
var person1 = new Person();
var person2 = new Person();
person1.friends.push("嬴政");
console.log(person1.friends); //["乾隆","康熙","嬴政"]
console.log(person2.friends); //["乾隆","康熙","嬴政"]
console.log(person1.friends === person2.friends); //true上面的例子中，Person.prototype对象有一个名为friends的属性，该属性包含一个字符串数组。然后创建了两个Person的实例，接着修改person1.friends引用的数组，向数组中添加一个字符串，由于数组存在于Person.prototype中而不是person1中，所以person2.friends也会被修改。但是一般每个对象都是要有属于自己的属性的，所以我们很少看到有人单独使用原型模式来创建对象。
4 组合使用构造函数模式和原型模式
创建自定义类型最常见的方式就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度的节省了内存。另外，这种混成模式还支持向构造函数传递参数；可谓是集两种模式之长。下面的代码重写了前面的例子：
function Person(name, age){
this.name = name;
this.age = age;
this.friends = ["乾隆","康熙"];}
Person.prototype = {
constructor:Person,
sayName:function(){
alert(this.name);
}}
var person1 = new Person("wei",29);
var person2 = new Person("bu",25);
person1.friends.push("嬴政");
console.log(person1.friends); //["乾隆", "康熙", "嬴政"]
console.log(person2.friends); //["乾隆", "康熙"]
console.log(person1.friends === person2.friends); //false
console.log(person1.sayName === person2.sayName); //true在这个例子中，实例属性都是在构造函数中定义的，而由所有实例共享的属性constructor和方法sayName()则是在原型中定义的。所以修改了person1.friends并不会改变person2.friends，因为他们分别引用了不同的数组。
这种构造函数与原型模式混成的模式，是目前在ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说，这是用来定义引用的一种默认形式。
5 动态原型模式
有其他OO语言经验的开发人员在看到独立的构造函数和原型时，很可能会感到非常的困惑。动态原型模式就是用来解决这个问题的一个方案，它把所有的信息都封装在了构造函数中，而通过构造函数中初始化原型（仅在必要的情况下），又保持了同时使用构造函数和原型的优点。换句话说，可以通过检查某个应该存在的方法是否有效，来决定是否要初始化原型。来看一个例子：
function Person(name, age){
this.name = name;
this.age = age;
this.friends = ["乾隆","康熙"];
//注意if语句
if(typeof this.sayName!="function"){
Person.prototype.sayName = function(){
alert(this.name);
}
}}
var person1 = new Person("wei",29);
person1.friends.push("嬴政");
person1.sayName();注意构造函数代码中的if语句，这里只在sayName()方法不存在的情况下才会将它添加到原型中。这断代码只有在第一次调用构造函数的时候才会被执行。此后，原型已经被初始化，不需要再做什么修改。不过要记住，这里所做的修改能立即在所有实例中得到反映。因此，这种方法可以说确实非常完美。其中if语句检查的是初始化之后应该存在的任何方法和属性–不必再用一大堆if来检查每个属性和方法，只检查其中一个即可。对于采用这样模式创建的对象，还可以使用instanceof操作符来确定他的类型。
注意：使用动态原型模式时，不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型，那么就会切断现有的实例与新原型之间的联系。
6 寄生构造函数模式
通常，在上述几种模式都不适合的情况下可以使用寄生构造函数模式。这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象，但从表面看，这个函数又很像典型的构造函数。来看一个例子：
function Person(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 person = new Person("wei",29,"banzhuan");
person.sayName(); //"wei"在这个例子中，Person函数创建了一个对象，并以相应的属性和方法初始化该对象，然后返回了这个对象。除了使用new操作符把使用的包装函数叫做构造函数之外，这个模式和工厂模式并没有多大的区别。构造函数在不返回值的情况下，会默认返回新对象的实例。而通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。
这个模式可以在特殊的情况下来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array构造函数，因此可以使用这个模式：
function SpecialArray(){
//创建数组
var values = new Array();
//添加值
values.push.apply(values,arguments);
//添加方法
values.toPipedString = function(){
return this.join("|");
}
//返回数组
return values;
}
var colors = new SpecialArray("red","blue","green");
console.log(colors.toPipedString()); //red|blue|green在这个例子中，我们创建了一个名为SpecialArray的构造函数。在这个函数的内部，首先创建了一个数组，然后push()方法初始化了数组的值。随后又给数组实例添加了toPipedString()方法，用来返回以竖线分隔的数组值。最后将数组以函数的形式返回。接着，我们调用了SpecialArray构造函数，传入了初始化的值，并调用了toPipedString()方法。
关于寄生构造函数模式，有一点需要声明：首先，返回的对象与构造函数或者构造函数的原型没有任何关系；也就是说，构造函数返回的对象与在构造函数外部创建的对象没有什么不同。为此，不能依赖instanceof操作符来确定对象的类型。由于存在这一的问题，我们建议在可以使用其他模式的情况下不要使用这种模式。
7 稳妥构造函数模式
道格拉斯·克拉克福德发明了JavaScript中的稳妥对象这个概念。所谓稳妥对象，是指没有公共属性，而且其方法也不引用this对象。稳妥对象最适合在一些安全环境中（这些环境会禁止使用this和new），或者在防止数据被其他应用程序改动时使用。稳妥构造函数遵循的与寄生构造函数类似的模式，但又两点不同：一是新创建对象的实例方法不引用this；二是不使用new操作符调用构造函数。按照稳妥构造函数的要求，可以将前面的Person构造函数重写如下：
function Person(name, age, job){
//创建要返回的新对象
var o = new Object();
//可以在这里定义私有变量和函数
//添加方法
o.sayName = function(){
alert(this.name);
};
//返回对象
return o;
}注意，在以这种模式创建的对象中，除了使用sayName()方法之外，没有其他办法访问name的值。可以像下面使用稳妥的Person构造函数：
var person =Person("weiqi",22,"banzhuan");
person.sayName(); //weiqi这样，变量person中保存的是一个稳妥对象，而除了sayName()方法外，没有别的方式可以访问其他数据成员。即使有其他代码会给这个对象添加方法或数据成员，但也不可能有别的办法访问传入到构造函数中的原始数据。稳妥构造函数模式提供的这种安全性，使得他非常适合在某些安全执行环境–例如，ADsafe(www.adsafe.org)提供的环境下使用。
注: 寄生コンストラクター パターンと同様に、安全なコンストラクター パターンを使用して作成されたオブジェクトとコンストラクターの間には関係がないため、そのようなオブジェクトに対しては、instanceof 演算子は意味を持ちません。
上記は、JavaScript でオブジェクトを作成する 7 つのモードの内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。