好きなだけかりんとうを食べる人生

フロントエンドとかデザインとかバックエンドとか浅く広く。社会人3年目のうぇぶでぃれくたーです。

オブジェクト指向を意識してコードを書いてみた

今までオブジェクト指向に則ったコードの書き方とか全く意識したことがなくてですね、
ワークショップとかセミナーとかで現場で働いている方のコードを見た時に「なんだこれ」っていう顔にならないように確認しておこうと思いました。

そもそもオブジェクト指向って

オブジェクト指向とは - wikipedia

オブジェクト指向(オブジェクトしこう)とは、オブジェクト同士の相互作用として、システムの振る舞いをとらえる考え方である。英語の object-oriented (直訳は、「対象物志向の」・「目的重視の」という意味の形容詞) の日本語訳である。

うーん、わからん。

すごく乱暴な言い方だけど、オブジェクトごとに振るまいや状態を定義して管理しやすくしたり、機能を再利用して、効率よくコードを書く考え方って感じでしょうか。

この辺りについては他サイトさんで詳しく説明されていると思うので、そちらを参考にしてみてください。

(できるだけ)オブジェクト指向に則ってコードを書いてみた感想、メモ

【prototype内で宣言したメソッドはメソッド・プロパティ内において「this.メソッド・プロパティ名」で呼び出すことができる】
いや、これ当たり前なんですが、スコープやthisが何を返すのかをしっかり把握しておかなかったのでハマりました。

window.onload = function() {
  var test = new Test();
};

var Test = function() {
  this.timer = null;
  this.init();
}

Test.prototype.init = function() {
  this.timer = setInterval(function() {
    this.countUp();    // この場合のthisはグローバルオブジェクト
  }, 1000);
};

Test.prototype.countUp = function() {
  console.log('hello');
};

thisを退避してあげれば解決です。

window.onload = function() {
  var test = new Test();
};

var Test = function() {
  this.timer = null;
  this.init();
}

Test.prototype.init = function() {
  var self = this;    // thisを退避
  this.timer = setInterval(function() {
    self.countUp();    // このthisにはインスタンスが入ってます
  }, 1000);
};

Test.prototype.countUp = function() {
  console.log('hello');
};

まとめ

thisを書き忘れて怒られたり、関数とメソッド、変数とプロパティの違いに中々慣れることができませんでした。
当然ですが、ひたすら書いて覚えていくしかないですね。
prototypeや__proto__についての理解がまだ浅いので、今後記事にまとめたいと思います。