美文网首页程序员
前端闭包机制详解

前端闭包机制详解

作者: ashyanSpada | 来源:发表于2017-06-05 00:36 被阅读0次

在谈闭包之间,我们先看一下javascript的作用域,我们以函数举例。

对一个函数来说它的作用域分为三种:

函数定义作用域

函数调用作用域、

函数内部作用域

以下是一段代码:

var x="how are you";

var a=0;

function ab(){

       console.log('a=',a);

        console.log('x=',this.x);

}

function ac(){

      var a=100;

      var x="I'm fine";

      ab();

}

ac();

ab();

以下为输出:

函数ac的输出与函数ab的输出一致,这是不是很奇怪?函数ac中定义了同名变量a=100,x="I'm fine",ac中调用了函数ab,但函数ab的输出并没有受到影响。

我们来看看《javascript权威指南》中对闭包的解释,闭包就是调用一个函数时,如果该函数内函数体有对函数外变量的引用,函数被调用时,就是会将函数以及函数引用的变量包裹起来,这就形成了闭包。

我们再来看上面的例子,这是js闭包的经典示例,我们不难发现,js中对于函数的调用会回溯到函数定义时的作用域,函数的作用域就是函数定义的作用域,它和函数调用的作用域无关。所以无论函数ac内变量怎么变换,都不会影响ac内函数ab的输出。

那么,在函数调用作用域与定义作用域不同的情况下,如果我们想让函数的掉哦用作用域可以影响函数的输出有什么办法吗?

答案时肯定的,方法可以从两个方面入手:

方案一:函数传参

方案二:改变函数执行上下文

我们先来看方案一怎么实现的,以下是示例代码:

var a='how are you';

function ab(a){

      console.log('a=',a);

}

function ac(){

      var a="I'm fine";

      ab(a);

}

ab(a);

ac(a);

输出:

通过输出可以看出函数ab的输出发生了改变,这是因为在函数ac中变量a被当作参数传入了函数ab。再看函数ac的写法是不是很熟悉,这就是常见的回调函数的写法,回调函数在异步javascript应用很多。在函数ac中函数ab的调用,严格意义上算不上闭包,因为ac只调用了ab本身,没有连ab外的变量一起调用。

我们再来看改变函数执行上下文怎么实现:

var x="how are you";

function ab(){

      console.log("x=",this.x);

}

var a={

      x:"i'm fine"

};

ab();

ab.call(a);

以下是输出结果:

ab的输出更改成功, 在js中使用call,apply以及bind这些方法可以改变函数执行的上下文。

总结,js中的闭包如果想通了其实很简单,就是一个函数如果被调用的话,它不是在调用它的作用域执行的,而是在定义函数的作用域执行的。理论上在不改变函数执行上下文的情况下,只有定义函数的作用域以及函数内部作用域可以影响函数的输出,调用函数的作用域要想影响函数的输出,只有三个方法,第一个调用函数作用域以及定义函数作用域是同一个作用域(这个纯属扯淡,是个人都知道),第二个是调用函数作用域将参数传进函数内部作用域,第三个是通过apply,call以及bind这些方法改变函数执行的上下文。我现在还想到了第四个方法,时间有限,不说了,以后在补充。

第一次写技术文章,难免有很多遗漏的地方,如果这篇文章能有幸给人看到的话,希望您能留下宝贵的意见。

相关文章

  • 前端闭包机制详解

    在谈闭包之间,我们先看一下javascript的作用域,我们以函数举例。 对一个函数来说它的作用域分为三种: 函数...

  • js闭包问题

    javascript 闭包的概念,闭包的作用,闭包经典面试题详解(配图解) 函数作用域(闭包前置知识) 要彻底弄懂...

  • 文摘-20170305

    前端 释义图例详解那道setTimeout与循环闭包的经典面试题js中proto和prototype的区别和关系?...

  • 闭包

    一、闭包技术详解 1.1 什么是闭包? 闭包实际上是一种函数,所以闭包技术也是函数技术的一种;闭包能做的事情函数几...

  • 详解js闭包

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

  • 闭包

    title: 闭包date: 2018-05-27 23:00:00tags: 闭包categories: 前端 ...

  • JavaScript学习笔记(4) 闭包详解(Closure A

    《JavaScript学习笔记(4) 闭包详解(Closure Are Not Magic)》 ---- 写在开头...

  • JS-读懂闭包

    长久以来,闭包是前端同学面试必考的问题。会用闭包也成了高级前端开发者的标志,今天就来彻底弄清楚闭包的每一个细节。 ...

  • 闭包详解

    面试中常常会被问到闭包,每个人对闭包的理解也不一定一样,你说出来他想听的就行。 当遇到一个函数嵌套到另一函数中,内...

  • 闭包详解

    典型的闭包 典型的闭包是一个函数A内声明并返回一个函数B供外部使用,函数B内用到了A内部的局部变量或者形参。外界对...

网友评论

    本文标题:前端闭包机制详解

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