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


相关文章
|
5月前
|
中间件 Docker Python
【Azure Function】FTP上传了Python Function文件后,无法在门户页面加载函数的问题
通过FTP上传Python Function至Azure云后,出现函数列表无法加载的问题。经排查,发现是由于`requirements.txt`中的依赖包未被正确安装。解决方法为:在本地安装依赖包到`.python_packages/lib/site-packages`目录,再将该目录内容上传至云上的`wwwroot`目录,并重启应用。最终成功加载函数列表。
|
6月前
|
JavaScript
箭头函数与普通函数(function)的区别
箭头函数是ES6引入的新特性,与传统函数相比,它有更简洁的语法,且没有自己的this、arguments、super或new.target绑定,而是继承自外层作用域。箭头函数不适用于构造函数,不能使用new关键字调用。
|
6月前
|
数据可视化 开发者 索引
详解Wireshark LUA插件函数:function p_myproto.dissector(buffer, pinfo, tree)
在 Wireshark 中,LUA 插件通过 `function p_myproto.dissector(buffer, pinfo, tree)` 扩展协议解析能力,解析自定义应用层协议。参数 `buffer` 是 `PacketBuffer` 类型,表示原始数据包内容;`pinfo` 是 `ProtoInfo` 类型,包含数据包元信息(如 IP 地址、协议类型等);`tree` 是
248 1
|
6月前
|
JavaScript
箭头函数与普通函数(function)的区别
箭头函数是ES6引入的新语法,相比传统函数表达式更简洁,且没有自己的this、arguments、super或new.target绑定,而是继承自外层作用域。这使得箭头函数在处理回调和闭包时更加灵活方便。
|
6月前
|
C++ 容器
函数对象包装器function和bind机制
函数对象包装器function和bind机制
40 0
|
10月前
|
前端开发 小程序 JavaScript
微信小程序-Unhandled promise rejection TypeError: Cannot read property ‘get‘ of undefined
微信小程序-Unhandled promise rejection TypeError: Cannot read property ‘get‘ of undefined
|
8月前
|
存储 JavaScript 前端开发
成功解决:Cannot read properties of undefined (reading ‘commit‘)
这篇文章提供了解决Vuex中"Cannot read properties of undefined (reading 'commit')"错误的两种方法:检查模板中的数据属性是否存在,以及确保在Vue实例中正确挂载了store对象。
成功解决:Cannot read properties of undefined (reading ‘commit‘)
|
8月前
|
定位技术 Apache
Echarts——Invalid geoJson format Cannot read property 'length' of undefined
Echarts——Invalid geoJson format Cannot read property 'length' of undefined
143 0
|
8月前
|
JavaScript
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
168 0
|
8月前
|
前端开发 JavaScript
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
195 0

热门文章

最新文章