ES 6学習まとめ:Clears

31496 ワード
テキストリンク

クラス欄


JavaScriptではclassも使用できます.
classはオブジェクトの定義です.
class User {
    constructor (name){
        this.userName = name;
    }

    sayHello(){
        console.log(`Hello ${this.userName}`);
    }
}

const user1 = new User("gildong");
const user2 = new User("younghee");

console.log(user1.userName);
user1.sayHello();
console.log(user2.userName);
user2.sayHello();

クラスの拡張


classはextendsで継承および拡張できます.
class User {
    constructor (name, lastName, email, password){
        this.userName = name;
        this.lastName = lastName;
        this.email = email;
        this.password = password;
    }

    sayHello(){
        console.log(`Hello ${this.userName}`);
    }

    getProfile(){
        console.log(`${this.username} ${this.lastName} ${this.email} ${this.password} `);
    }

    updatePassword(newPassword, currentPassword){
        if(currentPassword === this.password){
            this.password = newPassword;
            console.log("update done.");
        }
        else{
            console.log("check password.");
        }
    }
}

const user1 = new User("gildong", "hong", "[email protected]", "1234");

//User class 를 상속 받아 Admin class 를 정의하였다.
class Admin extends User{
    deleteWebsite(){
        console.log("deleted");
    }
}

const admin = new Admin("admin", "king", "[email protected]", '1111');
admin.deleteWebsite();

super()とは?


拡張クラスのコンストラクション関数()内で親クラスのコンストラクション関数を呼び出す方法.
親クラスのジェネレータを呼び出して、継承されたプロパティを初期化することもできます.
class User {
    constructor (options){
        this.userName = options.name;
        this.lastName = options.lastName;
        this.email = options.email;
        this.password = options.password;
    }

    sayHello(){
        console.log(`Hello ${this.userName}`);
    }

    getProfile(){
        console.log(`${this.username} ${this.lastName} ${this.email} ${this.password} `);
    }

    updatePassword(newPassword, currentPassword){
        if(currentPassword === this.password){
            this.password = newPassword;
            console.log("update done.");
        }
        else{
            console.log("check password.");
        }
    }
}

class Admin extends User{
    constructor({userName, lastName, email, password, superAdmin, isActive}){
        super({userName, lastName, email, password});
       //super 를 호출하여 부모 class 의 생성자를 호출한다.
     	this.superAdmin = superAdmin;
        this.isActive = isActive;
    }
    
    deleteWebsite(){
        if(this.superAdmin && this.isActive){
            console.log("deleted");
        }
        else{
            console.log("no permission");
        }
    }
}

const admin = new Admin({
    userName : "gildong", 
    lastName : "hong", 
    email : "[email protected]", 
    password : "1234",
    superAdmin : true,
    isActive : false
});

admin.deleteWebsite();

class functionのthis


classのthisはclassを表します.
ただし、eventListenerで指定した関数では、thisは対応するdomオブジェクトになります.
このキーワードは時間とともに変化する可能性がありますので、防止してください.
クラス内の関数を宣言する場合はarrow関数を使用します
class Counter{
    constructor({initialNumber = 0, counterId, plusId, minusId}){
        this.count = initialNumber;
        this.counter = document.getElementById(counterId);
        this.plusBtn = document.getElementById(plusId);
        this.minusBtn = document.getElementById(minusId);
        this.addEventListner();
        this.repaintCount();
    }

    addEventListner(){
        this.plusBtn.addEventListener("click", this.increase);
        this.minusBtn.addEventListener("click", this.decrease);
    }

    increase() {
        console.log(this);
      //여기의 this 는 + 버튼 을 나타낸다.
    }

    decrease = () => {
        console.log(this);
      //여기의 this 는 Counter 클래스를 나타낸다.
    }

    repaintCount(){
        this.counter.innerText = this.count;
    }
}

new Counter({
    initialNumber : 0,
    counterId : "count",
    plusId : "add",
    minusId : "minus"
});
=>arrow関数を使用します.以下に示します.
addEventListner = () => {
        this.plusBtn.addEventListener("click", this.increase);
        this.minusBtn.addEventListener("click", this.decrease);
    }

    increase = () => {
        this.count = this.count + 1;
        this.repaintCount();
    }

    decrease = () => {
        this.count = this.count - 1;
        this.repaintCount();
    }

    repaintCount = () => {
        this.counter.innerText = this.count;
    }
forサイクルを不適切に使用すると、速度が千倍遅くなります
WordCount実装とテスト