美文网首页
深入JS闭包和应用场景

深入JS闭包和应用场景

作者: 多了去的YangXuLei | 来源:发表于2018-03-27 12:20 被阅读57次

看过很多的关于闭包的讲解,写个进阶总结吧。

闭包在《JavaScript权威指南》定义是:函数对象本身和这个函数关联作用域链的结合。

想理解上面👆的话就要知道在JavaScript作用域相关的有:

  • 变量作用域
    • 全局作用域
    • 本地作用域
  • 函数作用域

函数作用域可以决定变量的作用域范围。一个在函数中被定义的变量,在这个函数体中,以及该函数体中嵌套定义的所有函数内部都可见。另外和同名本地变量覆盖全局变量同理,嵌套函数中的同名本地变量也会覆盖其上层函数中的本地变量。

其实变量的本质就是通过对象来组织到一起的属性集合。定义全局变量就是在全局对象(window)上定义了一个属性

var a = {};
window.a ==== a   //true

所以对于本地变量的话,相当于某个对象的属性,只是没有办法获取到这个对象。这个对象被称为 调用对象 或者 声明上下文

引出作用域链

为了可以定位到具体指向哪个变量,就需要作用域链。

作用域链:JavaScript每一个代码块都会与一个作用域链相关联,这个链是一个对象列表,对于每一个标识符,都依次从这个链的对象中查找具有相同标识符的属性。而作用域链就是由全局变量和不定数量的由函数调用产生的调用对象构成的列表

var x = 1;
var y = 2;

// 代码执行到此,为了确定x和y,查询其作用域链: [ window ],从 window.x 和 window.y 中取出了值
console.log( x + y );

function fnA(){
     // 函数被调用,产生了fnA的调用对象(即为a),用于查询变量的作用域链为:[ a, window ]
     var x = 2;
     // a.x 定位到x,a.y不存在,继续从 window.y 中定位到y
     console.log( x + y );
}

fn();

注意函数刚定义的时候还没有调用对象存在,所以当函数嵌套多的话,作用域链就很长

引出词法作用域

词法作用域(lexical scoping)是指,函数在执行时,使用的是它被定义时的作用域,而不是这个函数被调用时的作用域。

var scope = 'global scope';
function checkScope(){
     var scope = 'local scope';

     return function(){
         console.log( scope );
     }
}

var f = checkScope();
f();      // local scope

实际该函数执行时‘fn()’时作用域中的‘scope’是 ‘global scope’ 但实际执行使用的是定义函数时那个‘local scope‘,因为函数在执行时使用的作用域链是它在定义时绑定的那个作用域链(准确地说是使用当时绑定的那个作用域链加上新建的调用对象组成的新的作用域链),而不是函数调用时所处上下文的作用域链。

最后理解闭包后,闭包的强大之处其实在于:JavaScript中的函数,通过作用域链和词法作用域两者的特性,将该函数定义时的所处的作用域中的相关函数进行了捕获和保存,从而可以在完全不同的上下文中进行引用。

应用场景

  • 保护函数内的变量安全:如迭代器、生成器。

  • 在内存中维持变量:如果缓存数据、柯里化。

相关文章

  • 深入JS闭包和应用场景

    看过很多的关于闭包的讲解,写个进阶总结吧。 闭包在《JavaScript权威指南》定义是:函数对象本身和这个函数关...

  • php之闭包函数(Closure)

    php闭包函数(Closure) JS闭包 js和php闭包使用和区别

  • 实用网站

    JS scrollIntoView()的用法 阮一峰 闭包 null和undefined javascript深入...

  • 闭包1(基础)

    (什么是闭包?闭包的作用?闭包的缺陷?) (闭包的几种可能的应用场景) (闭包与内存泄漏,有关闭包的面试题) 推荐...

  • Javascript闭包、闭包应用场景和实例

    建议参考博客:http://www.ruanyifeng.com/blog/2009/08/learning_ja...

  • js闭包应用

    function func(n,k){ document.write(k+" "); return{ fu...

  • IOS进阶-理解OC中block (二)

    上文中介绍了闭包及block的关系,下面结合具体场景再深入探究。 应用场景 代码如下: 控制台打印 OC文件底层编...

  • 详解js闭包

    详解js闭包 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实...

  • python之闭包

    1、什么是闭包? 2、闭包有什么用? 3、闭包的应用场景? 今天带着以上三个问题来学习闭包。 首先说明:闭包,并不...

  • Swift学习- 语法2

    13、函数 14、闭包 应用场景:先看OC的实现 14、尾随闭包 不要求自己写,但是要看懂,Swift中有大量闭包...

网友评论

      本文标题:深入JS闭包和应用场景

      本文链接:https://www.haomeiwen.com/subject/lwsjcftx.html