JavaScriptクラス

39413 ワード
privateプロパティ プライベートメソッド 静的プロパティ 来賓(Get~) メソッドとして追加 継承 セイト(set~) オブジェクト向け 過剰 カテゴリ super JavaScript 生成者 インスタンス(オブジェクト) スタティツクメソッド 抽象化 方法 テキストリンク
カテゴリ
オブジェクトをより効率的かつ安全にするために作成された構文
オブジェクト向けオブジェクト
C以外のすべてのプログラミング言語はオブジェクト指向のプログラミング言語である
オブジェクト向けの例
対象を優先してプログラムを編成する方法論
オブジェクト向けプログラミング言語classという構文を使用して、オブジェクトを効率的かつ安全に作成することで、オブジェクト向けモデルをプログラミングに簡単に適用できます.

抽象化


プログラムに必要な要素のみを使用してオブジェクトを抽象化抽象と呼ぶ
全体の辞書の意義は複雑な資料、モジュール、システムなどの中から核心の概念と機能を抽出することである.
同じ形状のオブジェクトを作成
学生成績管理計画を作成する場合、
対象:学生
抽象化:学生から成績管理に必要な共通点を抽出する

成績総和を求める機能と平均を求める機能は複数のプログラムで使用できる.
簡単な計算よりも、それを関数にすると使いやすくなります

メソッドとしてオブジェクトを追加する機能


オブジェクトの数が増えるにつれて、関数名の競合が発生する可能性があります.
パラメータにどのタイプのオブジェクトを配置するか分からないため、関数を使用すると混同される可能性があります.
これらの問題を解決するために,getAverageOdStudent()のように長い意味を記述してもよいし,関数を方法としてオブジェクトの内部に置いて使用してもよい.
const students = []
student.push({ })
student.push({ })
student.push({ })
student.push({ }) // 내용 생략

// students 배열 내부의 객체 모두에게 메서드 추가
for (const student of students) {
  student.getSum = function () {
    return this.국어 + this.영어 + this.수학 + this.과학
  }
  
  student.getAverage = function () return this.getSum() / 4
}
繰り返し文を使用して、学生配列の各要素にメソッドを追加します.
関数名の競合を回避したり、関数の誤用を減らすことができます.
複数の関数を作成するメリット
オブジェクトを作成するよりも、
  • 誤字の危険を減らす
  • コードの入力量は
    • を大幅に減少する.
  • プロパティとメソッドは、
    • のメンテナンスを容易にする1つの関数内で管理できます.
    ただし、各オブジェクトに複数のメソッドを作成すると、関数のような基本データ型よりも重いデータ型が複数回生成されます.

    クラスの宣言


    オブジェクト向けプログラム
    オブジェクトを定義し、これらのオブジェクトを使用してプログラムを作成します.

    クラス&インスタンス(オブジェクト)

    클래스:多数のサポートではなく、オブジェクトの作成時に多くの制限が適用されます.프로토타입:制限はあまりありませんが、サポートされている文法もあまりありません.
    class 클래스이름 { }
    인스턴스:クラスに基づいて作成されたオブジェクト.一般オブジェクトとも呼ばれます.
    インスタンスの作成
    new 클래스이름 ()
  • クラス:オブジェクトの作成と同様の함수
  • インスタンス(オブジェクト):オブジェクトを作成する関数を使用して作成した객체と同様

    生成者


    new student()コードでは、studentの後ろに関数のように括弧があります.
    オブジェクト生成時に呼び出されるconstructorという関数
    class 클래스이름 {
  constructor() { 생성자 코드 }
}
    ここでは、メソッドをコンストラクション関数と命名します.
    クラス名を呼び出します.constructor()ではありません.
    コンストラクション関数は、クラスに基づいてインスタンスを作成するときに最初に呼び出される方法です.
    ジェネレータは、プロパティの追加など、オブジェクトを初期化します.
    class Student {
  constructor (이름, 국어, 영어, 수학, 과학) {
    this.이름 = 이름
    this.국어 = 국어
    this.영어 = 영어
    this.수학 = 수학
    this.과학 = 과학
  }
}

