TIL 09,JS:クラス*

フナ餅の型を利用して、中の材料が違う限り、基本的な形状は同じですが、味の異なるフナ餅は完成しました.フナ餅の型は一流で、作られたフナ餅をインスタントと言います.

オブジェクトの作成方法

JavaScriptでオブジェクトを作成するには3つの方法があります.

1.オブジェクトの分離

var person = {};
person.lastName = 'kim';
person.firstName = 'sunghoon';

2.オブジェクト作成者

ビルト人生成器Objectを使用します.

var person = new Object();
person.lastName = 'kim';
person.firstName = 'sunghoon';

実は一度も二度も同じです.

3.コンストラクタ

function Perosn(name, gender, lastName) {
  this.name = name;
  this.gender = gender;
  var lastName = lastName;
  this.married = true;
}

var person = new Person('sunghoon','male','kim');

thisは対象自身を表す代名詞である.thisに分類される変数は、コンストラクション関数の外部から呼び出すことができる(共通であるが)が、通常宣言される変数は外部から呼び出すことができない.△私密.

console.log(person.LastName); // Error!

なぜクラスの概念が必要ですか?

オブジェクトテキストまたはオブジェクト作成者を使用してオブジェクトを作成すると、手動でインスタンスが作成されます.

var person1 = {};
person1.name = 'tony';
person1.gender = 'male';

var person2 = {};
person2.name = 'jamie';
person2.gender = 'male';

var person3 = {};
person3.name = 'janice';
person3.gender = 'female';

以上のように、同じ操作が重複しすぎて、作成するオブジェクトの数が多すぎる場合は、非常に非効率な操作になります.クラスのコンセプトを使用すると、プレビューボックスを作成することで、重複するオブジェクトの作成操作を簡略化できます.

var person1 = new Person('tony', 'male');
var person2 = new Person('jamie', 'male');
var person3 = new Person('janice', 'female');

また、複数の異なるクラスを作成する場合には、重複する部分を継承として処理し、重複する部分を省略することもできる.

クラス(ES 6)

1.クラスの作成

クラスを次の形式で宣言します.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return 'prototype : ' + (this.first + this.second);
    }
}
 
var kim = new Person('kim', 10, 20);
console.log("kim.sum()", kim.sum()); // 'kim.sum()' 'prototype : 30'

クラスの内容も変更できます.たとえば、sumメソッドを変更するには、

// 코드는 위에서 이어진다.
kim.sum = function(){
    return 'this : ' + (this.first + this.second);
}

var lee = new Person('lee', 10, 10);
console.log("kim.sum()", kim.sum()); // 'kim.sum()' 'this : 30'
console.log("lee.sum()", lee.sum()); // 'lee.sum()' 'prototype : 20'

kimのsum方法は、印刷方法に変更された.各インスタンスに適用される変更点は、他のインスタンスには影響しません.従って、他の実施例leeのsumの方法は、従来の方法と同様にプロトタイプを印刷するであろう.

2.クラス継承

extendsを使用してクラスを継承します.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first+this.second;
    }
}
class PersonPlus extends Person{
    avg(){
        return (this.first+this.second)/2;
    }
}
 
var kim = new PersonPlus('kim', 10, 20);
console.log("kim.sum()", kim.sum()); // 'kim.sum()' 30
console.log("kim.avg()", kim.avg());

kimはPersonPlusの例であるが、PersonPlusはPersonを継承しているので、sum法を使用しても問題はない.

3. super

サブクラスに新しいコンテンツを追加する場合、たとえばコンストラクション関数に新しい変数を追加します.

class PersonPlus extends Person {
  constructor (name, first, second, third) {
    this.name = name;
    this.first = first;
    this.second = second;
    this.third = third;
  }
}

前述したように、ジェネレータを書き直す必要があります.これは親と重複する部分ですが、書き直さなければなりません.しかし、superキーワードを使用すると、この作業をより簡単に完了することができる.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum() {
        return this.first + this.second;
    }
}

class PersonPlus extends Person{
    constructor(name, first, second, third){
        super(name, first, second);
        this.third = third;
    }
    sum() {
        return super.sum() + this.third;
    }
    avg() {
        return (this.first + this.second + this.third) / 3;
    }
}
 
var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum()); // 'kim.sum()' 60
console.log("kim.avg()", kim.avg()); // 'kim.avg()' 20

superには2つの使い方があります.

は、まず親クラスの構造関数super()を呼び出す;

の2番目のsuper.methodName()は、より高いレベルのメソッドを呼び出す.

例外クラス構文を理解しました.次回は1つ1つの手でオブジェクトを作らず、事前にクラスを作って、勝手に撮影します.フナ餅が食べたい👍