（JavaScript学習レコード）：オブジェクト指向

• 前に書かれている：Bilibili dark horse programmer pink Teacherのチュートリアルを参照してください 
• アドレス：https : //www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4

目次

オブジェクト指向プログラミングの概要

POP（プロセス指向プログラミング）

オブジェクト指向プログラミングOOP（オブジェクト指向プログラミング）

プロセス指向とオブジェクト指向のコントラスト

ES6のクラスとオブジェクト

オブジェクト指向

オブジェクト

クラス

クラスを作成する

クラスコンストラクターコンストラクター

クラス継承

受け継ぐ

スーパーキーワード

注意点3つ

---

オブジェクト指向プログラミングの概要

POP（プロセス指向プログラミング）

• プロセス指向は、問題を解決するために必要なステップを分析し、関数を使用して、さらに別の1つの呼び出しに従って使用する場合、関数を使用してこれらのステップを段階的に実装します。
• 栗を与える：プロセス指向のアプローチで象を冷蔵庫に入れる

• プロセス指向は、分析したステップに従い、ステップに従って問題を解決することです。

オブジェクト指向プログラミングOOP（オブジェクト指向プログラミング）

• オブジェクト指向は、事柄をオブジェクトに分解し、オブジェクト間の労力と協力を分割することです。
• 栗を与える：オブジェクト指向のアプローチで、象を冷蔵庫に入れます。
• まずオブジェクトを見つけて、これらのオブジェクトの機能を書き出します。
  • 1.象オブジェクト 
    • 入る
  • 2.冷蔵庫オブジェクト
    • オンにする
    • シャットダウン
  • 3.象と冷蔵庫の機能を使う
• オブジェクト指向は、問題をステップではなくオブジェクトの機能で分割することです。
• オブジェクト指向プログラム開発のアイデアでは、各オブジェクトは明確な分業を備えた機能上の中心です。
• オブジェクト指向プログラミングには、柔軟性、再利用可能なコード、容易なメンテナンスと開発という利点があり、複数の人が協力する大規模なソフトウェアプロジェクトに適しています。

プロセス指向とオブジェクト指向のコントラスト

• プロセス指向
  • 利点：パフォーマンスはオブジェクト指向よりも高く、シングルチップマイクロコンピューターで使用されるプロセス指向プログラミングなど、ハードウェアに密接に関連するものに適しています。
  • 短所：オブジェクト指向がなく、保守が容易で、再利用が容易で、拡張が容易
• オブジェクト指向
  • 利点：保守、再利用、拡張が容易、カプセル化、継承、多態性のオブジェクト指向機能により、低カップリングシステムを設計でき、システムをより柔軟で保守しやすくします。
  • 短所：パフォーマンスはプロセス指向よりも低い

ES6のクラスとオブジェクト

オブジェクト指向

• オブジェクト指向は私たちの実生活に近いので、オブジェクト指向を使用して現実の世界で物事を説明できますが、物事は具体的なものと抽象的なものに分けられます
• オブジェクト指向の思考特性：
  • 1.オブジェクトが共有する属性と動作を抽出（抽象化）し、それらをクラス（テンプレート）に編成（カプセル化）します。
  • 2.クラスをインスタンス化し、クラスのオブジェクトを取得します
• オブジェクト指向プログラミングでは、どのオブジェクトがそこにあるかを考慮し、オブジェクト指向思考の特性に従って、常にオブジェクトを作成し、オブジェクトを使用し、それらに物事を指示します。

オブジェクト

• 実生活では、すべてがオブジェクトであり、オブジェクトは具体的なものであり、目に見える実体のあるオブジェクトです。たとえば、本、車、または人物を「オブジェクト」にすることができ、データベース、Webページ、およびリモートサーバーへの接続も「オブジェクト」にすることができます。
• JavaScriptでは、オブジェクトは関連するプロパティとメソッドの順序付けられていないコレクションです。すべてのものは、文字列、数値、配列、関数などのオブジェクトです。
• オブジェクトは、プロパティとメソッドで構成されています。
  • 属性：オブジェクトの属性で表されるものの特性（共通名詞）
  • メソッド：オブジェクトのメソッドで表されるものの動作（一般的な動詞）

クラス

• ES6では、クラスの概念が新たに追加され、classキーワードを使用してクラスを宣言し、このクラスを使用してオブジェクトをインスタンス化できます。
  • クラスはオブジェクトのパブリック部分を抽象化し、大きなクラス（クラス）を参照します
  • オブジェクトは特定のものを参照し、特定のオブジェクトはクラスを通じてインスタンス化されます

