前端面試題整理

1.寫出下面程序的運行結果：

if([] instanceof Object){
    console.log("hello");
}else{
    console.log("world");
}
複製代碼

答案是：hello

2.寫出下面程序的運行結果：

var x = 1;
function ScopeTest(){
    alert(x);
    var x = "hello world";
    alert(x);
}
ScopeTest();
複製代碼

答案是：undefined

             Hello world

3.寫出下面程序的運行結果：

var t = true;
window.setTimeout(function(){
    t = false;
},1000);
while(t){

}
alert("end");
複製代碼

答案是：瀏覽器卡死，由於瀏覽器執行到setTimeout()定時器時，先不執行，先把它放到異步隊列中，接着執行while循環同步任務，這時是一個死循環，因此，瀏覽器卡死。

4.寫出下面程序的運行結果：

for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i);
    },1000);
}
複製代碼

答案是：

5

5

5

5

5.寫出下面程序的運行結果：

(1) console.log(isNaN(NaN));	
(2) console.log(isNaN(23));
(3) console.log(isNaN('ds'));
(4) console.log(isNaN('32131dsafdas'));
(5) console.log(NaN === NaN);
(6) console.log(NaN === undefined);
(7) console.log(undefined === undefined);
(8) console.log(typeof NaN);
複製代碼

答案是：

(1) true (2) false (3) true (4) true (5) false (6) false (7) true (8) number

6.寫出下面程序的運行結果：

console.log( ‘hello’ + (1<2) ? 'world' : 'me');
複製代碼

答案是：world

7.寫出下面程序的運行結果：

if(10 > 9 > 8 == true){
    console.log("html5");
}else{
    console.log("css3");
}
複製代碼

答案是：css3

8.寫出下面程序的運行結果：

var obj = {};
obj.name = "first";
var peo = obj;
peo.name = "second";
console.log(obj.name);
複製代碼

答案是：second

9.寫出下面程序的運行結果：

var length = 10;
function fn(){
    console.log(this.length);
}
var obj = {
    length : 5,
    method : function(fn){
        fn();
        arguments[0]();
    }
};
obj.method(fn , 1);
複製代碼

答案是：

10

2

10.寫出下面程序的運行結果：

var output = (function(x){
    delete x;
    return x;
})(0);
console.log(output);
複製代碼

答案是：0

11.日常在項目中，用到過css3的哪些新特性？

答案是：圓角，陰影，彈性盒子，transition，animation等。

12.列舉3種強制類型轉換和2種隱式類型轉換？

答案是：強制類型轉換：Number() , String() , Boolean()； 隱式類型轉換：布爾值參與的+運算，會先將布爾值轉成對應的數字，而後再進行+運算；數字和字符串使用+運算，會將數字轉成字符串，而後再進行字符串的鏈接。

13.call和apply的區別？

答案是：call(新this對象，參數列表)； apply(新this對象，參數數組)；

14.什麼是javascript的同源策略？

答案是：同源策略，限制一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。

15.你採起過哪些網站性能優化方法？

答案是：(1) 資源壓縮合並，減小http請求； (2)非核心代碼異步加載； (3)利用瀏覽器緩存； (4)使用CDN； (5)預解析DNS

16.列出幾種js繼承的實現方式？

答案是：

(1) 藉助構造函數實現繼承
function Parent(){
this.name = ‘lxf’;
}
function Child(){
Parent.call(this);
this.age = 18;
}
這種方式只能實現部分繼承，即父類的構造方法中的屬性，子類能夠繼承，其缺點是，父類原型上的屬性或方法，子類沒法繼承。
(2)藉助原型鏈實現繼承
function Parent(){
this.name = ‘lxf’;
this.play = [1,2,3];
}
function Child(){
this.age = 18;
}
Child.prototype = new Parent();
這種繼承方式的缺點是用子類Child實例化兩個對象後，var s1 = new Child(); var s2 = new Child(); s1.play.push(4); console.log(s2.play); 也會打印出[1,2,3,4]，其緣由是兩個對象的__proto__指向了同一個原型對象。
(3)組合方式
function Parent(){
this.name = ‘lxf’;
}
function Child(){
Parent.call(this);
this.age = 18;
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
此種方式是最完美的方式。
複製代碼

17.rem實現自適應佈局的原理是什麼？

答案是：rem是根據html的font-size大小來變化，正是基於這個出發，咱們能夠在每個設備下根據設備的寬度設置對應的html字號，從而實現自適應佈局。