Home Web Front-end JS Tutorial Detailed explanation of common forms of JS closures

Detailed explanation of common forms of JS closures

Sep 18, 2017 am 09:28 AM
javascript Detailed explanation

This article introduces several common forms of js closures in detail through example codes. The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to

Scope Chain:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

//作用域链

  var a = 1;

  function test() {

    var b =2;

    return a;

  }

  alert(test());//弹出1;

  alert(b);//不能获取b

//scope chain

  var a = 1;

  function test() {

    var b = 2;

    function test1() {

      var c = 3;

      alert(a);

      alert(b);

      alert(c);

    }

    test1();

  }

  test();//弹出1,弹出2,弹出3;

Copy after login

Lexical scope:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

//词法作用域;

  function f1() {

    var a = 12;

    return f2();

  }

  function f2() {

    return a;

  }

  alert(f1());//并不能获取a,a在f2()中并未定义;

function f1() {

    var a = 1;

    return f2();

  }

  function f2() {

    var b = 3;

    alert(b);

    return a;

  }

  alert(f1());//弹出3,a在f2()中未定义

 

function f1() {

    var a = 1;

    return f2();

  }

  function f2() {

    var b = 3;

    alert(b);

    return a;

  }

  alert(f1());//弹出3,a在f2()中未定义,undefined

  var a=55;

  alert(f1());//弹出3,弹出55

Copy after login

How to break the global scope chain through closures - several common forms


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

//通过闭包突破全局作用域链

  function f() {

    var a = "sun";

    return function () {

      return a;

    }

  }

  var test = f();

  alert(test());//弹出sun

var n;

function f() {

  var a = "sun";

  n = function () {

    return a;

  }

}

f();

alert(n());//弹出sun

  function f(param) {

    var n =function () {

      return param;

    };

    param++;

    return n;

  }

  var test = f(45);

  alert(test());//弹出46;

Copy after login

The above is the detailed content of Detailed explanation of common forms of JS closures. For more information, please follow other related articles on the PHP Chinese website!

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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Detailed explanation of obtaining administrator rights in Win11 Detailed explanation of obtaining administrator rights in Win11 Mar 08, 2024 pm 03:06 PM

Detailed explanation of obtaining administrator rights in Win11

Detailed explanation of division operation in Oracle SQL Detailed explanation of division operation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detailed explanation of division operation in Oracle SQL

Detailed explanation of the role and usage of PHP modulo operator Detailed explanation of the role and usage of PHP modulo operator Mar 19, 2024 pm 04:33 PM

Detailed explanation of the role and usage of PHP modulo operator

Detailed explanation of the linux system call system() function Detailed explanation of the linux system call system() function Feb 22, 2024 pm 08:21 PM

Detailed explanation of the linux system call system() function

Detailed analysis of C language learning route Detailed analysis of C language learning route Feb 18, 2024 am 10:38 AM

Detailed analysis of C language learning route

Detailed explanation of Linux curl command Detailed explanation of Linux curl command Feb 21, 2024 pm 10:33 PM

Detailed explanation of Linux curl command

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

Simple JavaScript Tutorial: How to Get HTTP Status Code

Detailed explanation of numpy version query method Detailed explanation of numpy version query method Jan 19, 2024 am 08:20 AM

Detailed explanation of numpy version query method

See all articles