JavaScript関数のbind, call, applyの違いついて

URL
date
Nov 21, 2022
slug
javascript-function-bind-call-apply
status
Published
tags
Basic
Javascript
summary
JavaScript関数のbind, call, applyの違い
type
Post
現代のフロントエンドフレームワークは、SPA(Single Page Application)、SSR(Server Side Rendering)などが種類になっていても、本質はJavascriptを知らないといけない。
 
今回は、JavaScriptの基本(basic)の復習も兼ねて、bind call apply を調べてみます。
 
詳細は、以下の MDNサイトを参照
Function.prototype.bind() - JavaScript | MDN
bind() メソッドは新しい関数を生成し、これは呼び出された際に this キーワードに指定された値が設定されます。この値は新しい関数が呼び出されたとき、一連の引数の前に置かれます。
Function.prototype.bind() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Function.prototype.bind() - JavaScript | MDN
 
Function.prototype.call() - JavaScript | MDN
call() メソッドは、 this の値と、独立して提供された引数によって関数を呼び出します。
Function.prototype.call() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call
Function.prototype.call() - JavaScript | MDN
 
Function.prototype.apply() - JavaScript | MDN
apply() メソッドは、 this 値を指定して関数を呼び出し、 arguments は配列 (または配列風オブジェクト) として提供します。
Function.prototype.apply() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
Function.prototype.apply() - JavaScript | MDN
 

Call Function の構文

 

Call Function のコード確認

Food Object が呼ばれて、Product.call の引数として、thisとname、priceを入れると、Food Object領域でthisが参照されることが分かります。 Toy も同様になります。
 
 

Apply Function の構文

 

Apply Function のコード確認

call関数と同様な動きですが、違いとして call 関数は、引数を受け取ることに対して、apply 関数は、連続した引数のリストを受け取ることになります。
 

Bind Function の構文

 

Bind Function のコード確認

obj変数とsum関数をbindで括ることになります。
 
このままsum(1, 2, 3)関数を呼ぶと、thisは、グローバルになるので
sum.bind(obj)にして新しいコピー関数を呼び出すと以下になります。

© EndlessDev2016 2021 - 2025