在任何一个语言中，如果要一段程序计算量比较大、执行时间比较长，我们可以将计算结果保存下来，待一下次执行相同的程序时，可以去保存的结果中直接获取，而无需再次计算，这种方式就叫做缓存。

在JavaScript中的实现如下

function longTime(key){
    console.log('after 2000 years....');
    return key + '的计算结果';
}
let cache = {};
function compute(param){
    let result;
    let key = param.toString();
    if(cache[key]){
                console.log('从缓存获取');
        result = cache[key];
                console.log(result);
    }else{
                console.log('没有从缓存获取');
        cache[key] = result = longTime(param);
                console.log(result);
    }
    return result;
}
// 执行
compute('key1');
compute('key2');
compute('key3');
compute('key3');

可以看到执行结果

VM45407:14 没有从缓存获取
VM45407:2 after 2000 years....
VM45407:16 key1的计算结果

VM45407:14 没有从缓存获取
VM45407:2 after 2000 years....
VM45407:16 key2的计算结果

VM45407:14 没有从缓存获取
VM45407:2 after 2000 years....
VM45407:16 key3的计算结果

VM45407:10 从缓存获取
VM45407:12 key3的计算结果
"key3的计算结果"

for in可以遍历所有可枚举属性以及原型上的属性

var createObj = function(){
    this.name = "大表哥";
}
var obj1 = new createObj();
createObj.prototype.age = 10;

for(var p in obj1){
    console.log('key:',p);
    console.log('value:',obj1[p]);
}

输出结果

key: name
value: 大表哥
key: age
value: 10

hasOwnProperty()不会从原型上寻找属性

var resName = obj1.hasOwnProperty("name");
console.log("name",resName);

var resAge = obj1.hasOwnProperty("age");
console.log("age",resAge);

输出结果

name true
age false

【视频资源已上架哔哩哔哩，关注up主波罗丁的菠萝】

hello大家好，本次分享一下关于JavaScript执行机制的知识点。那么废话不多说，直接上结论，首先我们知道JavaScript是一门单线程语言，决定JavaScript执行顺序的并不是代码顺序，而是event loop顺序。

我们先来讲解一下什么是同步任务，什么是异步任务。同步任务就是按照代码写的顺序一步一步执行下去，而异步代码呢，会先将要执行的代码放入异步队列里，然后执行同步代码，等同步代码全部执行完毕之后，再去异步队列里去查看是否有待执行的代码，如果有的话，就会执行。

用setTimeout演示一下

setTimeout(()=>{
    console.log('timeout');
},0);

console.log('11111');

我们先不看执行结果是什么，先把这段代码的event loop顺序安排一下

// 首先进入整体代码
// 接着遇到了setTimout，执行它，把它对应的方法放到异步队列里去，等0ms之后再来执行它
// 接着走,遇到了console.log('11111');执行它，输出1111
// ok同步的执行完了，我去异步队列瞅瞅还有啥

// 异步队列
// 发现了console.log('timeout');，ok执行它就完了
console.log('timeout');

注意一下setTimeout第二个参数，等0ms之后再执行它，0ms之后需要看同步任务是否已经执行完毕，如果同步任务还在执行，那么只好继续等下去直到同步任务执行完毕

比如

// 1000ms后执行
setTimeout(()=>{
    console.log('timeout');
},1000);

alert('同步阻塞');

拿着去浏览器里执行一下，会发现只要我不点按钮一直让同步任务阻塞住它就不输出timeout

接下来我们再说一下Promise

let p = new Promise((resolve,reject)=>{
  console.log('promise');
  resolve();
});
p.then(()=>{
  console.log('resolve');
});
console.log('同步');

我们先不看执行结果是什么，先把这段代码的event loop顺序安排一下

// 首先进入整体代码
// 接着遇到了new Promise，执行它，输出console.log('promise')
// 接着走,遇到了promise的then;执行它，把它对应的代码放到异步队列里
// 接着走,遇到了console.log('同步');执行它，输出同步
// ok同步的执行完了，我去异步队列瞅瞅还有啥

// 异步队列
// 发现了console.log('resolve');，ok执行它就完了，输出resolve
console.log('resolve');

