javascript callメソッドとapplyメソッドについて

javascript callメソッドとapplyメソッドについて

javascriptで、callメソッドとapplyメソッドを使った簡単なサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.114

callメソッド使い方

まずは、以下のコードを実行してみます。

const obj = {
    str: 'Hello'
}

function hoge(){
    console.log(this.str);
}

hoge(); // undefined

当然、「this.str」は「undefined」となります。

ところが、callメソッドを使用すると、objがthisとして引数に利用できてしまいます。

const obj = {
    str: 'Hello'
}

function hoge(){
    console.log(this.str);
}

hoge.call(obj); // Hello

引数がある場合は、以下のように利用できます。

const obj = {
    str: 'Hello'
}

function hoge(str){
    console.log(this.str + str);
}

hoge.call(obj,"World"); // HelloWorld

applyメソッド使い方

applyメソッドも、ほぼcallメソッドと同じですが、

const obj = {
    str: 'Hello'
}

function hoge(){
    console.log(this.str);
}

hoge.apply(obj); // Hello

引数を、配列で指定するところが異なります。

const obj = {
    str: 'Hello'
}

function hoge(str){
    console.log(this.str + str);
}

hoge.apply(obj,["World"]); // HelloWorld