Serendip

Web Studio

こちらのサイト『JavaScriptで継承やるときにprototype書きまくるのめんどい人は – あ、いしかわですね』で Function.apply を使って継承を記述する方法が紹介されていた。

apply と call の使い方を今一度復習しておく。

Function.apply

function.apply(obj, args)

• function を obj のメソッドとして呼び出す。
• 引数として配列 args を渡すことができる。
• function のボディ内では obj に this でアクセスできる。

/* オブジェクトにメソッドを適用させる */
console.log(Array.prototype.reverse.apply([1, 2, 3])); /* [ 3, 2, 1 ] */
console.log(String.prototype.split.apply('1,2,3', [','])); /* [ "1", "2", "3" ] */

var toQuestion = function(str) {
    return str + '?';
};
console.log(toQuestion.apply(null, ['who'])); /* who? */

Function.call

function.call(obj, args...)

• function を obj のメソッドとして呼び出す。
• 引数として可変長個の args を渡すことができる。
• function のボディ内では obj に this でアクセスできる。

/* オブジェクトにメソッドを適用させる */
console.log(Array.prototype.reverse.call([1, 2, 3])); /* [ 3, 2, 1 ] */
console.log(String.prototype.split.call('1,2,3', ',')); /* [ "1", "2", "3" ] */

var toQuestion = function(str) {
    return str + '?';
};
console.log(toQuestion.call(null, 'who')); /* who? */

apply/call で継承

var Dog = function() {
    this.name = 'taro';
};

Dog.prototype = {
    yelp : function() {
        console.log('yap-yap');
    }
};

var Shepherd = function() {
    this.name = 'jiro';
};

Shepherd.prototype = new Dog();

(function() {
    /* this は Shepherd.prototype なのでここは、
     * Shepherd.prototype.bark = function() {
     * と同じ。 */
    this.bark = function() {
        console.log('bow-bow');
    };
}).apply(Shepherd.prototype);

var shepherd = new Shepherd();
console.log(shepherd.name); /* jiro */
shepherd.yelp(); /* yap-yap */
shepherd.bark(); /* bow-bow */

参考：JavaScriptで継承やるときにprototype書きまくるのめんどい人は – あ、いしかわですね
　　　apply/call での継承の話 – nothing but trouble
　　　404 Blog Not Found:javascript – 万能継承関数