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を使用してください。

新しいオブジェクトを作成します。 [[プロトタイプ]] リンク

この新しいオブジェクトは関数呼び出しの This

にバインドされます

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

person1instanceofObject // true
person1instanceof //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()

Set Person.prototype = one with withオブジェクトはオブジェクト リテラルの形式で作成されますが、これにより .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 が同じプロトタイプを指している場合、それはインスタンス 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

動的プロトタイプモード

動的プロトタイプモードは、初期化中にすべての情報をコンストラクターにカプセル化します。特定の should を検出することで、プロトタイプを初期化する必要があるかどうかを判断するために既存のメソッドが有効です

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操作符对他们没有意义

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS进行E-mail地址格式验证代码

Vue.js表单控件使用总结

Vue.js配置登录表单代码步骤剖析

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