第一回 Backbone.jsのextendについて

本記事の目的

• Backbone.jsのextendを理解する

---

Backbone.jsでは至る所で使用する

export default Backbone.Model.extend({
})
export default Backbone.Collection.extend({
})
export default Backbone.View.extend({
})

---

まずはModelのextendから

Backbone.Model を拡張し、独自のModelクラスを作成する機能です。
インスタンスプロパティとクラスプロパティをそれぞれ指定で引数可能です。

Backbone.Model.extend(properties, [classProperties])
// properties:インスタンスプロパティ
// classProperties: クラスプロパティ

参考：https://backbonejs.org/#Model-extend

---

extendの使用例

// Backbone.Modelを拡張したサブクラス(ExtendModel)
const ExtendModel = Backbone.Model.extend({
  idAttribute: 'id2',
  extendProp: 'Extend!!',
})

const model = new Backbone.Model()
const extendModel = new ExtendModel()

// ExtendModelはBackbone.Modelのプロパティが上書きされている
console.log(model.idAttribute)          // 'id'
console.log(extendModel.idAttribute)    // 'id2'

// モデルに存在しないプロパティはundefined
console.log(model.extendProp)           // undefined
console.log(extendModel.extendProp)     // 'Extend!!'

---

extendの使用例2

下記のようにサブクラスをさらに拡張することも可能です。

// Backbone.Modelを拡張したサブクラス(BaseModel)
const BaseModel = Backbone.Model.extend({
  baseProp: 'Base!!',
})
// BackModelを拡張したサブクラス（ExtendModel）
const ExtendModel = BaseModel.extend({
  baseProp: 'Base2',
  extendProp: 'Extend!!',
})

const baseModel = new BaseModel()
const extendModel = new ExtendModel()

// basePropは両方あるがExtendModelは上書きされている
console.log(baseModel.baseProp)      // 'Base!!'
console.log(extendModel.baseProp)    // 'Base2'

// extendPropはExtendModelのみ
console.log(baseModel.extendProp)    // undefined
console.log(extendModel.extendProp)  // 'Extend!!'

---

親オブジェクトの機能の呼び出し

下記の手順で親オブジェクトのメソッドを明示的に呼び出すこともできます。

const Note = Backbone.Model.extend({ 
  set: function (attributes, options) {
    Backbone.Model.prototype.set.apply(this, [attributes, options])
    ... 
  }
})

これにより、setやsaveなどのコア関数をオーバーライドし、拡張することも容易です。

---

extendとは

今回はModelのextendについて説明でしたが、基本的に他のモジュール（CollectionやView）も同様です。
イメージとしては Java のクラスでいう継承にあたります。

---

まとめ

• Backbone.Modelのextendとは
  Backbone.Model を拡張し、独自のModelクラスを作成する機能