JavaScript基础之详解——localStorages代码解析及封装问题与setTimeout函数的执行上下文

<script>
    //封装过期控制代码
    function set(key,value){
        var curTime = new Date().getTime();
        localStorage.setItem(key,JSON.stringify({data:value, time:curTime}));
    }
    function get(key,exp){
        var data = localStorage.getItem(key);
        var dataObj = JSON.parse(data);
        if(new Data().getTime() -dataObj.time > exp){
            consoe.log("信息已过期")
        }else{
            //console.log("data= "+ dataObj.data);
            //console.log(JSON.parse(dataObj.data));
            var dataObjDatatoJson = JSON.parse(dataObj.data)
            return dataObjDataJson;
        }}
    }
    //localStorage存值永久有效
    function setItems(){
        var user = {};
        user.name = 'Adam Li';
        user.age = 25;
        user.home = 'China';
        localStorage.setItem('userinfo',JSON.stringify(user));
    }
    //localStorage取值
    function getItems(){
        var data = JSON.parse(localStorage.getItem('userinfo'));
        console.log("name:"+data.name+'\r age:'+data.age+"\r home:"+data.home);
    }
    //localStorage删除指定键对应的值
    function deleteItem(){
        localStorage.removeItem('userinfo');
        console.log(localStorage.getItem('userinfo'));
    }
</script>

以上便是对本地存储的代码解析，下面简介关于setTimeOut函数

setTimeout，简单来说就是延迟调用发生所要执行的函数

（1）ES5中，setTimeout里面的函数的执行上下文为全局上下文，举例来说：

 

function log() {
    setTimeout(function () {
        console.log(this.id)
    },100)
}
var id = 42;
log.call({ id: 21});
//输出的结果为42；

可以看出setTimeout，被延迟执行的函数，这里的this，指向的是全局作用域，也就是这个函数的上下文为全局上下文

（2）在ES6的箭头函数中，setTimeout里面，如果执行了一个箭头函数，那么这个函数的执行上下文为定义这个箭头函数在的函数

 

function log() {
    setTimeout(()=>{
        console.log(this.id)
    },100)
}
var id = 42;
log.call({id: 21})
//输出的结果为21

总结setTimeout函数：因为在ES6中，箭头函数中的this，规定的指向定义这个箭头函数所在的那个函数。于是这里箭头函数里面this，就固定bind了{id：21}；