前端面试必问问题及答案

2021年9月7日 7点热度 0条评论 来源: cwxcc
  • 写出javascript运行结果

    for(var i=0; i<10; i++){} alert(i); 1 10 这个没什么好解释的

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

  • JSONP原理
    JSONP只能处理GET请求跨域问题,不能处理POST请求跨域问题

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

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

  • 运行结果

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

    因为.运算符优先级高于=赋值运算符,且赋值是从右到左的,即如果存在连续赋值语句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了

  • 说说类的创建、继承和闭包。 类的创建使用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方法。
    闭包:闭包就是能够读取其他函数内部变量的函数。参见这里的解释,很详细

  • 一个页面从输入 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树

  • 什么是 “use strict”? 使用它的好处和坏处是什么?
    use strict是JavaScript在严格模式下运行,消除JavaScript语法的一些不合理,不严谨之处,消除代码的不安全处,提高编译器效率增加运行速度。

    坏处是:同样的代码,在”严格模式”中,可能会有不一样的运行结果;一些在”正常模式”下可以运行的语句,在”严格模式”下将不能运行。现在网站的JS都会进行压缩,一些文件用了严格模式,而另一些没有。这时这些本来是严格模式的文件,被压缩后,这个串就到了文件的中间,不仅没有指示严格模式,反而在压缩后浪费了字节。严格模式的用法

  • 创建一个1-100的数组,按顺序递增

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

  • 说说前端跨域的解决方式 可以使用代理服务器,JSONP方式和CORS机制解决跨域问题

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

    原文作者:cwxcc
    原文地址: https://blog.csdn.net/weixin_43522687/article/details/87721959
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。