コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でオブジェクトを作成する 7 つの方法 (概要、必読)

JavaScript でオブジェクトを作成する 7 つの方法 (概要、必読)

亚连
リリース： 2018-05-19 09:27:52
オリジナル
1306 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル：
javascript js 要約する
ソース：php.cn
前の記事：JavaScript コンストラクターと new 演算子 (重要なポイント、必読) 次の記事：JavaScriptはJavaでMapオブジェクト関数を実装します（詳細な回答、コードが添付されています）
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート