Example of JavaScript method to change function scope

Preface

existJavaScriptIn this case, the scope of the function is a very important concept. According to the default behavior, a function can only access its own scope and variables declared in its parent scope.

However,JavaScriptThere are some methods to change the scope of a function. In this blog, we will introduce these methods and compare the pros and cons between them.

Use call and apply methods

callandapplyyesJavaScriptBoth methods in it can be used to change the scope of the function.

callMethods allow you to call a function, and when called, you can specify the value of this inside the function, as well as the parameters associated with the function. For example:

function myFunction(a, b) {
  (this);
  (a + b);
}

({ name: 'John' }, 2, 3);

In the above example,myFunctionThe function is called, passing an object tocallmethod. This object is set to the function insidethisvalue. In the call, 2 and 3 are also passed to the function and are added together.

applyMethods andcallSimilar, but it receives aParameter array, not a comma-separated parameter list.

({ name: 'John' }, [2, 3]);

callandapplyThe advantage of the methods is that they areEasy to use and understandof.

They can conveniently solve some simple problems, such as using the same function in different contexts.

shortcomingIt is that they cannot be used in more complex scenarios, such as calling a function in the prototype context of a certain function.

Use bind method

bindMethods can also be used to change the scope of a function, but they behave slightly differently.

``bindThe method returns a new function wherethisThe value is set to pass toThe object of the bind` method, and this new function alsoNot executed. Any arguments passed to the bind method will be used as arguments to the new function. For example:

var boundFunction = ({ name: 'John' }, 2, 3);
boundFunction();

In the above example,myFunctionThe function is bound to a new function. This new function is set to{name:'John'}. When a new function is called, 2 and 3 are also passed to it.

bindMethodadvantageIt's very flexible because it can create a new function so that we can use it in many cases.

However,shortcomingIt requires additional memory to create a new function object.

Use arrow functions

ES6Introduced an arrow function that can use the current context'sthisValues, and unlike regular functions, no one belongs to their ownthisvalue.

For example:

var myObject = { 
  name: 'John', 
  myFunction: function(){ 
    setTimeout(() =&gt; { 
      (); 
    }, 1000); 
  } 
}; 

(); //Output "John"

In the above example, the arrow functionthisThe value is set to the external functionthisContext, i.e.myObject。

Arrow functionadvantageIt's them that eliminatethisThe confusion of binding, while maintainingJavaScriptsimplicity.

However, since they do not have their ownthisvalues, they cannot change it.

Summarize

In this article, we discuss three ways to changeJavaScriptFunction scope:

callandapply
bind
Arrow function

althoughcallandapplyVery convenient, but they are not suitable for complex tasks.

bindThe method solves this problem well, but requires extra memory to create new function objects.

Arrow function is a very concise and elegant way to solve itthisThe trouble of binding, but it also has its limitations.

This is the article about JavaScript's method examples to change the scope of function. For more related contents of JavaScript's function change, please search for my previous articles or continue browsing the related articles below. I hope you will support me in the future!