JavaScript でオブジェクトを作成する 3 つの方法

この記事では、js でオブジェクトを作成するさまざまな方法と、それぞれの方法の長所と短所を説明します。具体的な内容は次のとおりです。

オブジェクトを作成する最初の方法:

JSON オブジェクトを作成する
推奨される使用場面:関数のパラメータ、一時的に 1 回だけ使用されるシナリオ。たとえば、関数プロトタイプ オブジェクトを設定します。

var object = {
 name: "Eric",
 age: 24,
 sayHi: function(){
  console.log("My name is "+ this.name + " this year is " + this.age + "years old.")
 }
};

オブジェクトを作成する 2 番目の方法:

Object オブジェクトを作成する

var object = new Object();
object.name = "Eric";
object.age = 24;
object.sayHi = function(){....};

オブジェクトを作成する上記 2 つの方法の欠点: オブジェクト作成のテンプレートとして使用できません。つまり、新しいオブジェクトを構築することはできません。

オブジェクトを作成する 3 番目の方法:

function Person() {
 this.name = "Eric";
 this.age = 24;
 this.sayHi = function(){
  console.log(this.name);
 }
}
 
var object1 = new Person();
var object2 = new Person();

このオブジェクト作成方法は、最初の 2 つの方法の欠点を解決します。オブジェクト作成のテンプレートとして使用でき、複数のオブジェクトを作成するために再利用できます。

new演算子の役割:

コンストラクター(new以降の関数)を実行し、コンストラクター内に空のオブジェクトを作成します
前の部分で作成した空のオブジェクトをコンストラクターのプロトタイプオブジェクトと関連付けます
次にこのPointsを置きます現在の空のオブジェクトに戻ります
コンストラクターの実行後、戻りがない場合は、空のオブジェクトがオブジェクトに返されます

new演算子の原理

3番目の方法には欠点があります:オブジェクトの内部関数は各オブジェクト 多数のオブジェクトを作成すると、メモリの無駄になります。この関数の動作は、すべてのオブジェクトで共有でき、各オブジェクトがコピーを保存する必要がありません。したがって、関数をプロトタイプに入れて宣言すると、すべてのオブジェクトがパブリック関数を持つようになり、メモリにはコピーが 1 つだけ保持されます。すべての属性はオブジェクト内に書き込まれます

第 3 の方法 beta1:

function Person() {
 this.name = 'Eric';
 this.age = 24;
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person();
var object2 = new Person();

アップグレードを続ける beta2:

function Person(name,age) {
 this.name = name || "";
 this.age = age || "";
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person(name1,age1);
var object2 = new Person(name2,age2);

問題点: 1. 呼び出し元が渡すパラメーターの順序を変更すると、次のようになります。役に立たない
問題: 2. パラメータの増減により関数の宣言が変更され、呼び出し先も変更される可能性があります。

解決方法: beta3 のアップグレードを継続します:

function Person(option) { //用一个对象把所有参数覆盖
 this.name = option.name || "";
 this.age = option.age || "";
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person({
  name: "Eric",
  age: 24
 });
var object2 = new Person({
  name: "XXX",
  age: xx
 });

最適化を継続し、初期化コードを init 関数に追加します

beta4 のアップグレードを継続します:

function Person(option) {
 this._init(option);
}
Person.prototype = {
 _init: function (option){
  this.name = option.name;
  this.age = option.age;
 },
 sayHi: function(){
  console.log("HI");
 }
};
 
var object1 = new Person({
  name: "Eric";
  age: 24
 });
object1.sayHi();