JavaScript でオブジェクトを作成するメソッド-jsチュートリアル-php.cn

JavaScript でオブジェクトを作成するメソッド

Patricia Arquette

リリース： 2024-10-13 06:22:02

オリジナル

1047 人が閲覧しました

Methods to create Objects in JavaScript

導入

JavaScript でオブジェクトを作成する方法は非常に限られています。

オブジェクトリテラル
Object() コンストラクター
Object.create()
コンストラクター関数
ES6 クラス

オブジェクトリテラル

おそらく、これが JavaScript でオブジェクトを作成する最も速くて簡単な方法です。これはオブジェクト初期化子とも呼ばれ、中括弧 ({}) で囲まれた、オブジェクトのプロパティ名と関連する値の 0 個以上のペアのカンマ区切りのリストです。

const newObject = {} // Simply create a new empty object

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

ログイン後にコピー

オブジェクトの値は、プリミティブデータ型または他のオブジェクトのいずれかになります。

Object() コンストラクター

組み込みの Object コンストラクターを使用してオブジェクトを作成できます。
渡された値が null または未定義の場合、または値が渡されなかった場合は、空のオブジェクトを作成して返します。
値がすでにオブジェクトである場合は、同じ値を返します。

// below options create and return an empty object
const ObjWithNoValue = new Object();
const ObjWithUndefined = new Object(undefined);
const ObjWithNull = new Object(null);

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

const sameObject = new Object(someObject);

sameObject['andAnotherKey'] = "one another value";

sameObject === newObject; // both objects are same.

ログイン後にコピー

Object.create()

このメソッドを使用すると、特定のプロトタイプを使用して新しいオブジェクトを作成できます。このアプローチにより、新しいオブジェクトがプロトタイプからプロパティとメソッドを継承できるようになり、継承のような動作が容易になります。

const person = {
  greet: function () {
    console.log(`Hello ${this.name || 'Guest'}`);
  }
}

const driver = Object.create(person);
driver.name = 'John';
driver.greet(); // Hello John

ログイン後にコピー

コンストラクター関数

ES6 より前は、これは複数の同様のオブジェクトを作成する一般的な方法でした。コンストラクターは単なる関数であり、新しいキーワードを使用してオブジェクトを作成できます。

「new」キーワードを使用してオブジェクトを作成するときは、関数名の最初の文字を大文字にすることをお勧めします。

function Person(name, location) {
  this.name = name;
  this.location = location;
  greet() {
    console.log(`Hello, I am ${this.name || 'Guest'} from ${this.location || 'Earth'}`);
  }
}

const alex = new Person('Alex');
alex.greet(); // Hello, I am Alex from Earth

const sam = new Person('Sam Anderson', 'Switzerland');
sam.greet(); // Hello, I am Sam Anderson from Switzerland

ログイン後にコピー

ES6クラス

より現代的なアプローチは、プロパティとメソッドを初期化するコンストラクター関数を持つクラスを使用して、他の OOP プログラミング言語と同じようにオブジェクトを作成するのに役立ちます。

class Person {
  constructor(name, location) {
    this.name = name || 'Guest';
    this.location = location || 'Earth';
  }

  greet() {
    console.log(`Hello, I am ${this.name} from ${this.location}`);
  }
}

const santa = new Person('Santa');
santa.greet(); // Hello, I am Santa from Earth

ログイン後にコピー

参考文献: