ホームページ > 記事 > ウェブフロントエンド > JavaScript でのオブジェクト指向プログラミングと継承をマスターする
現代の Web 開発において、JavaScript は不可欠な言語となっています。その中でも、オブジェクト指向プログラミング (OOP) と継承は、JavaScript 開発における 2 つの重要な側面です。この記事では、読者に JavaScript のオブジェクト指向プログラミングと継承を紹介し、具体的なコード例を示します。
1. オブジェクト指向プログラミング
オブジェクト指向プログラミングは、オブジェクトをプログラムの基本単位として使用し、データとデータ操作をカプセル化するプログラミング手法です。 JavaScript では、オブジェクトと関数を使用してオブジェクト指向プログラミングを実装できます。
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'
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 オブジェクトを作成します。
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
独自のコンストラクターを呼び出すことができます。
キーワードを使用してクラスを定義できます。 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
キーワードを使用して継承を実装します。
キーワードを使用して、親クラスのコンストラクターとメソッドを呼び出します。 Student
のコンストラクターで、super(name, age)
を使用して person
のコンストラクターを呼び出し、親クラスのメンバー属性の継承を実現します。 super
キーワードを使用して親クラス メソッド super.sayHello()
を呼び出し、親クラス メソッドの継承を実現します。 3. 概要
この記事では、JavaScript でのオブジェクト指向プログラミングと継承について紹介しました。オブジェクトと関数を使用してオブジェクト指向プログラミングを実装し、プロトタイプ チェーンと ES6 継承を使用して継承を実装します。皆さんが JavaScript プログラミングを理解するのに役立つことを願っています。
以上がJavaScript でのオブジェクト指向プログラミングと継承をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。