JavaScript のオブジェクト

JavaScript の概念に関する一連の投稿を開始しています。これはほんの始まりにすぎません。この最初の投稿では、JavaScript でデータ構造がどのように機能するかを理解するために不可欠なオブジェクトの基本概念について説明します。

この記事と他のいくつかのトピックの続きとなる次の投稿にご期待ください。

---

オブジェクトとは何ですか?

現実世界では、オブジェクトは実体 (現実または抽象) です。例: 鉛筆、車、ノート。これらのオブジェクトにはそれぞれ特定のプロパティがあります。例: 青い車、赤鉛筆、大きなノート。

JavaScript では、オブジェクトはプロパティを収集する独立したエンティティです。プロパティは、名前と値の間の関連付け、つまりオブジェクトを説明する情報です。

const carro = {
  cor: "amarelo",
  tamanho: "grande",
};

この例では、色とサイズは車オブジェクトのプロパティであり、それぞれに関連付けられた値があります。

オブジェクトの作成

リテラル構文

リテラル オブジェクトは単純かつ直接的な方法で作成され、値はすでに手動で定義されています。この構文は、オブジェクトのプロパティの固定セットがある場合に最適です。

const pessoa = {
  nome: "João",
  idade: 19,
  rua: "Rua Erva Daninha",
};

このタイプのオブジェクトは、プロパティが頻繁に変更されない場合、または固定値を持つオブジェクトをすばやく作成する必要がある場合に便利です。

コンストラクター関数

コンストラクター関数は、特に類似したオブジェクトが複数必要な場合に、オブジェクトを動的に作成するために使用されます。 new キーワードを使用すると、コンストラクター関数を参照する新しいオブジェクトが作成されます。

function NomeDoConstrutor(parâmetros) {

  this.propriedade1 = valor1;
  this.propriedade2 = valor2;

  this.método = function() {
    // Código do método
  };
}

const variavel1 = new NomeDoConstrutor(parâmetros)
const variavel2 = new NomeDoConstrutor(parâmetros)

より伝統的で学術的ではない例として:

function Pessoa(nome, idade) {
  this.nome = nome;
  this.idade = idade;

  this.cumprimentar = function () {
    console.log("Olá, meu nome é " + this.nome);
  };
}

const pessoa1 = new Pessoa("João", 30);
const pessoa2 = new Pessoa("Maria", 25);

pessoa1.cumprimentar(); // Olá, meu nome é João
pessoa2.cumprimentar(); // Olá, meu nome é Maria

この場合、出力には、person 関数で規定されたモデルの person1 変数と person2 変数で割り当てられた値が「スタンプ」されます。

「これ」という言葉の使い方

コンストラクター内では、this キーワードを使用して、作成されるオブジェクトを参照します。これにより、オブジェクトの動的なプロパティとメソッドを定義できるようになります。

たとえば、上記のコードでは、this.name と this.age がオブジェクトのプロパティを定義し、greet メソッドはオブジェクトに関連付けられた関数です。

コンストラクターでの継承

JavaScript の継承はプロトタイプを通じて機能します。あるオブジェクトを別のオブジェクトから直接作成する代わりに、あるオブジェクトが別のオブジェクトからプロパティとメソッドを継承できる階層を作成します。これは、call メソッドまたは apply メソッドを使用して行われます。

const carro = {
  cor: "amarelo",
  tamanho: "grande",
};

継承はどのように機能しますか?

Pessoa.call(this, nome) を使用すると、Pessoa コンストラクターを呼び出して Student オブジェクトのコンテキストを渡します。これにより、student1 オブジェクトは Person から name プロパティを継承し、Student 関数専用の age プロパティも持つことになります。

コンストラクター関数は、多くのプロパティと変数値を持つメソッドを持つ複数のオブジェクトを作成する必要がある場合に最もよく使用されます。この場合、複数のオブジェクトを手動で記述するよりも、コンストラクター オブジェクトを「スタンプ」として使用する方が適切です。

コンストラクターオブジェクト

コンストラクター関数を使用して作成されたオブジェクトは、new 演算子によって生成されたインスタンスです。各インスタンスには独自のプロパティがありますが、コンストラクター関数のプロトタイプで定義されたメソッドを共有します。

これは、コンストラクター関数から複数のオブジェクトを作成すると、メソッドは同じですが、プロパティの値が異なることを意味します。

const pessoa = {
  nome: "João",
  idade: 19,
  rua: "Rua Erva Daninha",
};

• この場合、new 演算子は新しいオブジェクトを作成し、コンテキスト (this) をコンストラクター関数にバインドします

• 共有メソッドの場合、コンストラクター関数のプロトタイプを追加する方が効率的です。これにより、メモリ内の重複が回避されます。
  

function NomeDoConstrutor(parâmetros) {

  this.propriedade1 = valor1;
  this.propriedade2 = valor2;

  this.método = function() {
    // Código do método
  };
}

const variavel1 = new NomeDoConstrutor(parâmetros)
const variavel2 = new NomeDoConstrutor(parâmetros)

コンストラクター関数のプロトタイプでメソッドを定義することで、コードの重複を回避します。各オブジェクトがメソッドのコピーを持つのではなく、すべてのオブジェクトが同じメソッドを共有するため、メモリが節約されます。

new 演算子は新しいオブジェクトを作成し、コンテキスト (this) をコンストラクター関数にバインドします。

共有メソッドの場合、メモリ内の重複を避け、コンストラクター関数のプロトタイプに追加する方が効率的です。

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