Web开发编程网
分享Web开发相关技术

北京某雨医生前端面试汇总

一面

面试小哥很和善,连自我介绍都不让我说。直接上手就拿纸开始写题让我回答。
第一题(比较简单 就是考变量提升和异步)
var a = 10;
function A(){
    console.log(a);		//第一次输出undefined 
    //答案:函数内部变量a声明提升 值为undefined,找变量先找函数当前作用域的变量
    var a = 20;
    console.log(a);		//第二次输出:20   因为上面变量赋值为20
    for(var a=1;a<5;a++){
    	setTimeout(function(){
    		console.log(a);	//第四次输出4个5   
    		//答案:因为定时器是异步的  异步代码会扔到任务队列上。
    		先让主线程代码执行。
    		等任务队列通知可以执行才会扔到主线程执行定时器。
    		所以当定时器在执行的时候 for里面的a已经为5了
    	},0)
    }
}
A();
console.log(a);		//第三次输出  10



=========================我觉得可以提高一下难度=====================

//各位同学猜猜答案 最好输出一下顺序 顺序一定要对

console.log(a);                         //输出什么?
var a = "10";
console.log(a);                         //输出什么
function A(a){
    console.log(a);	                //输出什么?
    var a = "20";
    console.log(a);	                //输出什么?
    argument[0]  = "40";
    console.log(a);                     //输出什么?
    for(var a=1;a<5;a++){
    	setTimeout(function(){
	    console.log(new Date+a);    //输出什么?
    	},1000)
    }
    console.log(new Date+a);            //输出什么?
}
a("30");
console.log(a);	                        //输出什么?


第二题(this指向 太简单 如果看了有意思的前端面试题同学 这个题就很easy)
var obj = {
    showFunction:function(){
    }
}
obj.showFunction()  //this指向谁  obj
var newObj = obj.showFunction;
newObj()           //this指向谁    window


//随后粹不及防的问了我一下在js严格模式下 newObj()指向谁
忘了当时怎么说的了,因为我没有测试过。
回来查了一下,严格模式下this不会自动转换成window,默认为undefined。

第三题 this几种指向
this一般指向的都是对象。所以一般函数和变量的直接调用着如果是对象那么this指向就是谁。
  • 1:在全局直接调用或者通过window this调用都是指向window
var a = 10;
window.a;  == 10;
this.a     == 10;
a          == 10;
  • 2:对象调用中this指向当前调用的对象
var obj = {
    showFunction:function(){
        this == obj
    }
}
  • 3:this指向绑定事件的dom元素
document.querySelector("#id").onclick =function(){
    this == document.querySelector("#id")
}
  • 4:构造函数中的this指向实例化的对象
function Person(){
    this.name = "宋伟老师" 
    //这里面的this会在new调用函数的指向隐式创建的对象 
    并隐式返回出来
}
var man = new Person();

  • 5:call和apply和bind中去指向函数体内的this指向
var obj = {
    names : "宋伟老师"
}
var names ="万达老师";
function fun(){
    console.log(this.names);
}

fun.call(obj);      //"宋伟老师"
fun.apply(obj);     //"宋伟老师"
fun.bind(obj)();    //"宋伟老师"

补充一个小知识

调用函数有哪些方法
function fun(){}

//直接函数调用
1: fun();        
//new操作符调用,唯一不同 这样调用函数会把函数体内this指向变成隐式生成的空对象的不是window的了 
2: new fun();  

//可以自己试一试玩玩
var names = "宋伟老师"
function fun(){  console.log(this.names) };
new fun();   //输出什么?

//call方法 其实是fun() 在隐式调用的过程fun.call(window)。
要不然函数直接调用的时候,里面this怎么会变成window的
3:fun.call(window);
//bind不用说 和apply不同就是传参数是数组传参
4:fun.apply(window);
//bind调用函数是返回一个函数体 需要再一次调用执行
5:fun.bind(window)();   

第四题 什么是原型链
1:js高级程序设计中说的是 当一个引用类型继承另一个引用类型的属性和方法时候就会产生一个原型连。

2:我说 原型链就是实例化和构造函数的原型的一种关联。主要用来保证变量的访问顺序。
第五题 什么是闭包(我面试就等这道题 闭包这个概念我准备这么多条 一一跟这个面试官聊一聊 其实理解的话 这7句解释就用一句解释就可以)
1:有权访问另一个函数作用域中的变量函数。(js高级程序设计)
2: 函数体内的变量存在函数作用域内就是闭包. (JS权威指南)
3:函数闭包。闭包则是函数的代码在运行过程中的一个动态环境,是一个运行期的、动态的概念。(AO)”`(js语言精髓与编程实践)`
4:闭包就是能够读取其他函数内部变量的函数。
由于在javascript中,只有函数内部的子函数才能读取局部变量,
所以闭包可以理解成“定义在一个函数内部的函数“。(百度百科)
5:内部函数+外部函数的变量 会形成一个闭包。
6:有权访问另一个作用域的函数就是闭包。
7:闭包就是函数+执行环境的总称。
第六题 什么是作用域
一句概括。就是函数和变量的可访问范围。
作用域分为全局作用域  函数作用域和eval作用域。
第7题 css盒模型解释一下。。。。
盒模型 : margin、padding、border、content

标准盒模型 
(盒模型的高宽度不算padding和border 对应css属性 box-sizing:content-box)
怪异盒模型
(高宽度算上padding和border 对应css属性 box-sizing:border-box)

vue问题(可以去看一下我总结vue面试题 我就不一一解释了 后期有时间我再续上)

  • 1:虚拟DOM底层实现思路
  • 2:数据双向绑定的思路
  • 3:vue的生命周期

二面(后期有时间再续)

总结

看到这些题的同学 如果你都会的话 又在北京的小伙伴可以去这家公司试一试。给你们来点自信 。面试这东西就是面试管看你顺眼就问你天上有几颗月亮。看你不顺眼 就是问你天上有几颗星星。所以放平心态,多经历几次面试。好了 第一次写这么多字的文章,时间有些久了。需要出去做个大保健放松一下了。咋们后续。

作者:不爱写代码的程序员
链接:https://juejin.im/post/5aa24846f265da237e0950be
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

未经允许不得转载:WEB开发编程网 » 北京某雨医生前端面试汇总
微信扫码关注微信公众号

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。