Knowledge about

The call, apply, and bind functions change the direction of this, but the parameter styles of the three functions are different.

Call function implementation

[function].call([this], [param]…) Call () assigns this to the first argument of call() and calls the remaining arguments to a function or method.

Describe with test cases

It (" test call method ", () = > {const call} {= the require (".. /index"); Function.prototype.myCall = call; const obj = { a: 1 }; const f = function (... args) { return { context: this, args }; }; expect(f.myCall(obj, 1, 2)).toEqual({ context: { a: 1 }, args: [1, 2] }); });Copy the code

Code implementation

exports.call = function (context, ... Args) {// this is the call method example :f.call this = f context.fn = this; const result = context.fn(... args); delete context.fn; return result; };Copy the code

Interpretation of the

  • When the f. mycall function is called, this context is actually the f function.
  • The required binding context is passed in with the context parameter
  • The remaining parameters are expressed using expansion syntax
  • First bind the function to the context object
  • Delete the fn method in the context context online to clean up the scene
  • Return execution result

The realization of the apply

The Call method is similar to the apply method, except that the execution parameters are an array instead of multiple parameters

Test case representation

Method to test the apply it (", "() = > {const {apply} = the require (".. /index"); Function.prototype.myApply = apply; const obj = { a: 1 }; const f = function (... args) { return { context: this, args }; }; expect(f.myApply(obj, [1, 2])).toEqual({ context: { a: 1 }, args: [1, 2] }); });Copy the code

Code implementation

The changes are so small that they can be done directly by calling the call function

exports.apply = function (context, args) { return this.call(context,... args) };Copy the code

Here’s the real code

Exports. apply = function (context, args) {// just change one line... Args => args // this is an example of calling a method :f.call this = f context.fn = this; const result = context.fn(... args); delete context.fn; return result; };Copy the code

The bind function

Bind returns a copy of fun, specifying fun’s this and saving fun’s arguments.

Test case representation

Method to test the bind it (", "() = > {const {bind} = the require (".. /index"); Function.prototype.myBind = bind; const obj = { a: 1 }; const f = function (... args) { return { context: this, args }; }; expect(f.bind(obj, 1, 2)(3, 4)).toEqual({ context: { a: 1 }, args: [1, 2, 3, 4], }); });Copy the code

Code implementation

exports.bind = function (context, ... // this = f const f = this; return function F() { return f.apply(context, [...args, ...arguments]); }; };Copy the code
  • Implement a factory function
  • Use apply to point to functions
  • Use the passed context as the context
  • Merge the execution arguments passed in bind with those passed in F() as execution arguments

The interview guide

This is a classic handwritten code problem.

🔥2022 Ran Shu insists on clocking 365 days

Everybody a wave a key three connect with uncle Ran together

How is the day1-js integer represented?

  • B stack video
  • Denver post
  • Github

Day2-0.1 + 0.2 === 0.3? Why is that? How to solve it?

  • B stack video
  • Denver post
  • Github

What is the storage space for day3-number ()? What if the background sends a number that exceeds the maximum limit?

  • B stack video
  • Denver post
  • Github

Day4 – What are the ways to determine data types?

  • B stack video
  • Denver post
  • Github

Day5-new What happens to a function?

  • B stack video
  • Denver post
  • Github

Day6-new a constructor, what happens if the function returns {}, return null, return 1, return true?

  • B stack video
  • Denver post
  • Github

Day7 – Analyze why arrow syntax cannot be used as a constructor

  • B stack video
  • Denver post
  • Github

Day8 – What is a closure? How do YOU generate closures

  • B stack video
  • Denver post
  • Github

Day9 – How to make lazy functions with closures?

  • B stack video
  • Denver post
  • Github

Day14 – Lexical scope, block-level scope, scope chain, static dynamic scope

  • B stack video
  • Denver post
  • Github

Day10 – Relationships between closures and corrified, partial application functions

  • B stack video
  • Denver post
  • Github

Day11 – Talk about closures and immediate functions

  • B stack video
  • Denver post
  • Github

Day12 – How to use closures for library encapsulation

  • B stack video
  • Denver post
  • Github

Day13 – How to accomplish modularity with Closures (Webpack Principle)

  • B stack video
  • Denver post
  • Github

Why does Day15-let solve the loop trap

  • B stack video
  • Denver post
  • Github

Day16 – Why must there be block-level scope?

  • B stack video
  • Denver post
  • Github

Whether day17-let causes variable promotion

  • B stack video
  • Denver post
  • Github

Day18 – Introduce the four forms this refers to

  • B stack video
  • Denver post
  • Github

Events in day19-React are bound to arrow functions

  • B stack video
  • Denver post
  • Github

= = = = = = = = = = = = = = =