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

2020.10.17
javascript
javascript

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

1. 環境
2. callメソッド使い方
3. applyメソッド使い方

環境

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

windows10にApacheのインストール

callメソッド使い方

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

const obj = {
    str: 'Hello'
}

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

hoge();

const obj = {

str: 'Hello'

}

function hoge(){

console.log(this.str);

}

hoge();

当然、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(){

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

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(){

console.log(this.str);

}

hoge.apply(obj); // Hello

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

const obj = {
    str: 'Hello'
}

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

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

const obj = {

str: 'Hello'

}

function hoge(str){

console.log(this.str + str);

}

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

applyを使って最大値を求める方法はこちら

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

環境

callメソッド使い方

applyメソッド使い方

preact環境を構築して実行してみる 2020.10.16

javascript minメソッドを使って配列の中の最小値を取得する 2020.10.17