Call and apply

The two purposes

Change the point to this.

Warm 🌰 :

var name = 'april'
var boyfriend = {
    name: 'bran',}function getName() {
    console.log(this.name)
}
getName() // April, which returns the global name variable
// If you want to get the name of the variable Boyfriend, how can you get it
getName.apply(boyfriend)
getName.call(boyfriend)
Copy the code

Simulation implementation of Call

From the above example, we can find that:

• Call changes this to point to boyfriend
• The getName function executes

Other features of the Call method:

• The call method can also give arguments to execute a function

var name = 'april'
var boyfriend = {
    name: 'bran',}function getName(age, height) {
    console.log(this.name)
    console.log(age)
    console.log(height)
}
getName.call(boyfriend, 24.178)
// bran
/ / 24
/ / 178
getName.apply(boyfriend, [24.178])
// bran
/ / 24
/ / 178
Copy the code

• This parameter can be passed null, when null, municipal window

var name = 'april'

function bar() {
    console.log(this.name)
}

bar.call(null) // april
Copy the code

• Functions can have return values

var person = {
    name: 'april',}function bar(height, age) {
    return {
        name: this.name,
        height,
        age,
    }
}

console.log(bar.call(person, 160.24))
// Object {
// name: 'april',
// height: 160,
// age: 24
// }
Copy the code

Custom implementation

Function.prototype.myCall = function(context) {
    context = context || window
    context.fn = this
    let args = []
    for (let i = 1; i < arguments.length; i++) {
        args.push(`arguments[${i}] `)}// The eval() function executes the string as if it were JavaScript code.
    let result = eval(`context.fn(${args}) `)
    delete context.fn
    return result
}
Copy the code

The difference between call and apply

Call parameters are different:

• The parameters of the call

1. The object that calls call must be a function
2. The first argument to call is an object. The caller of the Function will point to this object, which defaults to the global object window if not passed
3. Starting with the second parameter, you can receive any number of parameters, each of which is mapped to the parameter of the Function at the response location.

function func(a, b, c) {}

func.call(obj, 1.2.3)
// func receives arguments that are actually 1,2,3

func.call(obj, [1.2.3])
// func receives arguments that are actually [1,2,3],undefined,undefined
Copy the code

• The parameters of the apply

1. The object that calls call must be a function
2. Only two arguments are accepted. The first argument is an object. The caller of the Function will point to this object, which defaults to the global object window if not passed
3. The second argument, which must be an array or a class array, will be converted to a class array, passed to Function, and will be mapped to the corresponding argument to Function. This is also an important difference between call and apply.

func.apply(obj, [1.2.3])
// func receives arguments that are actually 1,2,3

/ / array
func.apply(obj, {
    0: 1.1: 2.2: 3.length: 3,})// func receives arguments that are actually 1,2,3
Copy the code

Simulation implementation of Apply

Function.prototype.myApply = function(context, arr) {
    context = context || window
    context.fn = this
    let result
    if(! arr) { result = context.fn() }else {
        let args = []
        for (let i = 0; i < arr.length; i++) {
            args.push(`arr[${i}] `)
        }
        result = eval(`context.fn(${args}) `)}delete context.dn
    return result
}
Copy the code

Some uses of apply

Gets the largest item in the array

let array = [3.1.15.12]
let max = Math.max.apply(null, array) // Max is 15
Copy the code

Gets the smallest item in the array

let array = [3.1.15.12]
let min = Math.min.apply(null, array) // min is just 1
Copy the code