Home > Web Front-end > JS Tutorial > body text

A brief analysis of javascript function expressions_javascript skills

WBOY
Release: 2016-05-16 15:15:55
Original
1132 people have browsed it

Start learning javascript function expressions and read the following carefully.

1. In the general form of creating a function, the function declaration will be read before executing the code, so the function declaration can be written below the function call:

 sayHi();
 function sayHi(){
     alert("Hi!");
}
Copy after login

2. Use function expressions to create functions, which must be assigned a value before calling:

 sayHi(); //错误!!函数不存在
 var sayHi=function(){
     alert("Hi!");
}
Copy after login

3. Recursion

General recursion

function factorial(num){
        if (num <= 1){
          return 1;
        } else {
          return num * factorial(num-1);
        }
      }
Copy after login

arguments.callee is a pointer to the function being executed, which can be used to implement recursion:

function factorial(num){
        if (num <= 1){
          return 1;
        } else {
          return num * arguments.callee(num-1);
        }
      }

Copy after login

4. Closure ( Closure refers to a function that can access variables in another scope ).
A common way to create closures is to create a function inside another function. When a function is executed, an execution environment and corresponding scope chain are created. A closure can only take the last value of any variable in the containing function:

function createFunctions(){
        var result = new Array();
        
        for (var i=0; i < 10; i++){
          result[i] = function(){
            return i;
          };
        }
        
        return result;
      }
      
      var funcs = createFunctions();
      
      //every function outputs 10
      for (var i=0; i < funcs.length; i++){
        document.write(funcs[i]() + "<br />");
      }
Copy after login

The above code outputs all 10. This is because: each funcs function saves the active object createFunctions() (which is a function, an object, and a reference type Function type), and the active object createFunctions() has a variable i, so every Each funcs will have this variable i, and when the createFunctions() function returns the result, i has become 10. So each value of the funcs array is 10.

Can be transformed as follows:

function createFunctions(){
        var result = new Array();
        
        for (var i=0; i < 10; i++){
          result[i] = function(num){
            return function(){
              return num;
            };
          }(i);
        }
        
        return result;
      }
Copy after login

When each anonymous function is called, the current value of i is given to num, and inside the anonymous function, a closure of num is created and returned. This way, each function that returns an array has its own copy of the num variable. (This paragraph is not explained clearly, readers can figure it out for themselves. If there is a better way to describe it, please comment below the article, thank you)

5. this object

  • In global functions, this is equivalent to window.
  • When a function is called as a method, this is equivalent to that object.
  • When each function is called, this function will automatically obtain two special variables: this and arguments. When the internal function searches these two variables, it only searches up to the active object.

6. Imitate block-level scope (private scope)
As follows:

function outputNumbers(count){
        for (var i=0; i < count; i++){
          alert(i);
        }
      
        alert(i);  //count
      }

      outputNumbers(5);

Copy after login

In languages ​​such as Java, the variable i in for is destroyed when used. In JavaScript, an active object is generated when outputNumbers is called, and this i belongs to this active object, so since it is defined, it can be accessed anywhere within the function, and it is shared within the active object.

Syntax for anonymous functions (creating private scope):

(function(){
 //这里是块级作用域
})();
Copy after login

The function declaration is placed in parentheses, indicating that it is an expression, and adding parentheses after it can call it immediately.

If you need some variables temporarily, you can use private scope:

function outputNumbers(count){
      
        (function () {
          for (var i=0; i < count; i++){
            alert(i);
          }
        })();
        
        alert(i);  //causes an error
      }
Copy after login

In the above code, i is private, and an error will be reported when i is accessed outside the anonymous function (private domain), although alert is still within the active object.

7. Private variables
The parameters, local variables and other functions defined inside the function are all private variables of the function. For example:

function add(num1,num2){
  var sum = num1 + num2;
  return sum; 
}
Copy after login

There are 3 private variables: num1, num2, sum. They can be accessed inside the function, but not outside.

Privileged methods can access private variables: simply put, use an expression to give it a closure, and access other functions inside the closure:

 function Person(name){

        var a=0;
      
        this.getName = function(){
          return name + a;
        };
      
        this.setName = function (value) {
          name = value;
        };
      }

Copy after login

This.getName and this.setName are expression methods. After creating a Person instance, the name and a attributes can only be accessed through getName or setName.

The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template