前端必考面试题总结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=)