今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

JavaScript bind,call,apply入門!ペンギンに空を飛ばせる。

f:id:sudara_bluse:20171028181339p:plain

ちょっぴりJsに詳しい人が知っているイメージの、bind,call,apply!
学習しました。
この3つは、簡単に言うと、なりすましができます。
持ってない機能を使えます。

「thisの値を束縛する。」
「レシーバーオブジェクトを変更する。」なんて言うそうです。

具体例として下記コードで ペンギンに空を飛ばせます。

penguinFly.js
// ペンギンくん
var Penguin = {
    name: 'ペンギン',
};

// 鷹
var Falcon = {
    name: '鷹',
    fly: function(){
        console.log(this.name + 'が大空を飛びました');
    }
};

Falcon.fly();  // '鷹が大空を飛びました

 

鷹は空を飛べるので、flyという関数を持っています。
ではまず、callとbindを使ってペンギンに空を飛ばせます。

 

penguinFly.js
// call 
Falcon.fly.call(Penguin); // ペンギンが大空を飛びました

// bind は一旦変数にしまって使う
var flyPenguin = Falcon.fly.bind(Penguin); 
flyPenguin(); // ペンギンが大空を飛びました

第一引数にthisにしたい値を入れて使います。
下記のように使うと引数を渡すこともできます。

penguinFly.js
// 引数ありバージョンに変更
Falcon.fly = function(aComment){
    console.log(this.name + 'が' + aComment + '大空を飛びました');
}

// call
Falcon.fly.call(Penguin, '元気よく');
// ペンギンが元気よく大空を飛びました

// bind
var flyPenguin = Falcon.fly.bind(Penguin, '元気よく');
flyPenguin();
// ペンギンが元気よく大空を飛びました

applyは基本的に使い方は同じですが、配列を渡せます。

penguinFly.js
Falcon.fly = function(aComents){
    console.log(this.name + 'が' + aComents[0] + aComents[1] + '大空を飛びました');
}

// apply 
Falcon.fly.call(Penguin, ['思い切って','元気よく']);
// ペンギンが思い切って元気よく大空を飛びました

以上になります。

 

こちらも参考になりました。

qiita.com

広告を非表示にする