异步加载promise

基本数据类型：string，number，boolean，undefined，null，symbol，bigInt（1.解决整数计算的精度问题，2.当我们输入一个比较长的数字的时候，JS 总是将其转换为科学计数，就是那个加了 e 的模样，即使调用 toString() 方法，也无法获得它表示的真实数字。但我用 BigInt 字面量尝试了一下，发现它并不存在这个问题了，而是能够正确地显示输入的数字）

引用数据类型：数组，对象，函数

什么时候会用到promise？

Promise通常用于处理异步操作，比如网络请求、文件读取、定时器等。使用Promise可以使异步操作变得更加容易管理和可读性更高。当你需要执行一个需要时间的操作并且想要在该操作完成后执行某些操作时，可以使用Promise。同时，使用Promise也可以防止回调地狱的出现，使代码更加简洁易懂。

增加一个resolve()，一旦执行了resolve()，就相当于发出了一个通知说“这个异步操作完成啦”，这个通知写在哪里是由你来定的，不过当然是要在异步操作执行结束后进行通知。那么，虽然通知发出去了，别的代码（console.log('我想在前面的执行完之后执行')）怎么知道上一个异步操作执行结束了呢？这就需要接收到那个通知，then()就是负责接收通知的，一旦resolve()了，就会进入then()里面，把别的代码写到then()里面就可以啦！（关于then的参数以及与catch的异同不展开了）

resolve()本质作用

• resolve()是用来表示promise的状态为fullfilled，相当于只是定义了一个有状态的Promise，但是并没有调用它；
• promise调用then的前提是promise的状态为fullfilled；
• 只有promise调用then的时候，then里面的函数才会被推入微任务中

讲讲async await

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}
 

 async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。async函数是generator函数的语法糖。
链接：https://juejin.cn/post/6844904102053281806

hash和history：

生产环境存在问题

       因为  history  模式的时候路径会随着  http 请求发送给服务器，项目打包部署时，需要后端配置 nginx，当应用通过  vue-router  跳转到某个页面后，因为此时是前端路由控制页面跳转，虽然url改变，但是页面只是内容改变，并没有重新请求，所以这套流程没有任何问题。但是，如果在当前的页面刷新一下，此时会重新发起请求，如果  nginx  没有匹配到当前url，就会出现404的页面。

• vue-router   默认为 hash 模式，使用 URL 的  hash  来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载；#  就是  hash符号，中文名为哈希符或者锚点，在  hash  符号后的值称为  hash  值。
• 路由的  hash  模式是利用了  window 可以监听 onhashchange 事件来实现的，也就是说  hash  值是用来指导浏览器动作的，对服务器没有影响，HTTP 请求中也不会包括  hash  值，同时每一次改变  hash  值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash 模式 是根据  hash 值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。

详情：https://juejin.cn/post/7116336664540086286

defer和async

相对于默认的script引用，这里配合defer和async就有两种新的用法，它们之间什么区别那？

1.默认引用 script:<script type="text/javascript" src="x.min.js"></script>

当浏览器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。

2.async模式 <script type="text/javascript" src="x.min.js" async="async"></script>

当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕。

3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>

当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。

推荐的应用场景

defer
如果你的脚本代码依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖。
　　例如：

评论框
代码语法高亮
polyfill.js
async
如果你的脚本并不关心页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。

例如：
1.百度统计

如果不太能确定的话，用defer总是会比async稳定。

总结：defer与async的区别是：前者要等到整个页面正常渲染结束，才会执行；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

详情：https://blog.csdn.net/qq_27674439/article/details/101316754

 setTimeout中this的指向：

setTimeout中的this指向的是window,函数中的this指向的是运行时的上下文，因此是window；而箭头函数会帮你把this绑定到声明时的上下文，因此还是Object

如何改变setTimeout中的this指向：

1.利用中间变量来存储this

let obj = {
    name :  "jay",
    print :　function () {
           let that = this;
        setTimeout(function() {
            console.log(that.name)
    },0);
    }
};

2.利用箭头函数来改变this的指向：

let obj = {
    name :  "jay",
    print :　function () {
        setTimeout(() => {
            console.log(this.name)
    },0);
    }
}; 

3.利用bind方法：

方法三
var name = "window";
 function say(){
  console.log(this.name);
}
let obj = {
  name : "jay",
  print : function(){
    setTimeout(say.bind(this),0)
  }
}
obj.print(); //jay

setTimeout参数传递问题：

1.setTimeout(fun,time,param1,param2,...)

function say(name) {
   console.log(name)
 }
setTimeout(say,0,'jay')

2.字符串形式传参：js内部调用了eval()，eval()的执行环境是全局作用域window。

function say(a,b) {
   console.log(a+b)
 } 
//let name = "jay"
setTimeout( "say(3,4)",3000) //三秒后输出7

实例对象的隐式原型（__proto__)指向构造函数的显示原型(prototype），万物皆对象，原型链的尽头是Object。

MVVM：核心功能：数据双向绑定。