Read the call and apply in JS

Time:2020-10-25

I’m so tired at work. Let me tell you a story

Xiao Li is a senior programmer. After years of training, he has developed a solid skill. He is lively and cheerful. He doesn’t want to deal with the cold computer all the time. He wants to be engaged in some more humane career. So he goes to a group to deliver delivery. After all, there are many opportunities to contact customersI’m talking nonsense).
One day, Xiao Li received a delivery order from a nearby office building and sent it to the customer(Xiaobai, another programmer)At that time, I found that the scene in front of me was so familiar: Xiaobai was scratching her ears to solve a bug. When she couldn’t figure it out, Xiao Li glanced at the code on the screen and said, “you eat first, I’ll try it?” As soon as Xiaobai heard this, he turned his head, and his eyes were stunned. He pushed his legs and slid to one side to make room for the “takeaway boy” Xiao Li has a lot of operations here. Finally, he helps Xiaobai solve four bugs, optimizes two algorithms, and sorts out the table relationships in the database
Xiao Bai’s braised pork suddenly doesn’t smell good. Xiao Li has already gone far away and begins to deliver the next take away order

Read the call and apply in JS

Let’s start our story today——callapplyThe function is the same as it.

Use the idea of call to summarize the above plot:Programmer.programmer.call (takeaway)

Xiao Li, the delivery manborrowThe programmer’s programming skills help Xiaobai solve the bugTakeout programming

Takeaway brother has other talents. The corresponding pseudo code of call idea is as follows:
“Takeaway cooking”Cook, stir fry, call (takeaway)
“Takeaway player playing piano”Player. Piano player. Call (takeaway)
“Takeaway change tire”Repairman. Change tire. Call (takeaway)……

Read the call and apply in JS

Help memory: forProgrammer.programmer.call (takeaway)Call can literally mean “make a call”——programmer(owned byprogrammingSkills)phonetellTakeawayHow to type the code (note the order of the four bold fonts).

Scene brought in

Let’s look at a piece of code to define the programmer and takeaway object. The object properties contain their respective names and skills:

//Define programmer objects
var programmer = {
  Name: 'programmer',
  programming: function () {
    console.log (`${ this.name }Programming)
  }
}

//Define takeout object
var delivery = {
  Name: 'takeaway',
  sendFood: function () {
    console.log (`${ this.name }Food delivery
  }
}

Programmer:programmer.programming()
Delivery by takeaway:delivery.sendFood()
It’s normal. It’s natural.

However, if you want to let the takeaway salesman program, you don’t want to write an additional programming method for the takeout, like:delivery.programming()So, what to do?

After all, not all takeout salesmen can program, so writing programming skills in their internal will only seem to be out of the ordinary sense. It’s better to borrow the existing programming methods

Call on stage

programmer.programming.call (delivery) // print results: takeout programming

programmer.programming.apply (delivery) // print results: takeout programming

As we said above, pseudo codeProgrammer.programmer.call (takeaway)At the same time,console.log($+ this.name }Programming)This pointer points to the takeaway delivery object, naturally this.name namely delivery.name “Takeaway”.

Call / apply transfer parameter

Now let’s modify the code a little to see how call and apply pass parameters:

//Define programmer objects
var programmer = {
  Name: 'programmer',

  //Change 1: add three parameters
  programming: function (ability1, ability2, ability3) {
    console.log (`${ this.name }Programming)

    //Change 2: add print
    console.log (` more skills: ${ability1}, ${ability2}, ${ability3} '))
  }
}
programmer.programming.call (delivery, 'stir fry', 'play the piano', 'change tires')

//Pay attention to the way to transfer the parameters of apply: array form
programmer.programming.apply (delivery, ['stir fry ','play the piano','change tires'])

//The printing results of both methods are as follows:
//Takeout programming
//More skills: cooking, playing piano, changing tires

summary

The function of call and apply is to change the scope of this, and to call functions in specific scopes. When an object does not have a method and other objects do, we can use call or apply to reuse a method.

Call and apply use the same method, the only difference is their parameter rule: call method acceptsA list of parameters, and the apply method acceptsAn array containing multiple parameters


December 20 added:

For the usage scenarios of call and apply in the development, please refer to “understanding” Array.prototype.slice .call()》。

Recommended Today

Regular expression sharing for checking primes

This regular expression is shown as follows: Regular expressions for checking prime numbers or not To use this positive regular expression, you need to convert the natural number into multiple 1 strings. For example, 2 should be written as “11”, 3 should be written as “111”, 17 should be written as “11111111111”. This kind of […]