// 객체 선언
const students = []
student.push(new Student('구름', 87, 43, 55, 54, 21))
student.push(new Student('별이', 87, 43, 55, 54, 21))
student.push(new Student('겨울', 87, 43, 55, 54, 21))
student.push(new Student('바다', 87, 43, 55, 54, 21))
    reactclass型とは差が少ないようです

    メソッドメソッド

    class Student {
  constructor (이름, 국어, 영어, 수학, 과학) {
    this.이름 = 이름
    this.국어 = 국어
    this.영어 = 영어
    this.수학 = 수학
    this.과학 = 과학
  }
  
  getSum () return this.국어 + this.영어 + this.수학 + this.과학
  getAverage () return this.getSum() / 4
  toString () return `${this.이름}\t${this.getSum()}점\t${this.getAvreage()}점\n`
}


// 객체 선언
const students = []
student.push(new Student('구름', 87, 43, 55, 54, 21))
student.push(new Student('별이', 87, 43, 55, 54, 21))
student.push(new Student('겨울', 87, 43, 55, 54, 21))
student.push(new Student('바다', 87, 43, 55, 54, 21))
    このようにすれば,内部でメソッドを繰り返すことなく,1つのメソッドを生成して利用することになる.

    継承

    class Rectangle {
  constructor (width, height) {
    this.width = width
    this.height = height
  }
  
  getPerimeter () return 2 * (this.width + this.height)
  getArea () return this.width + this.height
  
  // extends Rectangle : Square 클래스가 Rectangle 클래스의 자식 클래스이다
  class Square extends Rectangle { 
    constructor (length) {
      super (length, length) // 부모의 생성자 함수를 호출하는 함수
    }
  }
}
    SquareクラスがgetPerimeter()メソッドとgetArea()メソッドを宣言していない場合.
    親Rectangleクラスから属性とメソッドを継承して使用できます.
    super()
    super()関数は親ジェネレータを表す関数です
    呼び出しsuper(length,length)は、width、height属性を含むRectangleクラスのコンストラクション関数(width,height)を呼び出します.

    privateプロパティとメソッド


    開発者がフレームワークやエンジンを使用する場合、予想通りに使用しないと問題が発生する可能性があります.
    条件文を用いて,意図しない場合に例外を生じ,ユーザに認知させる方法がある.
    これにより、クラスユーザが無意識にクラス属性やメソッドを使用することを防止できます.
    クラスの安定性を確保するために現れる構文はprivateプロパティとメソッドです.
    class 클래스이름 {
  #속성이름
  #메서드이름 () { }
}
    属性とメソッド名の前に#を付けるだけでよい.
    #追加のプロパティとメソッドはprivateプロパティとメソッドです.
    privateプロパティを使用する前に、privateプロパティとして使用するプロパティを外部に宣言する必要があります.
    class Square {
  #length
  
  constructor (length) {
    if (length <= 0 ) throw '길이는 0보다 커야 합니다.'
    this.#length = length
  }

  getPerimeter () return 4 * this.#length
  getArea () return this.#length * this.#length
}
    privateプロパティに変更すると、クラス外部からアクセスできません.
    クラスユーザーがクラスを誤って使用する問題を減らすことができます

    来賓と来賓


    状況に応じてprivateプロパティを読み取り、書き込む方法を提供します.
    class Square {
  #length
  
  constructor (length) {
    this.#length = length
  }

  setLength (value) {
    // 함수를 사용하기 때문에 내부에서 예외 처리를 할 수 있다
    if (value <= 0) throw '길이는 0보다 커야 합니다'
    this.#length = value
  }
  getLength (value) return this.#length
  getPerimeter () return 4 * this.#length
  getArea () return this.#length * this.#length
}
    新しく作成したsetLength()メソッドとgetLength()メソッドが表示されます.
    来賓
    get~メソッドのように,属性値をチェックする際に用いられるメソッドを게터 getterと呼ぶ.
    テナント
    set~メソッドのように、属性に値を指定する際に使用するメソッドを세터 setterと呼びます
    テナントとテナントは最初から必要ではなく、必要なときだけ使用します
    ユーザーが値の読み取りを拒否した場合、ゲストを作成する必要はありません.
    ユーザーが値の指定を拒否しても、テナントを作成する必要はありません.
    両方とも属性に近づくことを阻止できます.
    class 클래스이름 {
  get 메서드이름 () return 값
  set 메서드이름 (value) {}
}

    静的プロパティとメソッド


    デザインモード
    フレームワーク開発者がフレームワークをより効率的に開発できるように,多様なモデルを設計した.
    この図案をデザイン図案といいます
    従来のJavaScriptではクラスの機能はなかったが,多様な設計パターンを利用するために絶えず追加されるクラス構文のようにstatic属性とstaticメソッドが新たに生まれたと考えられる.
    class 클래스이름 {
  static 속성 = 값
  static 메서드 () { }
}
    静的プロパティとメソッドは、インスタンスを作成せずに使用できるプロパティとメソッドです.
    一般的な変数や関数のように使用できます
    クラス名の後ろのポイントで、プロパティとメソッドを使用
    클래스이름.속성
