前端必考面試題總結6
- JavaScript的typeof傳回哪些資料類型？
字元串（String）—–>typeof傳回的值是string
數字（Number）——>typeof傳回的值是number（NaN，infinity等特殊的數字類型傳回值也是number）；
布爾（Boolean）——>typeof傳回的值是Boolean
數組（Array）——>typeof傳回的值是object
日期（Date）——>typeof傳回的值是object
對象（Object）——>typeof傳回的值是object
空（Null）——>typeof傳回的值是object
未定義（undefined）——>typeof傳回的值是undefined（不存在的變量、函數或者undefined等傳回的值都是undefined）；
function——>typeof傳回的值是function
symbol——>typeof傳回的值是symbol（ES6引入了一種新的原始資料類型symbol，表示獨一無二的值）。
- 列舉3種強制類型轉換和兩種隐式類型轉換
強制類型轉換：
Boolean(value):把值轉換成Boolean類型；
Number（value）：把值轉換成數字；
String（value）：把值轉換成字元串。
隐式類型轉換：
JavaScript在運算之前會進行隐式類型轉換,是以-，*，%等算術運算符都會把操作數轉換成數字的（“+”号就有點不一樣了，有些情況下，他是算術加号，有些情況下，是字元串連接配接符，具體要看它的操作數）；
JavaScript在做比較時也會進行隐式類型轉換，例如：字元串和數字比較時，字元串轉數字；數字與布爾值比較時，布爾轉數字；字元串和布爾值比較時，兩者轉數字。
- split（），join（）的差別
split（）擷取一個字元串，然後在分隔符處将其斷開，進而傳回一批字元串。
join（）擷取一批字元串，然後用分隔符字元串将他們連接配接起來，進而傳回一個字元串。
這兩個函數之間主要差別在于join（）可以使用任何分隔符字元串将多個字元串連接配接起來，而split隻能使用一個字元分割符将字元串斷開。
簡單的說，如果你用split（）是把一串字元（根據某個分隔符）分成若幹個元素存放在一個數組裡。而join（）是把數組中的字元串連成一個長串，可以大體上認為是split的逆操作。
- 事件綁定和普通事件有什麼差別？
普通添加事件的方法不支援添加多個事件，最下面的事件會覆寫上面的，而事件綁定（addEventListener）方式添加事件可以添加多個。
//普通添加事件的方法，執行下面的代碼隻會alert 2
var btn1=document.getElementById("hello");
btn1.onclick=function(){
alert();
}
btn1.onclick=function(){
alert();
}
//事件綁定方式添加事件，執行下面的代碼會先alert 1再alert 2
var btn2=document.getElementById("hi");
btn2.addEventListener("click",function(){
alert();
},false);
btn2.addEventListener("click",function(){
alert();
},false);
- IE和DOM事件流的差別
(1)IE采用冒泡型事件，DOM使用先捕獲後冒泡型事件，Netscape使用捕獲型事件。
<body>
<div>
<button>點選這裡</button>
</div>
</body>
冒泡型事件模型：button->div->body(IE事件流)
捕獲型事件：body->div->button(Netscape事件流)
DOM事件模型：body->div->button->button->div->body(先捕獲後冒泡)
（2）事件偵聽函數的差別
IE使用：
[object].attachEvent(“name_of_event_handler”,fnHandler);//綁定函數
[object].detachEvent(“name_of_event_handler”,fnHandler);//移除綁定
DOM使用：
[object].attachEventListener(“name_of_event”,fnHandler,bCapture);//綁定函數
[object].removeEventListener(“name_of_event”,fnHandler,bCapture);//移除綁定
bCapture參數用于設定綁定的階段，true為捕獲階段，false為冒泡階段。
function addEventHandler(object,eventType,fnHandler){
if(object.addEventListener){//DOM
object.addEventListener(eventType,fnHandler,false);
}else if(object.attachEvent){//IE
object.attachEvent("on"+eventType,fnHandler);
}else{//others
object["on"+eventType]=fnHandler;
}
};
function removeEventHandler(object,eventType,fnHandler){
if(object.removeEventListener){//DOM
object.removeEventListener(eventType,fnHandler,false);
}else if(object.detachEvent){//IE
object.detachEvent("on"+eventType,fnHandler);
}else{//others
object["on"+eventType]=null;
}
};
addEventListener(oDiv,"click",function(){
alert("clicked");
});
（3）事件對象定位（擷取）
IE：事件對象是window對象的一個屬性event，event隻能在事件發生時通路，事件處理函數執行完畢，事件對象被銷毀。
DOM：event對象必須作為唯一的參數傳遞給事件處理函數，且必須為第一個參數。
（4）擷取目标（target）
IE：var oTarget=oEvent.srcElement;
DOM:var oTarget=oEvent.target;
(5）阻止事件預設行為
IE：oEvent.returnValue=false;
DOM:oEvent.preventDefault();
//屏蔽網頁右鍵菜單
document.body.oncontextmenu=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.returnValue=false;
}else{
oEvent.preventDefault();
}
}
(6)停止事件複制（冒泡）
IE：oEvent.cancelBubble=true;
DOM:oEvent.stopPropagation();
(7)this問題：IE6-8中當方法執行的時候，方法中的this不是目前的元素box，而是window。
![前端面試題：基礎題目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)