Javascript prototype

2024-04-192024
29.7% (109/366)
April
60% (18/30)
Week 16
57.4% (4/7)
Day 19 Fri
2.1% (0.5/24)

訪問者

total: 10804
today: 1
yesterday: 3
now: 19

↑

更新

MenuBar

prototype ってなに？
サンプル
Prototype の基本的な使い方
Prototype は実行時に拡張できる
Prototype を使ったクラスの継承
Prototype で定義した属性か？それともオブジェクトの持ち物か？

prototype ってなに？ †

Javascript のオブジェクトは、
```
function Clazz(){
}

var clazz = new Clazz();
```
というように、function を new して作る。
すべてのクラスは、prototype 属性を持つ

prototype は同じクラスのオブジェクトが共通して持っている属性を定義しておくもの

function Clazz(name){
  this.name = name;
}
Clazz.prototype = {
  getName : function() {
    return this.name;
  }
};
var clazz = new Clazz();
clazz.getName();

特に定義しなければ prototype には Object オブジェクトが設定される

↑

サンプル †

[source] [reload]

↑

Prototype の基本的な使い方 †

// ===============================================
// prototype の基本的な使い方
// ===============================================
function Clock(){
}

Clock.prototype = {
  setDiv : function(id) {
    this.div = document.getElementById(id);
  },
  updateTime : function() {
    var now = new Date();
    this.div.innerHTML =
      now.getHours() + '：' + now.getMinutes() + '：' + now.getSeconds();
  },
  start : function() {
    var _this = this;
    setTimeout( function(){
      _this.updateTime();
      _this.start();
    }, 1000);
  }
}

setDiv : 時計を表示する DIV タグの id を設定
updateTime : DIV に現在時刻を表示する
start : 1000ms ごとに時刻を更新する
- this (Clockオブジェクト)への参照を _this にコピーしているのがミソ
- setTimeout の中では、this は Object オブジェクトだから

↑

Prototype は実行時に拡張できる †

// ===============================================
// prototype を実行時に拡張する
// ===============================================
function mokeyPatching() {
  Clock.prototype.flag = true;
  Clock.prototype.updateTime = function() {
    var now = new Date();
    
    if( this.flag ) {
      this.div.innerHTML =
        now.getHours() + '：' + now.getMinutes() + '：' + now.getSeconds();
    } else {
      this.div.innerHTML =
        now.getHours() + '　' + now.getMinutes() + '　' + now.getSeconds();
    }
    this.flag = !(this.flag);
  }
}

prototype を実行時に変更すると、Clock オブジェクトにも変更が及ぶ
Ruby の monkey patching と同じ
サンプルでは、[パッチ適用]ボタンを押すと : が点滅するようになる

↑

Prototype を使ったクラスの継承 †

// ===============================================
// prototype を継承する
// ===============================================
function RotateClock() {
}

RotateClock.prototype = new Clock();
RotateClock.prototype.location = 0;
RotateClock.prototype.updateTime = function() {
  var now = new Date();
  var timeString = 
    '        ' + 
    now.getHours() + '：' + now.getMinutes() + '：' + now.getSeconds();
  
  var end = this.location + 8;
  end = end > timeString.length ? timeString.length : end;
  
  this.div.innerHTML = timeString.substring(this.location, end);
  
  this.location = (this.location + 1) % 16;
}

prototype に基底となるオブジェクトを指定する
updateTime を override して、一秒ごとに表示桁数を変えるようにした

↑

Prototype で定義した属性か？それともオブジェクトの持ち物か？ †

Object.hasOwnProperty?('属性名') で検査可能

どのオブジェクトも prototype の元をたどれば Object にたどり着くので、どのオブジェクトからも使うことができる。

function Clazz(name){
  this.name = name;
}
Clazz.prototype = {
  getName : function() {
    return this.name;
  }
};
var clazz = new Clazz();
clazz.hasOwnProperty('name') → true
clazz.hasOwnProperty('getName') → false

HTML