1. closure - Interview the hardest hit areas

During the recent interview , Whenever asked JavaScript When closing , Most of them are confused and forced .

Closure this thing , You say it's important , It's really important , After all, this is a development technique widely used by many front-end frameworks . You say he doesn't matter , It's really not that important , Because our development projects basically apply the existing framework , Write code within the scope of the framework , Closures are rarely used .

however , I can't stand the interview. I often have to ask .

This section , Let's talk about closure !

2. What happens to closures

Let's start with an example :
function f(){ let a = 1; return function(){ console.log(a); } } f()()
a It's a function f An internal variable , Logically, after the function ends , There's no access outside a Yes .

But if we use a function to access a, Then return this function , It continues a Life cycle of .

The result of the above code is 1.

More Than This , We can also operate repeatedly outside a.

3. Closures will produce ghostly variables

In the above example , We put a Variables quietly send out functions f, Then we can ravage it repeatedly !
function f(){ let a = 1; return function(increment){ a += increment;
console.log(a); } } f()(1)
The answer is 2, so , We can face it outside a Variable operation . Here's a question , What happens if I do it many times ?
var inner = f(); inner(1); inner(1); inner(1);
answer

  so , Multiple operations , The operation is the same a variable , this a Variables are like ghosts , You can't see him outside , He really exists .

4. Closures can be combined with objects

Look directly at the following example , It has certain practical significance
var obj = {} function f(){ let a = 1; obj.num = a; obj.get = function(){
return a; } obj.set = function(v){ a = v; } } f()
This code is different from the previous one , It's not in the function f Directly return another function in , It's for the outside obj Object is given some properties and methods , Isn't it amazing , But this is allowed by grammar .

function f After being run , that obj.num The value must be known at a glance 1

What if I do ?
obj.num += 1;
  thus ,obj.num Is equal to 2

however obj.get() What is the value obtained ?

still 1, that is because a Is a basic type of number 1, and  obj.num = a  It's actually a value copy , We can't change num Size desynchronization changes a, They are two variables . and  obj.get
,obj.set The operation is the real one a

We said above  a Is a basic type of number 1, and  obj.num = a  It's actually a value copy , So if a Is the object type , Just operate .
let a = {}; obj.a = a; obj.get = function(){ return a; } obj.set =
function(v){ a = v; }

okay , From this example , It's not hard for us to find out , The greatest function of closures is to continue the life cycle of some variables within a function . But that's why , Closures can cause some memory leaks . however , Most cases , This memory leak is really harmless .

Some students may say , I don't have to shut up , The big deal is obj Set a property inside a, same .

In this example , Indeed .

however , At some special time , It's really necessary to use closures .

5. Actual combat of closure - Vue Data binding  

stay Vue in , We know , There will be an initialization process , This process will be right data Hijack all attributes in , To trigger watcher to update . The following is a simplified code
var data = { username:'', password:'' } for(let key in data){
Object.defineProperty(data,key,{ set(v){ data[key] = v }, get(){ return
data[key] } }) }
This code looks OK at first glance , But when we give username assignment , Will trigger set method

  The error is reported because a circular reference occurred ,set Triggered repeatedly .

alike ,get Will also report an error

 

  What can I do , Do we have to have a temporary variable , To save the current property value And ?

like this
for(let key in data){ let value = data[key] Object.defineProperty(data,key,{
set(v){ value = v }, get(){ return value } }) }

Perfect in an instant .

  in principle ,value yes for Just a temporary variable in the loop , Because it uses let, Therefore, it is only valid in the current scope . And this temporary value Because by set and get Method accessed , So its life cycle can be continued !

therefore , My understanding of closures is : Function accesses an external variable , And this function will use this variable at some time in the future , It's closure .

Technology
©2019-2020 Toolsou All rights reserved,
C++ of string of compare usage Python Study notes ( one )evo Tool usage problems ——Degenerate covariance rank, Umeyama alignment is not possibleRISC-V_GD32VF103-TIMER0 timer interrupt java Array subscript variable _Java Basic grammar : array be based on stm32 Control four-wheel trolley motor drive ( one ) be based on redis Design of liking function Software engineering career planning mysql Query random data by conditions _MySQL Random query of several qualified records centos7 install RabbitMq