A detailed discussion of JavaScript closures and applications

I have really learned closures over and over again. JS is profound and profound, and I feel like I have gained something new every time I learn it. I believe that closure is essential when everyone encapsulates front-end plug-ins. I personally think that the real benefit of closures is not only encapsulation, but also encapsulation. It can bring our own private methods and is flexible and convenient in calling. It will also keep your code's external objects clean and tidy.

Get to the point

Wikipedia defines JS closure like this: In computer science, closure (English: Closure), also known as lexical closure (Lexical Closure) or function closure ( function closures) are functions that reference free variables. The referenced free variable will remain with the function even after it has left the environment in which it was created. Therefore, there is another way of saying that a closure is an entity composed of a function and its associated reference environment. Closures can have multiple instances at runtime, and different reference environments and the same function combination can produce different instances.

In layman's terms, closures are different from ordinary functions in that they allow a function to still access non-local variables outside the scope of the immediate call. I would also like to say that the syntax of closures makes your code more dynamic. The following piece of code may make you feel something.

<script>
 (function () {
  var userToken = "this is my token";
  var someConfig = "opening some function";
  var privateValue = "private";
  var publicValue = "public";
  var appObj = {};
  function myPrivateFunc() {
  alert(privateValue)
  }
  appObj.getUserToken = function () {
  //some logic
  userToken += " after some inner logic";
  return userToken;
  }
  appObj.publicVal = publicValue;
  window.application = appObj;
 }());//立即执行
 console.log(application.getUserToken());//this is my token after some inner logic
 console.log(application.publicVal);//public
 console.log(application.privateValue); //undefined
 application.myPrivateFunc(); //error
 </script>

I attach appObj to the window. I usually like to define a global object named application, which represents the top level common to the entire application. Object, you can expose many public operation methods in it, and you can also do some private processing in it to prevent external calls from causing some problems. Under the defined "top-level" application object, you can also define the global variables you must have in it, so as to prevent the impact of ordinary global variables on the application, and within the closure you defined, pass Objects exposed to the outside express more clear information. I have always thought that it is too shameful to casually define a JS global variable.

The closure writing method and the powerful intelligent prompts of VS will make you feel extremely comfortable. Below I have attached another method

(function () {
  var baseUrl = "www.cnblogs.com/tdws/";
 
  application.getBaseUrl = function () {
  return baseUrl;
  }
 }());
 console.log(application.getBaseUrl());//www.cnblogs.com/tdws/

Write it at the end

Don’t you think you should keep the variable? Up, exposing a series of get methods, very dynamic ╮(╯-╰)╭ Spread your hands...

Of course, closures also need to be used appropriately by you, and do not cause circular references, because it will Cause memory leak. Don't make unnecessary closures, which will waste your space, because the closure will not be released. Don't use closures everywhere because it will increase the complexity of your code.

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website!

For more detailed articles on JavaScript closures and applications, please pay attention to the PHP Chinese website!