中级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的用法和区别(本博客)