2021 去哪儿网笔试总结（宏任务和微任务、跨域、new()）

去哪儿网笔试

这里菜鸟也是只记录了一部分不会的题或者当时感觉不确定的题，而且有的题在上一篇里面因为有类似的就归类到上一篇了，话不多说，开始卷！

为什么多个域名去加载页面资源会更有效

1. CDN缓存更方便
2. 突破浏览器并发限制
3. 节约cookie带宽
4. 节约主域名的连接数，优化页面响应速度
5. 防止不必要的安全问题

感谢：利用多个域名来存储网站资源

宏任务和微任务

1、回调是异步？
回调函数是异步操作最基本的方法，简单来说，回调就是自己写了却不调用，给别人调用的函数。

2、宏任务只能执行一个，微任务可以多个？
js代码执行顺序：一个宏任务 -> 多个微任务 -> 一个宏任务 -> 多个微任务，如此循环，就叫事件循环event loop；js 一次只能执行一个宏任务，一次可以执行多个微任务。

注意：

其实这里一次有歧义，如果是同一时间段，因为js是单线程语言，所以不可能同时执行多个任务，分片也只是并发而非并行，所以这里一次应该理解为一个事件循环！反正题目这样出的，菜鸟只是说说自己的见解！

3、宏任务、微任务有哪些？
见我的博客：2021 大厂笔试总结 01

跨域

题目是：会产生跨域问题的有？
选项是：storage、cookie、iframe、XmlHttpRequest

1. 什么是同源策略及其限制内容？

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR等攻击 。浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作DOM，那么会有⼀套基础的安全策略的制约，我们把这称为 同源策略。它的存在可以保护用户隐私信息，防止身份伪造等(读取Cookie)。

所谓同源是指 “协议+域名+端口” 三者相同，只要协议、域名、端口其中之一不同的url都属于不同域！

同源策略限制内容有：

1. Cookie、LocalStorage、IndexedDB 等存储性内容
2. DOM 节点
3. AJAX 请求不能发送

但是有三个标签是允许跨域加载资源：

<img src=XXX>
<link href=XXX>
<script src=XXX>

同源策略主要表现在 DOM、web 数据 和 网络 这三个层面

DOM

postMessage

postMessage是html5引入的API，postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递。多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。

具体见：
postMessage可太有用了
window.postMessage MDN

数据层面

同源策略限制了不同源的站点读取当前站点的Cookie、IndexDB、LocalStorage等数据。由于同源策略，我们依然⽆法通过第⼆个页面来访问第⼀个页⾯中的Cookie、IndexDB或者LocalStorage等内容。

想想，如果没有同源策略，那么我们就可以通过 js 代码， 来获取重要网站的 cookie， input 中 输入的账号密码， 比如：银行网站，那么就会产生严重的后果。

网络层面

同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。比如：我们经常遇到的跨域问题。

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

在实际过程中，我们有时候需要跨源 进行接口请求，比如：我们在本地开发请求接口的时候，经常会请求出现跨域，最常用的解决方法就是跨域资源共享（CORS），使用该机制可以进行跨域访问。

在 node 中的设置响应头 Access-Control-Allow-Origin 为指定同源策略的地（请求接口的站点）或者干脆来者不拒设置为 *，同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。

请求跨域了，那么请求到底发出去没有？

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不会?因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

说到这里，菜鸟知道题目选什么了！
答案就是：storage、cookie、iframe、XmlHttpRequest

2、跨域解决方案总结

1. CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案
2. JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
3. 不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。
4. 日常工作中，用得比较多的跨域方案是cors和nginx反向代理

菜鸟先写总结是因为感觉实际开发的时候一般使用的就是CORS，其它的虽然重要但是真的没必要，大不了必须使用其它的方式的时候再来看看！

3、解决跨域的办法

这里很多大佬都写了，菜鸟就不班门弄斧了！

文章链接：
跨源资源共享（CORS）MDN
九种跨域方式实现原理（完整版）

代码运行题

1、

(function(){alert(this)}).apply(null);

alert出来的结果：[object Window] --> window对象

2、

let tt = new(function(){return null});
tt == null;

结果：
false

3、

<div onclick="alert(this.title)" title="AA"></div>

alert结果：

4、

let tt = new(function(){this.xx = 1;return null;})
tt.xx;

结果：
1

new()里面放函数代表什么？

这个菜鸟没搜到，只能去知乎上问了！

有懂的读者也可以指点江山，激扬文字！

2021/10/27 补：

今天看大神的回答，发现new function() 和 new (function) 是等价的，但是如果传递参数第二种就会报错！

function A(b){ 
 this.a = 'A';
 this.b = b;
};
new A('b') // { n: 'A', b: 'b'};
new(A) //  { n: 'A', b: undefined };
new (A('c'))  //Uncaught TypeError: A(...) is not a constructor at <anonymous>:1:1

知道了这个之后，就要知道new做了什么，这里看我的博客：2021 亚鸿笔试题2

这样一看，4里面的tt含有xx就解释得通了，因为this的指向转移到了tt上，所以tt就被赋值了一个xx！

2可以理解为，构造函数return的是null，而非引用类型的值，所以其会返回实例对象，自然和null不相等！