• オブジェクト指向の思考特性：
  • 1.オブジェクトが共有する属性と動作を抽出（抽象化）し、それらをクラス（テンプレート）に編成（カプセル化）します。
  • 2.クラスをインスタンス化し、クラスのオブジェクトを取得します

クラスを作成する

• （1）classキーワードを使用してクラスを作成しますが、クラス名の最初の文字は通常大文字で定義します
• （2）クラスにコンストラクター関数があり、渡されたパラメーターを受け入れてインスタンスオブジェクトを返すことができます
• （3）newがインスタンスを生成する限り、コンストラクタ関数はこの関数を自動的に呼び出します。この関数を記述しない場合、クラスもこの関数を自動的に生成します
• （4）インスタンスの新規生成は省略できません
• （5）最後に、文法仕様に注意し、作成されたクラスのクラス名の後に括弧を追加しないでください。生成されたインスタンスクラスの名前の後に括弧を追加してください。コンストラクタは関数を追加する必要はありません。

// 1. 创建类 class  创建一个 明星类
class Star {
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
}

// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);

クラスコンストラクターコンストラクター

• constructor（）メソッドは、クラスのコンストラクタ（デフォルトのメソッド）です。これは、パラメータを渡してインスタンスオブジェクトを返すために使用されます。このメソッドは、新しいコマンドによってオブジェクトインスタンスが生成されるときに自動的に呼び出されます。
• 定義が表示されない場合、クラスは自動的にコンストラクタ（）を作成します

// 1. 创建类 class  创建一个 明星类
class Star {
    // 类的共有属性放到 constructor 里面
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    sing(song) {
        // console.log('我唱歌');
        console.log(this.uname + song);

    }
}

// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
// (1) 我们类里面所有的函数不需要写function
//(2) 多个函数方法之间不需要添加逗号分隔
ldh.sing('冰雨');
zxy.sing('李香兰');

クラス継承

class Father{ // 父类
}
class Son extends Father { // 子类继承父类
}

受け継ぐ

// 类的继承
class Father {
    constructor() {

    }
    money() {
        console.log(100);

    }
}
class Son extends Father {

}
var son = new Son();
son.money();

スーパーキーワード

• superキーワードは、オブジェクトの親クラスの関数にアクセスして呼び出すために使用されます。親クラスのコンストラクタまたは親クラスの通常の関数を呼び出すことができます

class Person { // 父类
     constructor(surname){
     this.surname = surname;
 }
}
class Student extends Person { // 子类继承父类
     constructor(surname,firstname){
     super(surname); // 调用父类的constructor(surname)
     this.firstname = firstname; // 定义子类独有的属性
 }
}

• 注：サブクラスはコンストラクターでスーパーを使用し、これの前に配置する必要があります（最初に親クラスの構築メソッドを呼び出し、サブクラス構築メソッドを使用する必要があります）。
• ケース1：

class Father {
 constructor(surname) {
 this.surname = surname;
 }
 saySurname() {
 console.log('我的姓是' + this.surname);
 }
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
 constructor(surname, fristname) {
 super(surname); // 调用父类的constructor(surname)
 this.fristname = fristname;
 }
 sayFristname() {
 console.log("我的名字是：" + this.fristname);
 }
}
var damao = new Son('刘', "德华");
damao.saySurname();
damao.sayFristname();

• ケース2：親クラスの通常の関数を呼び出す

class Father {
 say() {
 return '我是爸爸';
 }
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
 say() {
 // super.say() super 调用父类的方法
 return super.say() + '的儿子';
 }
}
var damao = new Son();
console.log(damao.say());

注意点3つ

• 1. ES6では、クラスに変数の昇格はないため、オブジェクトをインスタンス化する前にクラスを定義する必要があります。
• 2.クラスで共通の属性とメソッドを使用する必要があります。
• 3.クラス内のこれは問題を示しています。
  •  コンストラクタのthisはインスタンスオブジェクトを指し、メソッドのthisはこのメソッドの呼び出し元を指します

var that;
var _that;
class Star {
    constructor(uname, age) {
        // constructor 里面的this 指向的是 创建的实例对象
        that = this;
        console.log(this);

        this.uname = uname;
        this.age = age;
        // this.sing();
        this.btn = document.querySelector('button');
        this.btn.onclick = this.sing;
    }
    sing() {
        // 这个sing方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
        console.log(this);

        console.log(that.uname); // that里面存储的是constructor里面的this
    }
    dance() {
        // 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
        _that = this;
        console.log(this);

    }
}

var ldh = new Star('刘德华');
console.log(that === ldh);
ldh.dance();
console.log(_that === ldh);

// 1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象

// 2. 类里面的共有的属性和方法一定要加this使用.