各大互联网前端面试题及自己理解的答案

最新推荐文章于 2019-07-09 18:00:00 发布

family0610

最新推荐文章于 2019-07-09 18:00:00 发布

阅读量496

点赞数

本文链接：https://blog.csdn.net/family0610/article/details/55270905

版权

目前自己正在学习阶段，如果补充的答案有不同意见，希望指出，本人会认真学习加以更正。
百度篇

1.写出javascript运行结果

for(var i=0; i<10; i++){} alert(i);

10 这个没什么好解释的

2. cookie、sessionStorage、localStorage的区别
它们的区别在于存储的有效期和作用域的不同。
cookie默认的有效期很短暂，只能持续Web浏览器的会话期间，一旦用户关闭浏览器，Cookie保持的数据就会丢失。cookie的作用域通过文档源和文档路径确定，默认情况下，cookie和创建它的Web页面有关，并对该Web页面以及和该Web页面同目录或者子目录的其他Web页面可见。cookie存储空间比较小。
localStorage存储的数据是永久性的，如果不手动删除会一直保存在客户端中。作用域限制在文档源级别（文档源通过协议，主机名和端口号三者确定），同源的文档间共享同样的localStorage数据，它们可以互相读取对方的数据，甚至可以覆盖对方的数据。
sessionStorage存储的数据存在会话期，一旦窗口或者浏览器标签页关闭，通过sessionStorage存储的数据也会被删除。作用域也是限定在文档源中，不同于localStorage的是sessionStorage的作用域还限定在窗口中，即使是同源的文档流在不同的标签页中，它们也是无法共享数据的。
sessionStorage、localStorage存储空间比cookie大很多。

3. JSONP原理
JSONP只能处理GET请求跨域问题，不能处理POST请求跨域问题（这问题先放这，还没搞懂）

4. 简述css盒模型
CSS盒子模型是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型包含：内容（content），填充(padding)，边框(border)，外边距(margin)属性，这些属性可以看成我们日常中见到的盒子来理解，盒子包含上下左右四条边，即盒子有边框，盒子里的东西称之为内容，该内容与盒子四个边之间存在填充，多个盒子之间存在外边距。

5. 说说get和post请求的区别
get请求：一般用于获取信息；使用url传递参数，所有内容是可见的；对所发送的信息数量有限制，一般在20000个字符。
post请求：一般用于修改服务器上的资源；对所发送的信息数量没有限制，例如发送表单数据，新建，修改，删除等操作。

6. 运行结果

var a = {n: 1}  
var b = a;  
a.x = a = {n: 2}  
console.log(a.x);  //undefined
console.log(b.x) //Object

因为.运算符优先级高于=赋值运算符，且赋值是从右到左的，即如果存在连续赋值语句A=B=C,则连等赋值运算结果是，B=C,A=B,但是**虽然连续赋值语句的值等于拆开的赋值语句，但是js中还是不能拆开写！**js内部为了保证赋值语句的正确，会在一条赋值语句执行前，先把所有要赋值的引用地址取出一个副本，再依次赋值，所以a.x=a={n:2}执行的逻辑是：
1）在执行前先将a和a.x中a的引用地址都取出来
2）在内存中创建一个新的对象{n:2}
3）执行a={n:2}，将a的引用指向{n:2}
4）执行a.x=a，此时a已经指向了新对象，而a.x因为在执行前保留了原引用，所以a.x的a依然指向原先的{n:1}对象，所以给原对象新增一个属性x，内容为{n:2}也就是现在a
5）语句执行结束，原对象由{n:1}变成{n:1,x:{n:2}}，而原对象因为无人再引用他，所以被GC回收，当前a指向新对象{n:2}
6）所以就有了文章开头的运行结果，再执行a.x，自然就是undefined了

7. 说说类的创建、继承和闭包。
类的创建使用function创建，例如：

function Student(name,id){
this.name=name;//类属性
this.id=id;
this.say=function(){
alert("hello");
};//类方法
}//构造函数
var p=new Student("张三"，123)；//创建Student类的一个对象

上述中每个对象都有name和id属性值，是不可继承的，每个对象都有唯一的属性。js的继承机制使用prototype原型：

Student.prototype={  
     print:function(x){return this.x},
     toString:function(){return this.name+this.id}
    };

通过上述方法Student类中所有的对象都继承print方法和toString方法。
闭包：闭包就是能够读取其他函数内部变量的函数。参见这里的解释，很详细

8. 是否有设计过通用的组件？

9.一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？越详细越好(考察知识广度)
1）输入网址后
2）浏览器查找域名的IP地址
3）浏览器给Web服务器发送一个HTTP请求
4）网站服务永久重定向响应
5）浏览器跟踪重定向地址，发送另一个获取请求，服务器处理请求并返回一个HTML响应
6）浏览器开始显示HTML
7）浏览器发送请求以获取嵌入在HTML中的对象，在浏览器显示HTML时，会注意到获取其他地址内容的标签，这是浏览器会发送一个获取请求获得这些文件，这些文件包含CSS/JS/图片等资源，这些资源的地址都有经历一个和HTML读取类似的过程，所以浏览器会在DNS中查找这些域名，发送请求，重定向等。。详情见
浏览器渲染：
1)获取HTML，构建DOM树
2）根据css文件，构建render树,render树种不包含元素的几何信息和定位
3)构建布局render树，布局render树包含几何信息和定位信息
4）绘制render树

10.什么是 “use strict”? 使用它的好处和坏处是什么？
use strict是JavaScript在严格模式下运行，消除JavaScript语法的一些不合理，不严谨之处，消除代码的不安全处，提高编译器效率增加运行速度。
坏处是：同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被压缩后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。严格模式的用法

阿里巴巴篇
1.创建一个1-100的数组，按顺序递增

var a=[];
for(var i=1;i<=100;i++)
{
  a.push(i);
}

2.说说前端跨域的解决方式
可以使用代理服务器，JSONP方式和CORS机制解决跨域问题具体见

**3 .**JavaScript实现继承的常用方法有哪些？你推荐的是哪一种？
有5中继承方式：
1）使用对象冒充实现继承
原理：让父类的构造函数成为子类的方法，然后调用该子类的方法，通过this关键字给所有属性和方法赋值
2）使用call方法改变函数上下文，该继承方式不能实现原型链
原理：改变函数内部的函数上下文this，使它指向传入函数的具体对象
3)使用apply方法
call和apply方法能实现多继承
4)使用原型链方法
原理：使子类原型对象指向父类的实例，弊端是不能实现多继承
5)混合模式实现继承
结合call和apply方法和原型链方法实现继承
我推荐使用原型链的方式实现继承