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

Detailed analysis of JavaScript function definition_javascript skills

WBOY
Release: 2016-05-16 15:50:04
Original
1001 people have browsed it

Function

A few key points:

a). Functions are first-class citizens in JavaScript (importance)
                                                                                                                                                                                                                                                                                     . c). The function defines an independent variable scope

Definition method

a) Named function:

Named functions are global unless defined inside another function.

      // 全局的命名函数
  function add(x, y) {
    return x + y;
  }
  console.info(add(100, 200));  //300

Copy after login
b) Anonymous function:

Anonymous functions are usually assigned to a variable and then called through the variable.

    var func = function (x, y) {
      return x + y;
    }
    console.info(func(5, 2)); //7
Copy after login
Anonymous functions are suitable for the following situations of “immediately executed anonymous functions”:

    console.info(
      function (x, y) {
            return x + y;
          }(100, 200)  //立即调用
        );
Copy after login
C) The definition method affects the code execution effect

The named function can be used first and then defined

    console.info(sum(10, 10));
    function sum(num1, num2) {
      return num1 + num2;
    }
Copy after login
Anonymous functions must be defined first before using

    //console.info(sumFunc(10, 10));  //Uncaught TypeError: Property 'sumFunc' of object [object Object] is not a function 
    var sumFunc = function (num1, num2) {
      return num1 + num2;
    };
    console.info(sumFunc(10, 10));


Copy after login

Function return value:

Use return to generate a return value. If there is no return, the function returns undefined

 function func() {
 }
 console.info(func()); //undefined
 function func2() {
   return; //空的返回语句
 }
 console.info(func2()); //undefined

Copy after login

The pit hidden in the return:

 var func = function (x, y) {
   var sum = x + y;
   return {
     value : sum
   }
 }

Copy after login
There is no problem in writing like this: calling func(5,5) returns Object {value: 10}

However:

  var func = function (x, y) {
    var sum = x + y;
    return
    {
      value: sum
    };
  }
  console.info(func(5,5)); //undefined

Copy after login
If return is followed by a carriage return and a line change,

Calling func(5,5) displays undefined
The editor added a semicolon after the return for us; however, it is of no use in this case.

Functions are objects:

  function add(x, y) {
    return x + y;
  }
  console.info(add(100, 200)); //300
  var other = add; //other和add引用同一函数对象
  console.info(other(300, 400)); //700
  console.info(typeof other);  //function
  console.info(add === other); //true

Copy after login

Nested defined functions:

Within a function, you can define another function.

  function outerFunc(a, b) {
    function innerFunc(x) {
      return x * x;
    }
    return Math.sqrt(innerFunc(a) + innerFunc(b));
  }
  console.info(outerFunc(3, 4)); //5

Copy after login

Access external variables:

Internal functions can access external variables and parameters.

 var globalStr = 'globalStr';
 function outerFunc2(argu) {
   var localVar = 100;
   function innerFunc2() {
     localVar++;
     console.info(argu + ":" + localVar + ":" + globalStr);
   }
   innerFunc2(); //hello:101:globalStr
 }
 outerFunc2("hello");

Copy after login

Function that returns a function:

Because functions are objects, they can be used as return values.

  function outerFunc(x) {
    var y = 100;
    return function innerFunc() {
      console.info(x + y);
    }
  }
  outerFunc(10)(); //110
Copy after login
The above is the entire content of this article, I hope you all like it.

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