コンテンツへスキップ
Tags

オブジェクトを後から拡張するMixinを使いこなす

by : 2018/02/06

JavaScriptは柔軟な言語仕様になっているので任意のオブジェクトをPrototypeで拡張できます。hifiveで同じような機能を提供するのがMixinになります。

Mixinを使うことで、継承関係にはないようなオブジェクト同士に同じ機能を追加できるようになります。

Mininの使い方

Mixinは h5.mixin.createMixin を使って作成します。

var mixin = h5.mixin.createMixin({
set: function(p, v) {
this[p] = v;
},
get: function(p) {
return this[p];
},
times: function(p, i) {
return this[p] * i;
}
});

view raw
index.js
hosted with ❤ by GitHub

今回は適当なオブジェクトを作ります。このオブジェクト自体にはメソッドは特にありません。

var target = {
hoge: 'Hello World',
fuga: 5
};

view raw
index.js
hosted with ❤ by GitHub

そしてmixinを実行します。

mixin.mix(target);

view raw
index.js
hosted with ❤ by GitHub

これでtargetオブジェクトにメソッドが追加されました。

> target.get('hoge')
> Hello World
> target.times('fuga', 10)
> 50

view raw
index.js
hosted with ❤ by GitHub


このようにMixinを使うことでオブジェクトの拡張が容易になります。すでにインスタンスが作られた後でも使えるので、特定のインスタンスにだけメソッドを追加することもできるでしょう。

今回のコードはJSFiddleで試せます。Mixinを使いこなすとコードが分かりやすくなりますので、ぜひ使いこなしてください。

JSDoc: Class: Mixin

From → hifive, HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。