클래스이름.메서드()
    class Square {
  #length
  // private 특성과 static 특성은 같이 적용할 수도 있다
  static #counter = 0
  static get counter () return Square.#counter
  
  constructor (length) {
    this.length = length
    Square.#counter += 1
  }

  static perimeterOf (length) return length * 4
  static areaOd (length) return length * length
  get length () return this.#length
  get perimeter () return this.#length * 4
  get area () return this.#length * this.#length
  
  set length (length) {
    if (length <= 0) throw '길이는 0보다 커야 합니다.'
    this.#length = length
  }
}
    #counterという名前の静的プロパティとcounter()という名前のメソッド(ゲイト)が作成されました.#counterプロパティでは、Squareオブジェクトを呼び出すたびに作成者が1つ増加する必要があります.
    これにより、これまでに生成されたSquareオブジェクトの数を決定できます.
    perimeter Of()メソッドとareaOf()メソッド:Squareオブジェクトを作成することなく簡単に周長と幅を得る方法
    クラスに変数と関数を作成すると、
  • は、クラスにバインドされている属性および関数を決定することができる
  • 私有特性と着信、電話機→より安全な使用を付与

    過剰


    親関数자식에서 다시 선언～덮어쓰는
    // 클래스 선언
class LifeCycle {
  call () {
    this.a()
    this.b()
    this.c()
  }
  
  a () console.log(`a() 메서드를 호출합니다.`)
  b () console.log(`b() 메서드를 호출합니다.`)
  c () console.log(`c() 메서드를 호출합니다.`)
}

class Child extends LifeCycle { // 자식클래스
  a () console.log('자식의 a() 메서드입니다.')
}

// 인스턴스 생성
new Child().call()
    LifeCycleというクラスには、a()、b()、c()というメソッドがあり、call()というメソッドで呼び出されます.
    call()メソッドはa()メソッドを実行し,a()メソッドが上書きされるため,新しいa()メソッドの内容を出力する.
    親のコンテンツのインポート
    親メソッドの内容も使用したい場合は、super.메서드()形式のコードを使用します.
    // 클래스 선언
class LifeCycle {
  call () {
    this.a()
    this.b()
    this.c()
  }
  
  a () console.log(`a() 메서드를 호출합니다.`)
  b () console.log(`b() 메서드를 호출합니다.`)
  c () console.log(`c() 메서드를 호출합니다.`)
}

class Child extends LifeCycle { // 자식클래스
  a () {
    super.a() // 부모의 a() 메서드 실행
    console.log('자식의 a() 메서드입니다.')
}

// 인스턴스 생성
new Child().call()
    サブクラスで同じ名前のメソッドを呼び出す場合.
    super.a()を呼び出し、新しいコードを実行するため、両方の文が実行されます.

    override例⚠⚠


    これは頼頼とは何の概念もないと思いますが、どういう意味ですか...?
    JavaScriptのすべてのオブジェクトにtoString()というメソッドがあります.
    これはjavascriptにObjectという上位クラスがあり、どのクラスを作成しても自動的にObjectクラスが継承されるためです.
    TOString()の名前でメソッドを作成すると、オブジェクトクラスのtoString()メソッドが上書きされます.
    内部でオブジェクトを文字列として作成する場合、JavaScriptではtoString() 메서드를 호출한다が使用されます.
    したがって、toString()メソッドを使用しすぎると、内部から文字列に変換する形式を変更できます.
    • いくつの悪くないJ 2 MEピクチャーのスケーリングの関数
    vsprintf可変関数パラメータ