setInterval函数的function与()=>区别——解决Cannot readproperty‘XXXXXXX‘of undefined异常

简介: setInterval函数的function与()=>区别——解决Cannot readproperty‘XXXXXXX‘of undefined异常

解决Cannot readproperty'XXXXXXX'of undefined异常

function(){} 与 ()=>{}的区别主要是它们的作用域的不同。

个人建议使用()=>{},因为使用function(){}使用外部变量的时候会出现下面的异常:

Cannot readproperty'XXXXXXX'of undefined

例如使用function(){}这种,这里的this.lastresult就无法读取,会爆出 undefined 的异常。

这是用如果换成()=>{}就可以使用了。

setInterval(()=> {   },500)

完美解决问题。

setInterval()和setTimeout()的两种使用方式及作用域

setInterval()是以指定的时间为周期调用函数的方法。

setTimeout()是延时指定的时间来执行某个函数的方法。

两个函数虽然作用不同,但传参方式和作用域是相同的。

第一个参数是用来传递要调用的方法,可以传递一个代码串:

<script>

   function fn(value){

       alert("value=" + value);

   }

   setTimeout("fn(1)", 1000);

</script>

但是当在一个闭包里调用的时候,就会出现问题,如:

<script>

   function outerFn(){

       var value = 1;

       function fn(){

           alert("value=" + value);

           value += 1;

       }

       setInterval("fn()", 3000);

   }

   outerFn();//这里无法调用

</script>

会出现错误:Uncaught ReferenceError: fn is not defined

原因是fn()是以字符串的方式传递的,它的作用域是全局作用域,全局作用域是无法访问到fn()的。

解决的办法是fn以函数引用的方式传递,也就是setInterval()的第二种传参方式。

<script>

   function outerFn(){

       var value = 1;

       function fn(){

           alert("value=" + value);

           value += 1;

       }

       setInterval(fn, 3000);

   }

   outerFn();

</script>

但是这样又带来问题,如果想给fn传参数怎么办?可以像如下这样去写吗?

<script>

   function outerFn(){

       var value = 1;

       function fn(n){

           alert("value=" + n);

       }

       setTimeout(fn(5), 1000);

   }

   outerFn();

</script>

答案是不可以的,函数只写函数名,是函数引用;后面加括号是函数执行。

setTimeout(fn, 1000);//引用

setTimeout(fn(5), 1000);  //直接执行

所以第7行,没有按照预期延迟1000毫秒执行fn(5),而是立刻就执行了。这要注意和上面第一种方式——传递代码字符串的不同。

如果确实有从外部传参的需要,该怎么办呢?

<script>

   function outerFn(value){

       function fn(){

           alert("value=" + value);

       }

       setTimeout(fn, 1000);

   }

   outerFn(5);

</script>

如上,是利用了闭包的原理,fn作为内部函数,是可以访问包含它的outerFn的作用域中的变量的,因此我们想给fn传参,只要给outerFn传参就可以了。这在传递的参数复杂(比如是一个复杂的json)的情况下,很有用途。


相关文章
|
27天前
|
JavaScript Linux 数据中心
【Azure Function App】解决Function App For Container 遇见ServiceUnavailable的异常
【Azure Function App】解决Function App For Container 遇见ServiceUnavailable的异常
【Azure Function App】解决Function App For Container 遇见ServiceUnavailable的异常
|
27天前
【Azure Durable Function】PowerShell Activity 函数遇见 Newtonsoft.Json.JsonReaderException: The reader's MaxDepth of 64 has been exceeded.
【Azure Durable Function】PowerShell Activity 函数遇见 Newtonsoft.Json.JsonReaderException: The reader's MaxDepth of 64 has been exceeded.
|
27天前
|
安全 JavaScript 应用服务中间件
【Azure Function App】如何修改Azure函数应用的默认页面呢?
【Azure Function App】如何修改Azure函数应用的默认页面呢?
|
20天前
|
存储 JavaScript 前端开发
|
27天前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
|
27天前
|
API C++ Python
【Azure 应用服务】Python fastapi Function在Azure中遇见AttributeError异常(AttributeError: 'AsgiMiddleware' object has no attribute 'handle_async')
【Azure 应用服务】Python fastapi Function在Azure中遇见AttributeError异常(AttributeError: 'AsgiMiddleware' object has no attribute 'handle_async')
|
27天前
|
JSON 数据格式 Python
【Azure 应用服务】Azure Function Python函数中,如何获取Event Hub Trigger的消息Event所属于的PartitionID呢?
【Azure 应用服务】Azure Function Python函数中,如何获取Event Hub Trigger的消息Event所属于的PartitionID呢?
|
27天前
|
C++ Python
【Azure 应用服务】Azure Function Python函数部署到Azure后遇见 Value cannot be null. (Parameter 'receiverConnectionString') 错误
【Azure 应用服务】Azure Function Python函数部署到Azure后遇见 Value cannot be null. (Parameter 'receiverConnectionString') 错误
|
27天前
|
C# C++ Python
【Azure 应用服务】Azure Durable Function(持久函数)在执行Activity Function时候,因为调用函数名称错误而导致长时间无响应问题
【Azure 应用服务】Azure Durable Function(持久函数)在执行Activity Function时候,因为调用函数名称错误而导致长时间无响应问题
|
27天前
【Azure 应用服务】Azure Function Timer触发函数加上Singleton后的问题
【Azure 应用服务】Azure Function Timer触发函数加上Singleton后的问题