拼多多面试总结

new操作符

创建一个关联其他对象的新对象
首先，创建一个新的对象。
然后，这个对象会被[[prototype]]连接。
然后，这个新对象会被绑定到函数调用的this。
最后，如果函数本身没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
首先，创建一个空对象，并且this变量引用该对象，同时还继承了该对象的原型。
然后，属性和方法被加入到this引用的对象中。
最后，新创建的对象由this引用，并且最后隐式的返回this。

关于这部分问题，可以查阅《你不知道的js》。

继承

构造继承

function Animal() {
	this.species = "动物";
}
function Cat(name, color) {
	Animal.apply(this, arguments);
	this.name = name;
	this.color = color;
}

原型继承

1 2	Cat.prototype = new Animal(); Cat.prototype.constructor = Cat;

实例继承

function extend(Child, Parent) {
	var F = function() {}
	F.prototype = Parent.prototype;
	Child.prototype = new F();
	Child.prototype.constructor = Child;
	Child.uber = Parent.prototype; // 直接指向父对象的prototype属性
}
extend(Cat, Animal)

拷贝继承

function extend2(Child, Parent) {
	var p = Parent.prototype;
	var c = Child.prototype;
	for(var i in p) {
		c[i] = p[i];
	}
	c.uber = p;
}
extend2(Cat, Animal)

闭包

闭包就是能够读取其他函数内部变量的函数。由于在JS语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。闭包可以读取函数内部的变量，让这些变量始终保持在内存中，也可以封装对象的私有属性和私有方法。
闭包的特性:
1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收

cookie 存储在用户本地终端上的数据，cookie数据不能超过4k，可设置失效事件，在所有同源窗口中共享。cookie每次都会携带在http头中，如果使用cookie保存过多数据会带来性能问题。
sessionStorage 针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除；一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信；即使是同一个页面，也不在不同浏览器中共享。
localStorage 没有时间限制的数据存储，除非被清除；一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信；在所有同源窗口中共享。

一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？

详细版：
1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话，客户端发送报头(请求报头);
5、进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
6、进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

简洁版：
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

跨域

只要协议，域名，端口有任何一个不同，都被当作是不同的域。

1.跨域资源共享CORS(cross origin resource share) 允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS请求需要浏览器和服务器同时支持。浏览器发现AJAX请求跨源，会自动添加一些附加的头信息等。因此，实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信。CORS背后的基本思想就是使用自定义的http头部让浏览器与服务器进行沟通，从而决定请求是响应成功还是失败。服务器对于CORS的支持，主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许AJAX进行跨域的访问。
2.通过jsonp跨域以异步加载js文件的形式来调用jsonp的回调函数
jsonp由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的json数据
优点：兼容性好，不需要XMLHttpRequest或者ActiveX的支持，在请求完成后可以通过callback的方式回传结果
缺点：只支持get请求

对比：
1.jsonp只能实现get请求，而CORS支持所有类型的http请求
2.使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和接收数据，比起jsonp有更好的错误处理

css圆环

外半径为40，内半径为20的圆环。

{
  width: 40px;
  height: 40px;
  border: 20px solid red;
  border-radius: 40px;
  background: white;
}

数组去重

function uniqueArr(arr) {
	let res = []
 	for(i=0; i<arr.length; i++) {
 		let tmp = arr[i]
 		if(res.indexOf(arr[i]) < 0) {
 			res.push(arr[i])
 		}
	}
}

new操作符

继承

闭包

web storage 和 cookie

一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？

跨域

css圆环

数组去重