JavaScript を使用してオブジェクトを作成する 7 つの方法の例

この記事では、JavaScript でオブジェクトを作成する 7 つの方法を主に紹介します。具体的な操作手順については、以下の詳細な説明を参照してください。それに。

JavaScript でオブジェクトを作成する方法はたくさんあります。オブジェクト コンストラクターまたはオブジェクト リテラルを使用して単一のオブジェクトを作成することもできます。明らかに、これら 2 つの方法では大量の繰り返しコードが生成されるため、大量生産には適していません。次に、オブジェクトを作成する 7 つの非常に古典的な方法を紹介します。それぞれに独自の長所と短所もあります。

function createPerson(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(this.name)
 }
 return o
}
var person1 = createPerson(‘Jiang', ‘student')
var person2 = createPerson(‘X', ‘Doctor')

このファクトリ関数は何度でも呼び出すことができます。 2 つのプロパティを含むプロパティと、メソッドを含むオブジェクトを返します

ファクトリ パターンは、複数の類似したオブジェクトを作成する問題を解決しますが、オブジェクトの識別問題は解決しません。つまり、オブジェクトのタイプを知ることができません

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

function Person(name, job) {
 this.name = name
 this.job = job
 this.sayName = function() {
  console.log(this.name)
 }
}
var person1 = new Person(‘Jiang', ‘student')
var person2 = new Person(‘X', ‘Doctor')

いいえ オブジェクトを明示的に作成するには、newを使用してこのコンストラクターを呼び出します。 newを使用した後、次の操作が自動的に実行されます

新しいオブジェクトを作成します

この新しいオブジェクトが実行されます。 [[プロトタイプ]] リンク

この新しいオブジェクトは関数呼び出しにバインドされます

このオブジェクトを返します

このメソッドを使用してオブジェクトを作成すると、オブジェクトのタイプを検出できます

person1instanceofObject // true
person1instanceof Person //true
ただし、コンストラクターを使用してオブジェクトを作成すると、各インスタンスで各メソッドを再作成する必要があります。一度作成してください

プロトタイプ パターン

function Person() {
}
Person.prototype.name = ‘Jiang'
Person.prototype.job = ‘student'
Person.prototype.sayName = function() {
 console.log(this.name)
}
var person1 = new Person()

プロトタイプ オブジェクトに情報を直接追加します。プロトタイプを使用する利点は、コンストラクターでオブジェクト インスタンス情報を定義する必要がなく、すべてのインスタンス オブジェクトがそれに含まれるプロパティとメソッドを共有できることです。

プロトタイプは非常に重要な概念であり、プロトとプロトタイプの関係と違いを理解するための記事で詳しく説明されています

より簡単な書き方

function Person() {
}
Person.prototype = {
 name: ‘jiang',
 job: ‘student',
 sayName: function() {
  console.log(this.name)
 }
}
var person1 = new Person()

Person.prototype をオブジェクトと等しく設定します オブジェクトリテラル形式で作成されますが、これにより .constructor は person を指さなくなります。

このメソッドを使用すると、デフォルトの person.prototype オブジェクトが完全に書き換えられるため、.constructor はここには存在しません

この属性が必要な場合は、手動で追加できます

Person.prototype.constructor === Person // false

function Person() {
}
Person.prototype = {
 constructor：Person
 name: ‘jiang',
 job: ‘student',
 sayName: function() {
  console.log(this.name)
 }
}

しかし、このメソッドはコンストラクター属性はデフォルトでは列挙可能ではありませんが、直接設定すると列挙可能になります。したがって、可能であれば、Object.defineProperty メソッド

Object.defineProperty(Person.prototype, ‘constructor', {
 enumerable: false,
 value: Person
})

欠点

プロトタイプを使用すると、すべてのプロパティが共有されるため、大きな利点になりますが、いくつかの欠点も生じますすべてプロトタイプ内にありますプロパティ インスタンスは多くのインスタンスによって共有されるため、関数に非常に適しています。結局のところ、基本的な値を含むプロパティではほとんど不可能です。インスタンス プロパティはプロトタイプのプロパティを保護できます。ただし、参照型の値では問題が発生します

function Person() {
}
Person.prototype = {
 name: ‘jiang',
 friends: [‘Shelby', ‘Court']
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van')
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) //[“Shelby”, “Court”, “Van”]
console.log(person1.friends === person2.friends) // true

インスタンス person1 と person2 が同じプロトタイプを指している場合、コンストラクターを使用したインスタンスの組み合わせにも反映されます。パターンとプロトタイプ パターン

これは、カスタム タイプを作成する最も広く使用され、認識されている方法です。上記のパターンの欠点を解決できます

このパターンを使用すると、各インスタンスがインスタンス属性の独自のコピーを持つことができますが、同時にメソッドへの参照を共有できますこの場合、インスタンス属性が変更されたとしても参照型の値は、他のインスタンスの属性値には影響しません

function Person(name) {
 this.name = name
 this.friends = [‘Shelby', ‘Court']
}
Person.prototype.sayName = function() {
 console.log(this.name)
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van')
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) // [“Shelby”, “Court”]
console.log(person1.friends === person2.friends) //false

動的プロトタイプモード

動的プロトタイプモードは、初期化中に、コンストラクター内のすべての情報をカプセル化します。プロトタイプを初期化するかどうかを決定する際にメソッドが有効です

function Person(name, job) {
 // 属性
 this.name = name
 this.job = job

 // 方法
 if(typeof this.sayName !== ‘function') {
  Person.prototype.sayName = function() {
    console.log(this.name)
  }
 }

}
var person1 = new Person(‘Jiang', ‘Student')
person1.sayName()

sayNameメソッドが存在しない場合のみプロトタイプに追加されます。このコードは、コンストラクターが初めて呼び出されたときにのみ実行されます。

それ以降、プロトタイプは初期化されており、変更を加える必要はありません

ここでプロトタイプに加えられた変更は、すべてのインスタンスに即座に反映されます

次に、if ステートメントは、その後に存在する必要がある属性をチェックできます。したがって、すべてのプロパティとメソッドをチェックするために大量の if ステートメントを使用する代わりに、1 つだけをチェックするだけです

Parasite Constructor Pattern

このパターンの基本的な考え方は、その関数が次のような関数を作成することです。オブジェクトを作成するコードをカプセル化して、新しく作成されたオブジェクトを返すだけです

function Person(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(this.name)
 }
 return o
}
var person1 = new Person(‘Jiang', ‘student')
person1.sayName()

这个模式，除了使用new操作符并把使用的包装函数叫做构造函数之外，和工厂模式几乎一样

构造函数如果不返回对象，默认也会返回一个新的对象，通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值

稳妥构造函数模式

首先明白稳妥对象指的是没有公共属性，而且其方法也不引用this。

稳妥对象最适合在一些安全环境中（这些环境会禁止使用this和new），或防止数据被其他应用程序改动时使用

稳妥构造函数模式和寄生模式类似，有两点不同:一是创建对象的实例方法不引用this，而是不使用new操作符调用构造函数

function Person(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(name)
 }
 return o
}
var person1 = Person(‘Jiang', ‘student')
person1.sayName()

和寄生构造函数模式一样，这样创建出来的对象与构造函数之间没有什么关系，instanceof操作符对他们没有意义

以上がJavaScript を使用してオブジェクトを作成する 7 つの方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。