有意思的前端函式面試題

不愛寫程式碼的程式設計師發表於2018-03-07
前端函式面試題

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的值。
          }
     };
}

//以此類推  不知道小夥伴們看懂沒 因為感覺語言解釋不如分化程式碼理解好明白
複製程式碼

相關文章