那么Promise和setTimeout有什么不同呢，看着都一样啊，咱们也不磨叽直接上结论，在JavaScript除了同步任务和异步任务外，也可以按照宏任务和微任务来区分。宏任务包括整体代码，setTimeout，setInterval，而微任务包括Promise，process.nextTick。process.nextTick是node环境下的我们暂且不说它。宏任务产生的异步代码会放到下次event loop中，而微任务产生的代码会放到本次event loop的末尾处。我们来用一段代码来演示

// 异步-宏任务
setTimeout(()=>{console.log('timeout')},0);
// 同步
let p = new Promise((resolve,reject)=>{
  console.log('promise');
  resolve();
});
// 异步-微任务
p.then(()=>{
  console.log('resolve');
});
// 同步-宏任务
console.log('同步');

那么这个输出的结果是怎样的的呢，我们再来分析一下，这次已经是第三次手把手分析代码了，明白什么意思吗？

// 首先进入整体代码
// 接着遇到了setTimout，执行它，把它对应的方法放到异步队列【宏任务】里去，等0ms之后再来执行它
// 接着遇到了new Promise，执行它，输出console.log('promise')
// 接着走,遇到了promise的then;执行它，把它对应的代码放到异步队列【微任务】里
// 接着走,遇到了console.log('同步');执行它，输出同步
// ok同步的执行完了，我去异步队列瞅瞅还有啥

// 异步队列

// 【Promise微任务】本次event loop
console.log('resolve');

// 【setTimeout宏任务】下一次event loop
console.log('timeout')

hello大家好，今天我们来分享一下hash路由的原理。我们不管什么vue还是react的框架，不要太在意框架，直接来看hash路由是怎么实现的。

原理：onhashchange

hash路由是使用了onhashchange事件来实现的。我们先新建一个页面，hashchange.html，快速创建一个页面。然后启动一个静态服务，输入http-server，执行，然后访问，这个可以看到我们的页面了，目前是一片空白。

先说一下hash值是什么，hash值就是浏览器地址#后面的东西。

我们看一下如何获取hash值，在地址后面追加#/hash然后F12打开控制台然后输入

window.location.hash;

这时候输出的就是hash值了，#/hash

好，下一步写JavaScript监听一下onhashchange事件。

先写两个a标签

<div>
    <a href="#/">首页</a>
    <a href="#/detail">详情</a>
</div>

一个跳到首页，一个调到详情页面。

再写上监听事件，看一下到底是个什么情况啊

window.onhashchange = (e) => {
        // 分析一下e
        console.log('e:', e);

        // 重要属性oldURL和newURL
        console.log('oldURL', e.oldURL);
        console.log('newRUL', e.newURL);
    };

这里有两个比较重要的属性oldURL和newURL，oldURL就是上一个URL地址，newURL就是新的URL地址。

接下来我们来实现一个最简单的hash路由，先引用一下jQuery

<script data-original="<http://libs.baidu.com/jquery/2.0.0/jquery.min.js>"></script>

写上代码

<style>
    .router{
        display: none;
    }
</style>

<div class="router" id="index">首页</div>
    <div class="router" id="detail">详情页面</div>

    function showRouter() {
        // 第一步获取hash值
        let hash = window.location.hash;
        console.log('hash', window.location.hash);
        let hashValue = hash.replace('#/', '');
        // 隐藏所有router
        $(".router").hide();

        // 显示对应的router
        let target = $("#" + hashValue);
        if(target.length > 0){
            $("#" + hashValue).show();
        }else{
            $("#index").show();
        }       
    }

我们刷新一下看看，点击首页、详情可以看到正常的显示对应的页面了。这个时候注意看一下输出。

连续点击的时候并不会连续触发onhashchange事件，这是因为只有当hash变化之后才会触发这个事件。

我们再点击一下刷新页面看看，会发现首页和详情页面都不见了，这是因为.router默认隐藏，而且hash值也没有变化，自然不会显示对应的div了。

只需要添加

$(function () {
        showRouter();
    });

这样在页面打开的时候检查一下hash就可以了