JavaScript, apply/call メソッドと prototype 継承

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

applycall の使い方を今一度復習しておく。

Function.apply

function.apply(obj, args)

  • functionobj のメソッドとして呼び出す。
  • 引数として配列 args を渡すことができる。
  • function のボディ内では objthis でアクセスできる。
/* オブジェクトにメソッドを適用させる */
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...)

  • functionobj のメソッドとして呼び出す。
  • 引数として可変長個の args を渡すことができる。
  • function のボディ内では objthis でアクセスできる。
/* オブジェクトにメソッドを適用させる */
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 – 万能継承関数

コメント

[…] 参考:http://www.serendip.ws/archives/4766 […]

コメント by svartalfheim.jp - Javascriptにおける継承のやり方 | 2010年10月25日 - 19:56
Top