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)的情况下,很有用途。


相关文章
|
15天前
|
存储 C++
【C++】string类的使用③(非成员函数重载Non-member function overloads)
这篇文章探讨了C++中`std::string`的`replace`和`swap`函数以及非成员函数重载。`replace`提供了多种方式替换字符串中的部分内容,包括使用字符串、子串、字符、字符数组和填充字符。`swap`函数用于交换两个`string`对象的内容,成员函数版本效率更高。非成员函数重载包括`operator+`实现字符串连接,关系运算符(如`==`, `&lt;`等)用于比较字符串,以及`swap`非成员函数。此外,还介绍了`getline`函数,用于按指定分隔符从输入流中读取字符串。文章强调了非成员函数在特定情况下的作用,并给出了多个示例代码。
|
25天前
|
SQL 分布式计算 大数据
MaxCompute操作报错合集之遇到报错"ODPS-0130071:[1,8] Semantic analysis exception - class Ssf for user defined function ansy_xx cannot be loaded from any resources",该怎么办
MaxCompute是阿里云提供的大规模离线数据处理服务,用于大数据分析、挖掘和报表生成等场景。在使用MaxCompute进行数据处理时,可能会遇到各种操作报错。以下是一些常见的MaxCompute操作报错及其可能的原因与解决措施的合集。
|
27天前
|
JavaScript 前端开发
JavaScript函数是代码复用的关键。使用`function`创建函数
【6月更文挑战第22天】JavaScript函数是代码复用的关键。使用`function`创建函数,如`function sayHello() {...}`或`function addNumbers(num1, num2) {...}`。调用函数如`sayHello()`执行其代码,传递参数按值进行。函数可通过`return`返回值,无返回值默认为`undefined`。理解函数对于模块化编程至关重要。
24 4
|
21天前
|
运维 负载均衡 Serverless
函数计算产品使用问题之yaml如果写多个function,可不可以yaml在构建的时候能构建多个函数
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
22天前
|
前端开发 小程序 JavaScript
微信小程序-Unhandled promise rejection TypeError: Cannot read property ‘get‘ of undefined
微信小程序-Unhandled promise rejection TypeError: Cannot read property ‘get‘ of undefined
|
2月前
|
资源调度 前端开发
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
217 0
TypeError: Cannot set properties of undefined (setting ‘resdata‘),res定义数据出现的问题,定义的方法用this换成that
TypeError: Cannot set properties of undefined (setting ‘resdata‘),res定义数据出现的问题,定义的方法用this换成that
Cannot read properties of undefined (reading ‘row‘)
Cannot read properties of undefined (reading ‘row‘)
Cannot read properties of undefined (reading ‘post‘)
Cannot read properties of undefined (reading ‘post‘)
|
15天前
|
JavaScript
element-ui Cannot read properties of undefined (reading ‘name‘),data中写成集合的形式
element-ui Cannot read properties of undefined (reading ‘name‘),data中写成集合的形式

热门文章

最新文章