JavaScriptでoopを書く方法

Web 開発において、JavaScript は非常に人気のあるプログラミング言語になっています。 JavaScript では、オブジェクト指向プログラミング (OOP) が重要な概念です。 OOP を使用すると、コードを構造化して重複を減らし、保守と拡張が容易になります。この記事ではJavaScriptでOOPを記述する方法を紹介します。

1. プロトタイプ (プロトタイプ) とコンストラクター (コンストラクター)

JavaScript では、オブジェクトのプロパティとメソッドはプロトタイプを通じて共有でき、コンストラクターはオブジェクトの作成に使用されます。新しいオブジェクトを作成し、そのプロパティを初期化します。以下は、コンストラクターとプロトタイプを使用した簡単な例です。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHi = function() {
  console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
}

var person1 = new Person("John", 30);
var person2 = new Person("Mary", 25);

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
person2.sayHi(); // Hi, my name is Mary and I'm 25 years old.

上の例では、name と age## を初期化する Person コンストラクターを定義します。 ＃プロパティ。次に、Person.prototype を使用して、sayHi メソッドを各 Person オブジェクトに追加します。このメソッドは、すべての Person オブジェクトで共有できます。 . .最後に、2 つの person オブジェクトを作成し、それらの sayHi メソッドを呼び出しました。

Class(クラス)

ES6 では、JavaScript にクラスの概念が導入され、キーワード

class を使用して実装されました。クラスは、オブジェクトを定義するための、よりクリーンで理解しやすい構文を提供します。

以下はクラスの使用例です:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
}

let person1 = new Person("John", 30);
let person2 = new Person("Mary", 25);

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
person2.sayHi(); // Hi, my name is Mary and I'm 25 years old.

上の例では、

class キーワードを使用して person クラスを定義します。また、name プロパティと age プロパティは、constructor メソッドで初期化されます。次に、挨拶を出力する sayHi メソッドを定義しました。最後に、2 つの person オブジェクトを作成し、それらの sayHi メソッドを呼び出しました。

継承

OOP では、継承とは、既存のオブジェクトから新しいオブジェクトを派生することを指します。新しいオブジェクトは、元のオブジェクト、プロパティとメソッドを継承します。 JavaScript では、

prototype と class を使用して継承を実現できます。

次に、

prototype を使用して継承を実装する例を示します。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHi = function () {
  console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
}

function Student(name, age, major) {
  Person.call(this, name, age);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayMajor = function() {
  console.log("My major is " + this.major + ".");
}

let person1 = new Person("John", 30);
let student1 = new Student("Mary", 25, "Computer Science");

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
student1.sayHi(); // Hi, my name is Mary and I'm 25 years old.
student1.sayMajor(); // My major is Computer Science.

上の例では、

person コンストラクターをプロトタイプ sayHi メソッドを追加しました。さらに、Student コンストラクターを定義し、call メソッドを使用して person コンストラクターを呼び出し、name と age# を初期化しました。 ## 属性を追加し、major 属性を追加しました。次に、Object.create メソッドを使用して person.prototype のコピーを作成し、それを Student.prototype に割り当てます。これにより、StudentObjects Person オブジェクトのプロパティとメソッドを継承できます。最後に、学生の専攻を出力する sayMajor メソッドを定義します。最後に、Person オブジェクトと Student オブジェクトを作成し、それらのメソッドを呼び出しました。 次に、

class

を使用して継承を実装する例を示します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>class Person { constructor(name, age) { this.name = name; this.age = age; } sayHi() { console.log(&quot;Hi, my name is &quot; + this.name + &quot; and I'm &quot; + this.age + &quot; years old.&quot;) } } class Student extends Person { constructor(name, age, major) { super(name, age); this.major = major; } sayMajor() { console.log(&quot;My major is &quot; + this.major + &quot;.&quot;); } } let person1 = new Person(&quot;John&quot;, 30); let student1 = new Student(&quot;Mary&quot;, 25, &quot;Computer Science&quot;); person1.sayHi(); // Hi, my name is John and I'm 30 years old. student1.sayHi(); // Hi, my name is Mary and I'm 25 years old. student1.sayMajor(); // My major is Computer Science.</pre><div class="contentsignin">ログイン後にコピー</div></div>上の例では、 # で person<p> クラスを定義します。 <code>#name および age プロパティは #constructor メソッドで初期化され、挨拶は sayHi メソッドで出力されます。次に、extends キーワードを使用して Student クラスを作成し、super キーワード コンストラクターを使用して person クラスの を呼び出しました。 メソッドを使用して、name プロパティと age プロパティを初期化し、major プロパティを追加します。最後に、学生の専攻を出力する sayMajor メソッドを定義します。最後に、Person オブジェクトと Student オブジェクトを作成し、それらのメソッドを呼び出しました。 結論:

JavaScript では、OOP は非常に重要な概念であり、オブジェクト、コンストラクター、プロトタイプ、クラスを使用すると、コードをより適切に整理し、重複を減らすことができます。継承はプロトタイプとクラスを通じて実現できます。 ES6 以降、JavaScript にはキーワード

class

が導入され、オブジェクトを定義するためのよりシンプルで理解しやすい構文が提供されます。可能な限り、OOP コードを記述するための適切なアプローチを選択することが重要です。これにより、プロジェクトの開発とメンテナンスに大きなメリットがもたらされます。

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