有意思的前端函数面试题

1:考引用类型在比较运算符时候 隐式转换会调用本类型那个方法 toString和valueOf？(去年过年吵的很火国外的题)

if(a == 1 && a == 2 && a == 3){
    console.log("我走进来了");
}

<!--答案1:-->
var a = {num:0};
a.valueOf = function(){
    return ++a.num
}

<!--答案2：-->
var num = 1;
function a(){
    return num++;
}
if(a() == 1 && a() == 2 && a() == 3){
    console.log("我走进来了");
}

<!--答案3:-->

var num = 0;
Function.prototype.toString = function(){
	return ++num;
}
function a(){}

<!--答案4:-->
var  a = {[Symbol.toPrimitive]: ((i) => () => ++i) (0)};

2:考this指向的理解？(最后一个输出问题是借鉴网易面试题的)

var names = "宋伟老师";
var obj = {
    names:"张健老师",
    showName:function(){
        console.log(this.names);
    },
    returnName:function(){
        return this.names;
    },
    returnFunctionName:function(){
        return function(){
            console.log(this.names);
        }
    }
    
}
obj.showName();                                     //输出什么？   "张健老师"
obj.returnName();                                   //输出什么？   "张健老师"
obj.returnFunctionName()();                         //输出什么？   "宋伟老师"
obj.showName.call(names);                           //输出什么？   undefined
obj.returnName.call(names);                         //输出什么？   undefined
obj.returnFunctionName().call(names)                //输出什么？   undefined
var newObj = obj.returnFunctionName().bind(window);
newObj.call(obj)                                    //输出什么？   "宋伟老师"
//为什么最后一个输出"宋伟老师"？因为bind指向this对象后  再一次调用的话  this指向不会被改变

//谢谢某同学慧眼发现了问题  name少了个s 统一都是names

3:再来一次this指向问题？(能不看答案的同学说出结果 算我输)

var big = "万达老师";

var obj = {
    big:"宋伟老师",
    showBig:function(){
        return this.big;
    }
}
obj.showBig.call(big);          //ƒ big() { [native code] }  //精通String的操作方法的同学就把为什么回复出来吧

4:说出下面this长度是多少?(再来一把this指向 估计能把这都搞明白的同学 this指向应该没有能难住的了)

function a(a,b,c){
    console.log(this.length);                 //4
    console.log(this.callee.length);          //1
}

function fn(d){
    arguments[0](10,20,30,40,50);
}

fn(a,10,20,30);


//第一个输出结果:因为this当前指向的是arguments 。 arguments是一个伪数组具备length属性。arguments又是保存函数的实参。
fn调用的时候传入4个实参。所以arguments长度为4。这个时候arguments[0] 等同于 arguments.a调用这个函数。所以this指向的是arguments这个伪数组也是(对象)(听到这还有疑惑小伙伴留言问我)

//第二个输出结果：callee是arguments的一个属性,主要返回当前arguments直属的函数体。所以this.callees是返回fn 。每一个函数有一个length属性主要用来返回函数的形参的所以就是1。

5:经典的变量提升问题？

===================  题一 ===========================
if(!"abc"  in window){
	var abc = 10;
}
console.log(abc);   	        //undefined  
//因为先变量声明提升 所以提升之后abc的值系统默认会赋值为undefined。 !abc为false ,in是检查对象中是否存在某个属性。很显然 false属于是一个布尔类型。不存在对象中。所以没有走if里面的变量赋值。

//对于wens同学提出的问题。我重新说明一下abc虽然声明提升了。
但是  if里面判断的是字符串abc。所以!"abc" 是false。
你可以尝试if(!"abc"){var abc=10} console.log(abc);
再试试if(!abc){var abc=10} console.log(abc);看看结果是否一样

===================  题二 ===========================    
console.log(a);                 //undefined
if(!("a" in window)){
    var a = 10;
}
console.log(a);                 //undefined
//因为先变量声明提升 所以提升之后a的值系统默认会赋值为undefined。 变量提升会存在GO中也就是window。所以("a" in window)肯定为true。!去反一下就为false。所以不走赋值。
===================  题三 ===========================
var x = 1;
if (function f(){}) {
x += typeof f;  
}
console.log(x);                 //1undefined   
//因为函数题在()中会以表达式去运行。最后转换为true,不会存在函数整体声明提升。所以typeof为undefined

6:面试几率百分80%的题！

function fun(n,o) {
     console.log(o)
         return {
          fun:function(m){
            return fun(m,n);
          }
     };
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);		    //输出什么 undefined 0 0 0 
var b = fun(0).fun(1).fun(2).fun(3);				    //输出什么 undefined 0 1 2
var c = fun(0).fun(1); c.fun(2); c.fun(3);			    //输出什么 undefined 0 1 1

//答案很显而易见。换一个形式看着道题

function fun(n,o) {
     console.log(o)
         return {
          fun:function(m){
            return fun(m,n);
          }
     };
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);		    //输出什么 undefined 0 0 0 

//fun(0)调用时候等同于
function fun(n,o) {
    var n=0;
    var o;
     console.log(o)  //undefined
         return {
          fun:function(m){
            return fun(m,n);  ---> n 就获取到fun里面的n为0的值。然后调用一次fun就会出现下面函数显示。
          }
     };
}
//a.fun(1)调用时候等同于fun(1,0)
function fun(n,o) {
    var n=1;
    var o=0;
     console.log(o)  //1
         return {
          fun:function(m){
            return fun(m,n);  ---> n 就获取到fun里面的n为0的值。
          }
     };
}

//以此类推  不知道小伙伴们看懂没 因为感觉语言解释不如分化代码理解好明白