中級web前端面試題1

1.改變this所指的方法：

也可說成改變函數內部運行時的上下文；

1）有對象就指向調用對象；
2）沒對象就指向全局對象；
3）用new構造就指向新對象；
4）通過apply、call或bind改變this所指。　　

（1）bind()只是“引用”，而不是“調用”

var aHello = {
    name : "hello",
    showName : function(){
        alert(this.name);
    }
}

document.onclick = aHello.showName.bind(aHello); //只有在點擊的時候才執行，換成call會立即執行　　

（2）一段代碼看懂call()

 var func=new function(){this.a="func"}
 var myfunc=function(x){
       var a="myfunc";
       alert(this.a);
       alert(x);
 }
 myfunc.call(func,"var");    //彈出func和var

call()和apply()的區別

都表示調用某個對象的方法，以另一個對象(即括號中的第一個參數所指)替換當前對象。

function Animal(name, age) {
      this.name = name;
      this.age = age;
      this.showName = function() {
            console.log(this.name+' age is '+age);
      };
 } 
 function Cat(name, age) {
      Animal.call(this, name, age);
 }
 Cat.prototype = new Animal(); 
 function Dog(name, age) {
     Animal.apply(this, [name, age]);
 }
 Dog.prototype = new Animal();
 var cat = new Cat("Black Cat",12); //call必須是object 
 var dog = new Dog(["Black Dog"], [13]); //apply必須是array 
 cat.showName();  //Black Cat age is 12
 dog.showName();  //Black Dog age is 13

apply的優勢是可以直接將當前函數的arguments對象作為apply的第二個參數傳進去。

function print(a,b,c,d){
	alert(a+b+c+d);
}
function example(a,b,c,d){
	print.call(this,a,b,c,d);
	print.apply(this,arguments); //或者寫成print.apply(this,[a,b,c,d]);	
}
example("背","光","腳","本");

2.閉包

解釋一：當在函數內部定義了其他函數，就創建了閉包。在后台執行環境中，閉包的作用域包含它自己的作用域、包含函數的作用域和全局作用域。

解釋二：一個函數的局部變量在函數調用完成后，居然還沒有死掉，它以某種形式頑強地活了下來，這種形式就是閉包。 

解釋三：閉包就是能夠讀取其他函數內部變量的函數。由於在js語言中，只有函數內部的子函數才能讀取局部變量（即嵌套的函數可以訪問到其外層作用域中聲明的變量），因此可以把閉包簡單的理解成“定義在函數內部的函數”。

解釋四：下面例子中myFunc是一個閉包。閉包是一種特殊的對象。有兩部分組成：函數、以及創建該函數的環境。環境由閉包創建時在作用域中的任何局部變量組成。

　　　　即myFunc是一個閉包。由child函數和閉包創建時存在"Mozilla"字符串組成。

用處一：可以訪問函數內部的變量。

用處二：讓變量的值始終保存在內存中。 　

實用性：https://developer.mozilla.org/cn/docs/Web/JavaScript/Closures　

例子：

function parent() {
  var name = "Mozilla";
  function child() {
    alert(name);
  }
  return child;
}

var myFunc = parent();
myFunc();　

3.setTimeout()和setInterval() 

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 5);
}
//也可將var變成let，可以達到下面效果
//5個5
for (var i = 0; i < 5; i++){
   (function(i){
       setTimeout(function (){
           console.log(i);
       },5)
   })(i)
}
//0 1 2 3 4

關於定時器要記住的最重要的事情是，指定的時間間隔表示何時將定時器的代碼添加到隊列，而不是何時實際執行代碼。

使用setInterval()時，僅當沒有定時器的任何代碼實例時，才將定時器添加到隊列中。存在問題：（1）某些間隔被跳過；（2）多個定時器的代碼執行之間的間隔可能比預期小；

解決方案，用setTimeout()，執行完后在創建一個。

例子：

前提：onclick事件里設定一個200’的重復定時器，onclick事件處理時間為300‘多一點，定時器代碼處理時間同樣為300’多一點；

（1）0’onclick事件開始執行；

（2）5‘時創建了第一個定時器；

（3）過了305‘才會處理第一個定時器，400’時添加第二個定時器代碼到隊列；

（4）605‘時，第一定時器在運行，第二個在隊列，此時的第三個定時器會被跳過；

（5）同時導致600‘多時第一個定時器剛執行完，就執行第二個。

4.逗號語句，當有多個條件，之間用逗號隔開的時候，會返回最右側的條件

for(i=0, j=0; i<10, j<6; i++, j++){
    k = i + j;
}//5+5,返回10

5.易誤解日期函數

var d = new Date(); //假如今天實際日期是2016/07/18，周一
d.getYear(); //116
d.getMonth(); //6
d.getDate();  //18
d.getFullYear(); //2016
d.getDay(); //1 
d.getTime();  //1470209474290

new Date(); //可以接受傳入參數
無參：返回當前時間
1個參數x：返回 1970 年 1 月 1 日 + x 毫秒時間。
new Date(1,1,1) ：返回1901 年 2月 1日，第一個參數小於等於99時，顯示1900 + (第一個參數)，大於99時直接顯示。
new Date(2017,1,1) ：表示2017年1月1日

6.form中的input可以設置為readonly和disable，2者區別?

（1）readonly只針對input和textarea有效，disabled對所有表單元素；

（2）post或者get方式提交時，readonly會將值傳出去，disabled不會。

7.js中的3種彈出式消息提醒（警告窗口，確認窗口，信息輸入窗口）的命令式什么？

