JavaScript call() apply() bind() メソッドの違い

call()

関数内のthisの参照先を指定することができます。

例1

fullInfo関数内のthisはpersonを参照していますが、call()を使用することに寄って、その参照先を変更することができます。

const person = {
    name: "Mike",
    age: 30,
    fullInfo: function() {
        return this.name + " is " + this.age + " years old."
    }
}

const person1 = {
    name: "Tanaka",
    age: 25
}

const person2 = {
    name: "John",
    age: 43
}

console.log(person.fullInfo())
console.log(person.fullInfo.call(person1))
console.log(person.fullInfo.call(person2))

// 出力
> Mike is 30 years old.
> Tanaka is 25 years old.
> John is 43 years old.

例2

call()メソッドの第2引数以降に、関数に渡す引数を指定することができます。

const personInfo = function(location, job) {
    return this.name + " is " + this.age + " years old, from " + location + " and work as a " + job + "."
}

const person1 = {
    name: "Tanaka",
    age: 25
}

console.log(personInfo.call(person1, "Tokyo", "Web Developer"))

// 出力
> Tanaka is 25 years old, from Tokyo and work as a Web Developer.

apply()

call()メソッドとほぼ同じですが、関数に渡す引数を配列で指定することができます。

例1

const personInfo = function(location, job) {
    return this.name + " is " + this.age + " years old, from " + location + " and work as a " + job + "."
}

const person1 = {
    name: "Tanaka",
    age: 25
}

console.log(personInfo.apply(person1, ["Tokyo", "Web Developer"]))

// 出力
> Tanaka is 25 years old, from Tokyo and work as a Web Developer.

例2

Math.min()は通常、引数に配列を渡すことができませんが、apply()を使うことによって、引数を渡すことができるようになります。

console.log(Math.min(6, 4, 11))

// 出力
> 4

const numbers = [6, 4, 11]
console.log(Math.min.apply(null, numbers))

// 出力
> 4

※ただし、これは旧来の書き方であり、現在は以下のように書くことが多いです。

console.log(Math.min(...numbers))

// 出力
> 4

bind()

call()メソッドはその場で実行されましたが、bindメソッドは新しい関数を作成することができます。

例1

const personInfo = function(location, job) {
    return this.name + " is " + this.age + " years old, from " + location + " and work as a " + job + "."
}

const person1 = {
    name: "Tanaka",
    age: 25
}

const bound = personInfo.bind(person1)
console.log(bound("Tokyo", "Web Developer"))

// 出力
> Tanaka is 25 years old, from Tokyo and work as a Web Developer.