JS 闭包 p5

Posted Jony-IT

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS 闭包 p5相关的知识,希望对你有一定的参考价值。

终于到闭包了,写了一晚上,好激动:

首先闭包,个人是这样理解的(比较好记):闭包是一种能力,是一种可以访问内部函数作用域的能力或者说是一种行使权力,一旦你拥有这个能力,你将可以访问内部函数的作用域。??还是有点晕,看例子:

function fn(){
   var a = 2;

   function x(){
       console.log(a);
   }   

  return x;
}

var b = fn();

b();//2

最终结果输出2,fn 函数内部声明了一个x函数,x函数内部访问作用域中的a,之前提到过,a与x函数是fn函数的内部声明,外部是无法访问的,比如直接 x()或者a是会报错的,但是如果我们把x函数当作函数返回给全局作用域中声明的b,

那么b得到了内部函数x的引用,从而获取了可以访问内部声明变量a的能力,或者说涵盖fn内部作用域的使用权利,这种能力或者说叫使用权、访问权就是闭包。

明白没?

另外:因为闭包的存在,垃圾回收器不会回收,因为内部作用域还存在并且被x使用。

再看下面的(书中的例子,拿来):

function fn(){
   var a = 2;
   function foo(){
      console.log(a);
   };  

   out(foo);
}    

function out(f){
   f();   
}

fn(); // 2

 

首先定义了fn函数,然后在其内部定义了一个foo内部函数,最后在fn结尾调用外部的out函数(这个大家都懂,调用外部的函数呗),然后外部函数out形参接收一个函数f(回调函数之前说的),

并调用和执行f(就是foo),奇怪不? 其实和上面的例子道理是一样的,foo这个内部函数拥有了fn内部作用域的闭包或者说能力,在out函数中使用了它,也就是我们说的闭包。所以能够访问fn的内部变量a,最终输出2。

注意的是:关键词是“内部函数”,无论通过何种手段将内部函数传递到所在的词法作用域之外,它都会持有对原始定义作用域的引用。而在执行这个内部函数的引用的时候就会使用到闭包,也就是能力。

或者说闭包是个角色或者是张三,张三看着器材室,你是张三的领导,你需要使用器材,把它叫来,说要篮球,它就给你了。张三就是闭包(不太准确希望你能明白)。

回调函数可以说是最典型的闭包使用者~~

 

再看一个:

// 到百度上试试
var a = document.getElementById(‘wrapper‘);
// 添加一个监听事件
a.addEventListener(‘click‘,function(e){alert(1)});

是不是明白了?

再来一个:

function x(a){ 
    setTimeout(function timer(){console.log(a)},1000) 
};

x(1);

// 1秒后
// 输出1

 

setTimeout 作为全局作用域的一个函数(window的),timer作为内部函数拥有对x函数内部作用域的行使权,可以访问参数a,且一直持有,当实际调用时,timer行驶了这种权利,访问了a,拿到了篮球~ 这就是闭包。

 

最后一个,这个比较经典(写完回家):

for(var i = 1;i<=5;i++){
  setTimeout(function timer(){console.log(i);},i*1000);
}

最终会输出5次6~,这样也是,下面会一次输出5次6

for(var i = 1;i<=5;i++){
  setTimeout(function timer(){console.log(i);},0);
}

这个是之前在p3里说的吧好像,var i 会在全局作用域或者说外部作用域声明一个 i其实,等到跳出循环的时候 i = 6;

而这里的timer 实际上是拥有了对全局作用域的访问使用权~  而实际上这个i在循环的时候会不停的把这个i重新赋值,一直赋值,直接终止在6上,

虽然timer拥有对i的使用权,但是只会调用最终章,也就是确定后的值,也就是6(因为他们被封闭在一个共享的全局作用域中!

 

那么像实现上面咋整,可以这样:

// 因为立即执行函数IIFE 会创建一个内部作用域
for(var i = 1;i<=5;i++){
  (function(x){   
  setTimeout(function timer(){console.log(x);},0);
  })(i);
  
}

最爽的是这样,用let(之前说了let会独立声明,不会影响外部,是不是最爽了,把var改成let,一劳永逸)

for(let i = 1;i<=5;i++){
  setTimeout(function timer(){console.log(i);},0);
}

 

好了,先写道着~  回家 - -

 



以上是关于JS 闭包 p5的主要内容,如果未能解决你的问题,请参考以下文章

无法实例化 p5.js 代码(实例模式)

为啥这段代码没有在 p5.js 的画布上输出任何东西?

使用processing编译器写p5.js代码

使用processing编译器写p5.js代码

使用processing编译器写p5.js代码

P5.js代码基础学习记录