alert("警告"); // 顯示“確定”，返回undefined
confirm("確定要清空數據嗎？"); //顯示“取消”和“確定”，返回false或者true
prompt('請輸入數字',''); //顯示輸入框和空白輸如框，有“取消”和“確定”按鈕，返回null或者輸入的內容

8.javaScript的2種變量范圍有什么不同？

全局變量：當前頁面有效

局部變量：方法內有效

9.列舉javaScript的3種主要數據類型，2種復合數據類型和2種特殊數據類型。　　

主要數據類型：string,number,boolean

復合數據類型：function,object

特殊數據類型：null,undefined

基本數據類型：string,number,boolean,null,undefined

10.innerHTML，innerText，outerHTML，innerText的區別？

<div id="box">我們都是<a href="www.china.cn">中國</a>人</div> var box = document.getElementById('box'); 
獲取： 
box.innerHTML //我們都是<a href="www.china.cn">中國</a>人 
box.outerHTML //<div id="box">我們都是<a href="www.china.cn">中國</a>人</div> 
box.innerText //我們都是中國人 
box.outerText //我們都是中國人

設置：
innerText  //設置標簽內文本
outerText  //設置包含標簽的文本

11.flex布局，可替代float、position，參見http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool　

12.程序中捕獲異常的方法

try{
..可能錯誤的語句..}
catch(error){
..錯誤發生后的處理..}
finally{
..完成后執行的語句塊..}  //finally不是必須的
　　

error對象的屬性：
name: 錯誤名
number: 錯誤號
description: 描述
message: 錯誤信息,多同description　

13.瀏覽器對象模型：

window對象，全局變量是window對象的屬性，全局函數是window對象的方法。

var w=window.innerWidth
|| document.documentElement.clientWidth 
|| document.body.clientWidth;  

var h=window.innerHeight
|| document.documentElement.clientHeight 
|| document.body.clientHeight;
//||后面是兼容ie5、6、7、8

window.open();打開當前窗口

window.close();關閉當前窗口

window.moveTo();移動當前窗口

window.resizeTo();調整當前窗口的尺寸

14.XMLHttpRequest對象用於在后台交換數據。

15.超鏈接的屬性target的可選值：

_self：默認，載入在相同的窗口或者框架（指iframe）

_blank：新窗口

_parent：父窗口或父框架

_top：清除所有被包含的框架，載入當前的整個瀏覽器窗口

frameName：指定某個框架載入

16.如何阻止冒泡和默認事件

一般在冒泡階段處理事件

function stopBubble(e){
    if(e&e.stopPropagation){ //非IE
        e.stopPropagation();
    }else{  //IE
        window.event.cancelBubble = true;
    }
}

function stopDefault(e){
    if(e&e.preventDefault){ //非IE
        e.preventDefault();
    }else{  //IE
        window.event.returnValue = false;
    }
    return false;
}

17.事件委托是什么

原理：利用冒泡的原理，把事件加到父級上，觸發執行效果。
好處：1.提升性能；2.新添加的元素還會之前的事件。
<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>

window.onload = function(){
  var oUl = document.getElementById("ul");/*
這里要用到事件源：event 對象，事件源，不管在哪個事件中，只要你操作的那個元素就是事件源。
ie：window.event.srcElement
標准下:event.target
nodeName:找到元素的標簽名
*/
  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
}

18.ajax請求get和post區別

1.get請求（send(null)）參數會在URL里顯示出來，而post不會(send(data));
2.get請求會緩存，而post不會;
3.當我們在get和post請求時,同時在url中、send方法的data中都放置了參數,為什么獲取的總是url中的參數值呢?
答:在使用Request時,其會從QueryString,Form,ServerVariable中遍歷一番,如果發現符合要求的數據,那么就會停止向后搜尋.所以,我們上例中獲取的username實際上都是url中的username值.
4.場景：
get請求的目的是給予服務器一些參數，只是獲取或查詢數據，以便從服務器獲得列表，例如:list.aspx?page=1,表示獲取第一頁的數據
post請求的目的是向服務器發送一些參數，可以向服務器放送修改請求，例如form中的內容.

19.ajax請求時，如何解釋json數據

1.JSON.parse()：將json字符串轉為json對象

語法JSON.parse(text,reviver);  //reviver可選，表示一個處理轉換結果的函數，將對每個成員調用此函數
var json = '{"name":"GDT","age":28,"University":"GDUT"}';
var info = JSON.parse(json,function(key,value){
    console.log(key + ":" + value);
});
輸出：
name:GDT
VM56:3 age:28
VM56:3 University:GDUT
VM56:3 :[object Object]　　

2.JSON.stringify()：轉換為json字符串

var info = {name:"GDT",age:60,University:"GDUT"};
var json = JSON.stringify(info); 
輸出json：
"{"name":"GDT","age":60,"University":"GDUT"}"

3.JSON.eval()：函數可計算某個字符串，並執行其中的JavaScript 代碼。

使用eval()函數也可以將JSON字符串解析為對象，這個功能能完成JSON.parse()的功能，但是有不一樣的地方
var json = '{"name":"GDT","age":,"University":"GDUT"}';
var info = eval('(' + json + ')');

原因：歸結於eval本身的問題，由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。

缺點：

eval()可以解析任何字符串，eval是不安全的，因為eval比較寬松，會有潛在的安全性問題。如下代碼

var str = '{"a": (function(){alert("I can do something bad!");})()}';
eval('('+str+')');  //用來執行木馬腳本
結果：
會彈出，同時返回Object {a: undefined}

推薦使用JSON.parse();

19.數組中slice()和splice()的區別(本博客)

20.substr和substring的用法和區別(本博客)