setInterval函数的function与()=＞区别——解决Cannot readproperty‘XXXXXXX‘of

​

解决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）的情况下，很有用途。

​