JS Learning Notes 3_Function Expressions

1. Differences Between Function Expressions and Function Declarations##

Function declarations have a "hoisting" characteristic, while function expressions do not. That is to say, function declarations are pre-loaded into the context when loading code, while function expressions are only loaded when executing expression statements

2. Closures##

A function that has access to variables in another function's scope. Since closures can access variables in another scope, the variable value obtained by a closure is the final value, not the value at a certain moment. There's a classic example:

function createFuns(){
  var result = new Array();
  for(var i = 0;i < 10;i++){
    result[i] = function(){
      return i;
    };
    
    /*
    result[i] = function(arg){
      return function(){
        return arg;
      }
    }(i);//此处匿名函数立即执行的 () 可以省略，因为 function 在等号右边出现，不存在歧义（一般形式是 (function(){})()）
    */
  }
  
  return result;
}

The createFuns function returns a set of functions, the execution result of these functions is all 10 (the variable value obtained by closure is the final value), but the execution result of functions returned by the method in comments is the current value of i, because it's pass-by-value

3. this in Function Expressions##

Internal functions cannot directly access the this and arguments objects in external functions, because when internal functions search for these two variables, they only search up to their activation object

P.S. Activation object is the entity of scope chain, scope chain is an abstract concept, while activation object is the concrete implementation of this concept. Actually, scope chain maps to variable object chains in code, which brings up variable objects, don't be afraid, it's not complicated at all:

All variables and functions defined in the execution environment (context) are stored in the variable object. If the execution environment is a function, then take the function's activation object as the variable object, and as one ring of the variable object chain, that is, one ring of the scope chain.

Initially, the function's activation object has only one attribute—the arguments object. Every time a custom property is declared inside the function, add a property to the function's activation object...

Well, after all this talk, it's just one sentence: this is a reference to the activation object/variable object.

If you still don't quite understand, please refer to senior's blog post, and by the way recommend other blog posts from this senior, all very good about js

4. Repeated Variable Declaration##

Does not cause syntax errors, will automatically ignore extra declarations, but initialization operations during declaration will be executed, for example:

var x = 1;
var x = 2;//var declaration is ignored, so no error, but assignment will be executed
alert(x);//2

5. Ideas for Implementing Block-Level Scope##

Declare an anonymous function and call it immediately, then the inside of the anonymous function is block-level scope. Concrete implementation:

(function(){/*块级作用域*/})();

Note: Need to use parentheses to eliminate ambiguity between function expressions and function declarations (from the interpreter's perspective this is the case), because function declarations cannot be directly followed by parentheses, while function expressions can.

P.S. The code in the example is just one way to implement IIFE, there are several others, please refer to [javascript]IIFE Immediately Executed Function Expressions for details, this blog post provides detailed comparison

6. Private Variables##

Variables declared with var or function inside a function are private variables. (Instances cannot directly access, can provide access interfaces by defining public functions)

While variables declared with this.attr = value; method are public variables. (Instances can directly access)

7. Differences Between Closures, Anonymous Functions, Internal Functions, Internal Anonymous Functions##

Closure: A function that has access to variables in another function's scope
Anonymous function: A function expression without a name
Internal function: A function declared inside a function, that is, a closure
Internal anonymous function: An anonymous function declared inside a function, of course, also a closure

P.S. Abusing closures may occupy a large amount of memory. The reason closures can access variables in the outer function's scope is because the closure's activation object holds a reference to the outer function's activation object

Only after the closure is destroyed can variables in the outer function be destroyed, cannot be destroyed in time, so may occupy a large amount of memory

8. The Entire Process of Executing a Function##

Create execution environment context, context has internal attribute [[Scope]]
Update scope chain ScopeChain
Create activation object
Initialize various properties of activation object: this, arguments, formal parameters, etc.
Execute function body
Destroy activation object (cannot be destroyed when closure exists)
Update scope chain

9. JS Singleton Pattern and Module Pattern##

Singleton pattern: A pattern for creating objects with only one instance. Simply put, a pattern is a method, design patterns are good methods summarized by seniors. Implementing singleton pattern in js is especially simple:
```
 var singleton = {attr1: value1, attr2: value2};
```

Yes, it's object literal, actually it's creating an anonymous object, don't know the constructor's name, of course cannot create a 2nd instance

Module pattern: A method proposed by Douglas to enhance singletons, can add private and public attributes to singletons (sometimes also called privileged attributes, indicating attributes with permission to modify private attributes), for example:

 var singleton = function(){
   //私有属性
   var privateStr = 'secret';
   function addPrefix(){
     privateStr = 'this is my ' + privateStr;
   }
   
   //公有属性（特权属性）
   return{//返回一个匿名对象
     getStr : function(){
       addPrefix();
       return privateStr;
     }
   };
 }();//又是匿名函数立即执行
 
 alert(singleton.getStr());

P.S. If singleton is not needed, only need to protect private attributes, can do this:

function Cat(){
  //私有属性
  var privateStr = 'secret';
  function addPrefix(){
    privateStr = 'this is my ' + privateStr;
  }
  
  //公有属性（特权属性）
  this.getStr = function(){
    addPrefix();
    return privateStr;
  }
}
var obj = new Cat();
alert(obj.getStr());

References###

What exactly is this: senior's blog post
Several ways for immediate execution of anonymous functions: [javascript]IIFE Immediately Executed Function Expressions