JavaScript でのオブジェクト指向プログラミングと継承をマスターする

現代の Web 開発において、JavaScript は不可欠な言語となっています。その中でも、オブジェクト指向プログラミング (OOP) と継承は、JavaScript 開発における 2 つの重要な側面です。この記事では、読者に JavaScript のオブジェクト指向プログラミングと継承を紹介し、具体的なコード例を示します。

1. オブジェクト指向プログラミング

オブジェクト指向プログラミングは、オブジェクトをプログラムの基本単位として使用し、データとデータ操作をカプセル化するプログラミング手法です。 JavaScript では、オブジェクトと関数を使用してオブジェクト指向プログラミングを実装できます。

1. オブジェクト

JavaScript では、オブジェクトはキーと値のペアのコレクションです。中括弧を使用してオブジェクトを定義できます。

var person = {
  name: 'Tom',
  age: 18,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

上記のコードでは、3 つのプロパティを含むオブジェクトを定義します。このうち、name と age は基本属性、sayHello はメソッドです。オブジェクトのプロパティとメソッドには、次の方法でアクセスできます。

console.log(person.name); // 输出 'Tom'
person.sayHello(); // 输出 'Hello, my name is Tom'

2. Function

JavaScript では、関数は特別な種類のオブジェクトです。関数を使用して、オブジェクトの作成、操作のカプセル化、クラスの定義を行うことができます。関数を使用してオブジェクトを作成する例を次に示します。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  }
}

var person = new Person('Tom', 18);
person.sayHello(); // 输出 'Hello, my name is Tom'

上記のコードでは、person 関数を定義して、name と # を含むオブジェクトを作成します。 # #ageプロパティのオブジェクト。ここでは、現在のオブジェクトを表すために this キーワードが使用されています。 new Person('Tom', 18) ステートメントを使用して、新しい Person オブジェクトを作成します。

2. 継承

継承はコードの再利用を実現する方法です。 JavaScript では、プロトタイプ チェーンを使用して継承を実装できます。

プロトタイプ チェーン

JavaScript のオブジェクトには、プロトタイプ オブジェクトへのポインターがあります。プロトタイプ オブジェクトを通じて継承を実装できます。つまり、子オブジェクトは親オブジェクトのプロパティとメソッドを継承します。

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

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
}

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var student = new Student('Tom', 18, 3);
student.sayHello(); // 输出 'Hello, my name is Tom'

上記のコードでは、

Person 関数と Student 関数を定義します。 Object.create() を使用して、新しいオブジェクトを Student.prototype として作成します。この新しいオブジェクトのプロトタイプは person.prototype です。このようにして、Student 関数は Person 関数のプロパティとメソッドを継承できます。

call() 関数を使用して、Person のプロパティとメソッドを継承します: Person.call(this, name, age),ここで、this は、Student 関数によって作成されたオブジェクトを表します。

最後に、

Student.prototype の constructor プロパティを Student 関数自体にポイントし、new# を使用するようにします。 ## キー 新しい Student オブジェクトを作成するときに、Student 独自のコンストラクターを呼び出すことができます。

ES6 での継承

ES6 では、

class

キーワードを使用してクラスを定義できます。 class キーワードは、function と prototype の 2 つの部分をカプセル化し、クラスをより簡単に定義できるようにします。 以下は、ES6 を使用して継承を定義する例です:

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

  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}

let student = new Student('Tom', 18, 3);
student.sayHello(); // 输出 'Hello, my name is Tom'

上記のコードでは、

class

キーワードを使用して Person を定義します。と 学生 2 つのクラス。 extends キーワードを使用して継承を実装します。

super

キーワードを使用して、親クラスのコンストラクターとメソッドを呼び出します。 Student のコンストラクターで、super(name, age) を使用して person のコンストラクターを呼び出し、親クラスのメンバー属性の継承を実現します。 super キーワードを使用して親クラス メソッド super.sayHello() を呼び出し、親クラス メソッドの継承を実現します。 3. 概要

この記事では、JavaScript でのオブジェクト指向プログラミングと継承について紹介しました。オブジェクトと関数を使用してオブジェクト指向プログラミングを実装し、プロトタイプ チェーンと ES6 継承を使用して継承を実装します。皆さんが JavaScript プログラミングを理解するのに役立つことを願っています。

以上がJavaScript でのオブジェクト指向プログラミングと継承をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。