Today was another day of continuous rain. It’s been raining for weeks. Call (), apply(), bind()… Everyone’s thinking about their girlfriend, and I’m thinking about code, which sucks… A face meng force, but also forget their difference, as expected, the rain even brain are not good…

  • I immediately wrote some code in the browser to verify the difference between the three functions, as follows:
Let bigBaby = {name: 'bigBaby ', age: 81, ageFun: () => {console.log(this.name + "age:" + this.age)}, descFun: (height, weight, hobby) => {console.log(this.name + "age:" + this.age + "height:" + weight +" "+ hobby)}} let littleBaby = {name: 'littleBaby ', age: 18} bigBaby. Agefun. call(littleBaby)// undefined constant age: undefined constant age: littleBaby. Bind (littleBaby)()// undefined constant age: undefined constant ageCopy the code
  • When I saw the results, I came backbigBabyThe scope of the arrow function in the object has been increased. This points to window, so undefined is not available. Careless and easy to make mistakes, don’t try to write functions like arrow functions… Then change to the following code:
Let bigBaby = {name: 'bigBaby ', age: 81, ageFun: function () {console.log(this.name + "age:" + this.age)}, ageFun: Function (height, weight, hobby) {console.log(this.name + "age:" + this.age + "height:" + height +" "+ weight +" hobby: "+ hobby)}} let littleBaby = {name: 'littleBaby ', age: 18} bigBaby. Agefun. call(littleBaby)// 小宝 age: 18 bigBaby. Agefun. apply(littleBaby) // 小宝 age: Bigbaby.agefun.bind (littleBaby)() // 小宝 age: 18Copy the code

  • Here’s what it looks like. The first point:

    • Call (), apply(), and bind() are all used for redefinitionsthisLittleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby: littleBaby
    • The call, the applyDirect execution functionBind returns oneA new function, so the call is executed

  • Next, the code looks like this:

Let bigBaby = {name: 'bigBaby ', age: 81, ageFun: function () {console.log(this.name + "age:" + this.age)}, ageFun: Function (height, weight, hobby) {console.log(this.name + "age:" + this.age + "height:" + weight +" "+ hobby)}} let littleBaby = {name: 'littleBaby ', age: 18} bigBaby. Descfun. call(littleBaby, 2, '200 catty ', (() => 'basketball ')()) Apply (littleBaby, [2, '200 catty ', (() => '200 catty ')()]) Basketball bigBaby. Descfun.bind (littleBaby, 2, '200 catties ', (() => 'basketball ')())() // Xiao Bao Age: 18 height: 2 meters Weight: 200 catties Hobby: basketballCopy the code

  • See the following results, second point:

    • Except for the first argument, all subsequent arguments are input arguments to the function
    • The call parameters are placed directly in, separated by commas and placed directly afterBigBaby. DescFun. Call (littleBaby, 2, '200 jins, (() = >' basketball ') ())
    • All apply parameters must be passed in an arrayBigBaby. DescFun. Apply (littleBaby, [2, '200 jins, (() = >' basketball ') (a)])
    • The arguments to bind are put in directly, all comma-separated, directly after, just like callBigBaby. DescFun. Bind (littleBaby, 2, '200 jins, (() = >' basketball ') () ()
    • The parameters of the three are allowed to be of various types

  • conclusion

    • Call (), apply(), and bind() are all used to redefine this

    • Call and bind input arguments are passed in with commas, and apply’s input arguments are passed in an array