JavaScript/Basic/クラス/メソッド

JavaScript/Basic/クラス/メソッド

クラスにそのインスタンスを操作するためのメソッドを取り付けることができる

基本

メソッドはこのように実装する。

class Hoge{
    dododo(v){
        return "dododo " + v;
    }
}
 
let hoge = new Hoge();
console.log(hoge.dododo("aaaa")); // => "dododo aaaa"

なんのキーワードもなく、関数風に書くとメソッドになる。 メソッド内部ではインスタンス内にある場合は this はクラスから生成されたオブジェクト自身を指す。

このメソッドは function で作られた関数オブジェクトと同じ性質があるようで、 this は作成時点の状況で拘束されない。メソッド自体を別のオブジェクトに入れ替えるとそのオブジェクトの this として振る舞う。

なのでクラス内でイベントの制御をやる場合は注意が必要である。

getter setter

変数にアクセスするような記述でメソッドを呼び出せる getter setter の構文がある。

このように書く

class Hoge{
    constructor(){
        console.log("This is constructor.");
    }
    get p1(){
        return this._p1
    }
    set p1(v){
        this._p1 = v;
    }
}
 
let hoge = new Hoge();
hoge.p1 = "aaaa";
console.log(hoge.p1); // => "aaaa"

addEventListener, removeEventListener で使う場合の注意

内部で作ったメソッドを addEventListener で使ったり removeEventListener で使う場合は注意が必要になる。

なぜかというと、class 構文でのメソッドは function 的性質を持つのでイベントにフックすると this がイベント発生オブジェクトに入れ替わってしまうからだ。

Tags

javascript/basic/class/method.txt · 最終更新: 2020-03-24 10:15 by ore