2019-某上市公司前端面试经历

在公司上班这几天除了修改bug之外也在逛掘金刷面试题笔试题，恶补javascript原生的基础，想更深刻的理解底层原理。刚好遇到一次前同事推给我的机会，就去参加面试了。
（小声bb：面试的这个公司真的好大啊.......）

笔试题（45分钟）

1、简述css的盒子模型

css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

2、cookies，sessionStorage和localStorage区别

源自https://www.cnblogs.com/minigrasshopper/p/8064367.html

3、实现水平垂直居中

absolute + left:0 + right:0 +top:0 +bottom:0 + margin auto（需要具体宽高）
absolute + top:50% + left:50% + transform：translate（-50%,-50%）
flex + justify-content:center + align-items:center

(还有很多方法，大家自行解锁吧)

4、写一个函数对url的参数进行对象的封装

function getParameters(URL){
    let str = URL.substring(URL.indexOf('?')+1,URL.length)
    //split() 方法用于把一个字符串分割成字符串数组
    let strArr = str.split('&')
    let obj={}
    for(let i in strArr){
      let key = strArr[i].substring(0,strArr[i].indexOf('='))
      let value = strArr[i].substring(strArr[i].indexOf('=')+1,strArr[i].length)
      obj[key]=value
    }
    return obj;
  }

5、简述严格模式

"use strict“目的是指定代码在严格条件下执行。
严格模式下是不能使用未声明的变量。

6、解决跨域的方法

jsonp
CORS跨域处理Access-Control-Allow-Origin
PostMessage(data: 要传递的数据，origin: 字符串参数用于指明目标窗口的源)
允许来自不同源的脚本采用异步的方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

对跨域不太理解的朋友直接→ 正确面对跨域，别慌—Neal_yang

7、描述http事务的流程

域名DNS解析
发起TCP三次握手
建立TCP连接以后发起http请求
服务器端响应请求，浏览器得到html代码
浏览器解析html代码并请求html中的资源
浏览器对页面进行渲染呈现给用户

8、请写出以下输出

(function(log){
  "use strict"
  var a=10,i=5,f,
  a+=' ' //a='10 '
  for(var i=0;i<a;i++){
      log(b) //undefined
      var b=i*i //i=10,b=81
   }
   if(a===10){ //a='10 '
     f=b+a //f='8110 ' 
     log(f) 
   }else{
     f=f‖a‖b //如果f是undefined或者是null则默认为a，如果a为undefined则默认为b
     log(f)//f='10 '
   }
})(window.console.log)

9、请回答以下问题

   var name='test1';
   var obj={
       name:'test2',
       prop:{
        name：'test3',
        getName：function(){
            return this.name
          }
       }
   }
 var getName=obj.prop.getName;

① obj.prop.getName()
答案：test3，在方法内使用this，this指向使用其的对象即是prop
② getName()
答案：test1，将getName方法赋给了全局变量getName，this指向全局
③ obj.prop.getName.call(obj)
答案：test2 ，通过call方法将this指向了obj

对this不理解朋友直接前往这里 JavaScript 之 this 指南—JintNiu
这篇文章对this的讲解比较清楚，我也是面试前刷到了这篇文章，还是很感激这个作者的！

最后编辑于：2019.03.20 14:05:51