前端程序员面试分类真题17

前端程序员面试分类真题17一、单项选择题1.

下面对Window对象的pageYOffset属性的描述中，正确的是______A.滚动条到视口顶端的距离B.滚动条到视口底部的距离C.滚动条到视口左边（江南博哥）的距离D.滚动条到视口右边的距离正确答案：A[考点]控制元素[解析]Window对象提供了两个属性pageXOffset和pageYOffset，它们分别表示滚动条到视口左边和上边的距离，因此，只有选项A描述正确。

2.

下列选项可以获得Select元素(选择框)中选中项的索引的是______A.selectedIndexB.selectedC.indexD.options正确答案：A[考点]控制元素[解析]选项B的selected和选项C的index都是Option元素中的属性，前者表示选项是否选中，后者表示选项在options集合中的索引。选项D中的options属性表示选择框中的所有选项(即Option元素)。

3.

当按下键盘中的〈B〉键时，事件对象event的keyCode属性返回的值为______A.63B.64C.65D.66正确答案：D[考点]事件处理和Ajax[解析]keyCode属性能够获取键盘中按下的键码，〈B〉键的键码为66，与选项D中的数字一致。

4.

多个选择框联动需要由______事件实现A.clickB.blurC.changeD.keydown正确答案：C[考点]事件处理和Ajax[解析]选择框之间通过改变选中项来实现联动，除了选项C中的change事件，其他都不能实现这样的联动。选项A中的click事件会在点击时触发；选项B中的blur事件会在聚焦时触发；选项D中的keydown事件会在按下键盘上的任意键时触发。

5.

下列4个选项都是XHR对象中的readyState属性的值，其中表示Ajax通信处于接收状态的是______A.0B.1C.2D.3正确答案：D[考点]事件处理和Ajax[解析]XHR对象的readyState属性是一种数值属性，它表示通信的状态：选项A中的0表示未打开(即尚未调用open()方法)；选项B中的1表示请求未发送；选项C中的2表示请求已发送并已收到响应首部；除了1、2、3以外，还有个4表示通信完成，已接收全部响应内容。

二、填空题1.

执行下面的代码，在控制台依次输出的值为______、______和______。

vara=1;

//全局变量

functionfunc(){

console.log(a);

a=2;

console.log(this.a);

vara;

console.log(a);

}

func();正确答案：undefined、1、2[考点]函数[解析]在全局作用域中声明了一次a变量，而在func()函数中，又声明了一次a变量，虽然声明语句在后面，但它还是会被提升至函数的顶部，像下面这样。

vara=1;

functionfunc(){

vara;

console.log(a);

a=2;

console.log(this.a);

console.log(a);

}

第一次输出的是局部变量a，而局部变量此时还未赋值，它的值是undefined。第二次输出的是this对象中的a属性，此时this指向的是全局对象，它包含一个a属性，其值为1。第三次输出的还是局部变量a，不过此时已被赋值，其值为2。

2.

执行下面的代码，在控制台会输出______和______。

vara=1;

//全局变量

(function(){

console.log(++a);

vara=2;

console.log(++a);

})();正确答案：NaN、3[考点]函数[解析]在全局作用域中有一个a变量，在即时函数中也有一个a变量，本题只用到了即时函数中的局部变量a。在即时函数中，a变量会发生声明提升，相当于下面这样。

vara=1;

(function(){

vara;

console.log(++a);

a=2;

console.log(++a);

})();

第一次输出的是还未赋值的a变量，它的值是undefined，对undefined执行前置递增，返回的值是NaN。第二次输出的还是局部变量，但此时已被赋值，当对其执行前置递增时，返回已计算的值，也就是3。

3.

执行下面的代码，在控制台会输出______。

vara=1;

functionouter(){

console.log(a);

}

(function(func){

vara=2;

func();

})(outer);正确答案：1[考点]函数[解析]当把outer()作为一个参数传递给即时函数，并在内部调用时，就构建了一个闭包。虽然在即时函数中也定义了a变量，但由于闭包的关系，outer()调用的其实是它声明时所处的作用域中的a变量，而该变量的值是1。

4.

下面分别用对象obj和obj.child调用getName()方法，得到的结果是______和______。

varname="freedom";

//全局变量

varobj={

name:"justice",

getName:function(){

return;

},

child:{

name:"strick",

getName:function(){

return;

}

}

};

obj.getName();

obj.child.getName();正确答案：“justice”“strick”[考点]函数[解析]执行obj.getName()后返回字符串“justice”，这是最普通的隐式绑定。接下来先调用对象obj中的子对象child，再调用子对象中的getName()方法，最终引用的是子对象中的name变量，返回字符串“strick”。这说明方法中的this只会指向离它最近的对象，也就是调用该方法的对象。

5.

在下面代码中，将obj对象的getName()方法作为一个值，赋给childName变量，然后再执行它，得到的结果是______。

varname="freedom";

//全局变量

varobj={

name:"justice",

getName:function(){

return;

}

};

varchildName=obj.getName;

childName();正确答案：“freedom”[考点]函数[解析]得到的结果是全局变量name的值，而不是obj对象中的值，隐式绑定丢失了，变成了默认绑定。这是因为childName变量引用的是getName()方法本身，因此执行childName()其实就是一个普通的函数调用。

6.

在下面的代码中，将obj对象的getName()方法作为一个实参，传给parentName()函数，然后再执行它，得到的结果是______。

varname="freedom";

//全局变量

varobj={

name:"justice",

getName:function(){

return;

}

};

functionparentName(fn){

returnfn();

}

parentName(obj.getName);正确答案：“freedom”[考点]函数[解析]得到的结果是全局变量name的值，而不是obj对象的name属性值，隐式绑定丢失了，变成了默认绑定。在parentName()函数中引用的是getName()方法本身，因此执行fn()其实就是一个普通的函数调用。

7.

执行下面的代码，最后在控制台输出的值为______。

(function(){

varage=1;

varobj={

age:10,

double:function(){

age*=2;

}

};

obj.double();

console.log(age+obj.age);

})();正确答案：12[考点]函数[解析]obj对象中的double()方法能让age变量的值乘以2，但该方法中的age并不是obj对象的age属性，而是即时函数中声明的age变量，所以此时age变量的值变为2，obj对象的age属性值仍然是10，两者相加得到的和为12。如果要让double()方法使用obj对象的age属性，那么可以像下面这样修改。

varobj={

age:10,

double:function(){

this.age*=2;

}

};

8.

下面代码执行后，在控制台会输出b变量，得到的结果是______。

(function(){

vara=b=5;

})();

console.log(b);正确答案：5[考点]函数[解析]按照声明提升的规则，将上面的即时函数稍微改造一下，如以下代码所示。a变量是局部变量，而b变量进行了隐式的全局声明。所以赋值后的全局变量b能在即时函数之外被引用。

(function(){

vara;

a=5;

b=5;

})();

console.log(b);

9.

执行下面的代码，最后输出的结果为______。

(function(x){

return(function(y){

console.log(x+y);

})(20);

})(10);正确答案：30[考点]函数[解析]此处执行了两次即时函数，第一次传入了10，第二次传入了20。在第二个即时函数中，由于闭包的关系，可以读取到外层的x变量，因此最终输出的结果为30。

10.

执行下面的代码，结果的输出顺序是______、______、______。

console.log(1);

setTimeout(function(){

console.log(2);

},0);

console.log(3);正确答案：1、3、2[考点]BOM和DOM[解析]定时器创建的是异步任务，过了指定的延迟时间后，异步任务被放到任务队列中。即使延迟时间是0毫秒，也要先到任务队列中等待，等到主线程空闲的时候，才会从任务队列中读取任务。因此定时器会在另外两条语句执行完后再被调用。

11.

执行下面的代码，在控制台输出的值为______。

vara=1;

setTimeout(function(){

console.log(a);

a=2;

},1000);

a=3;正确答案：3[考点]BOM和DOM[解析]定时器中的回调函数会被延迟1秒再执行，因此会先执行赋值语句，a变量的值变为3。然后当执行该回调函数时，因为闭包的关系能够读取到函数外的a变量，并且输出语句在赋值语句之前，所以输出的值为3。

12.

执行下面的代码，＜div＞元素的clientWidth属性输出的值为______px，offsetWidth属性输出的值是______。

＜style＞

div{

width:20px;

height:10px;

padding:10px;

margin:10px;

border:1pxsolid#000;

}

＜/style＞

＜divid="container"＞＜/div＞

＜script＞

vardiv=document.getElementById("container");

console.log(div.clientWidth);

console.log(div.offsetWidth);

＜/script＞正确答案：40、42[考点]控制元素[解析]Element对象的属性clientWidth和offsetWidth都能读取元素的宽度，但两者的计算方式不同。clientWidth由内容宽度与左右内边距相加得到。offsetWidth除了内容宽度和左右内边距之外，还需要把左右边框计算进来。根据＜div＞元素的CSS规则可知，clientWidth属性的值为40px，offsetWidth属性的值为42px。

13.

在下面的代码中，使用jQuery类库的方法读取元素的尺寸，其中result1的值为______px，result2的值为______px，result3盼值为______px。

＜style＞

#container{

width:100px;

height:100px;

padding:10px;

border:1pxsolid#000;

}

＜/style＞

＜divid="container"＞＜/div＞

＜script＞

var$container=$("#container");

varresult1=$container.width();

varresult2=$container.innerWidth();

varresult3=$container.outerWidth();

＜/script＞正确答案：100、120、122[考点]jQuery[解析]上面代码中的3个jQuery方法都能获取元素的宽度，但它们的计算方式不同，具体如下表所列，打勾表示包含，打叉表示不包含。尺寸获取方法方法内容内边距边框width()√××innerWidth()√√×outerWidth()√√√

根据上表的计算方式可得出result1的值为100，result2的值为120，result3的值为122。

三、简答题1.

将一个匿名函数像下面这样用圆括号包裹，有什么作用?

(function(){})()正确答案：这是即时函数(immediatefunction)，也就是那些刚定义好就能马上自动执行的函数。即时函数用途非常广泛，常用于创建块级作用域、解决循环中的异步回调问题和类库封装等。[考点]函数

2.

请解释JSONP的工作原理，并用代码描述其过程。正确答案：JSONP(JSONwithpadding)是一种借助＜script＞元素实现跨域的技术，它不会使用XHR对象。之所以能实现跨域，主要是因为＜script＞元素有以下两个特点：

(1)它的src属性能够访问任何URL资源，不会受同源策略的限制。

(2)如果访问的资源包含JavaScript代码，那么在下载完成后会自动执行。

JSONP就是基于这两点，再与服务器配合来实现跨域请求的，它的执行步骤可分为以下6步：

(1)定义一个回调函数。

(2)用DOM方法动态创建一个＜script＞元素。

(3)指定要请求的URL，并且将回调函数的名称作为一个参数传递过去。

(4)将＜script＞元素插入到当前文档中，请求开始。

(5)服务器接收传递过来的参数，然后将回调函数和数据以调用的形式输出。

(6)当＜script＞元素接收到响应中的脚本代码后，就会自动执行它们。

前面4步可参考下面的JavaScript代码。

functionhandle(){

console.log("回调函数");

}

varscript=document.createElement("script");

script.src="jsonp.php?jsonp=handle";

//传递回调函数的名称

document.body.appendChild(script);

第5步中服务器的响应，可参考下面的PHP代码。

＜?php

$func=$_GET["jsonp"];

$json=[

'code'=＞200,

'msg'=＞'操作成功',

'data'=＞[

'prev'=＞'2016-09',

'next'=＞'2016-11',

]

];

echo$func.'('.json_encode($json).')';[考点]事件处理和Ajax

3.

什么是Promise模式?正确答案：当用XHR对象发起多个异步请求时，无法保证响应能够按发起时的顺序返回。如果要保证响应顺序，那么只能用回调函数的方式来控制。当有大量回调函数时，就会形成一个回调金字塔，代码将变得难以维护，而且很容易出错，如下所示。

functionnest(fn){

varxhr=newXMLHttpRequest();

xhr.open("post","server.php");

xhr.onload=function(){

fn.call(this);

};

xhr.send(null);

}

nest(function(){

console.log("nest1");

nest(function(){

console.log("nest2");

nest(function(){

console.log("nest3");

});

});

});

Promise模式就是为解决这些异步问题而诞生的，它是一种代码组织模式，将异步操作用同步的方式表达，有效避免了层层嵌套的回调函数。ECMAScript2015(即ES6)已将其纳入到了标准中，并统一了用法，提供了Promise对象，上面的回调金字塔就可用下面的Promise模式替代。

varpromise=newPromise(function(fulfilled){

varxhr=newXMLHttpRequest();

xhr.open("post","server.php");

xhr.onload=function(){

fulfilled.call(this);

};

xhr.send(null);

});

promise.then(function(){

console.log("nest1");

}).then(function(){

console.log("nest2");

}).then(function(){

console.logc"nest3");

});

当使用Promise模式时，会将未来才会发生的事件(如异步回调)作为一个任务保存，上述代码中的then()方法就是在做这个操作。每个任务都包含一个状态，默认是pending(等待)；当任务成功时，变为fulfilled(已完成)；而当任务失败时，变为rejected(已拒绝)。状态一经改变，就不会恢复。不管当前任务是成功还是失败，都不会终止任务链，直到所有任务的状态都改变了，才会结束任务的执行。[考点]事件处理和Ajax

4.

jQuery有哪些特色?正确答案：jQuery是一套跨浏览器、多功能、可扩展、简单易学的JavaScript类库。它具有如下特色：

(1)强大的兼容处理，它修复了浏览器之间的差异。

(2)简洁的链式语法，结合函数式编程技巧就能用少量的代码完成一系列功能。

(3)花式元素操作法，可对文档中的元素进行查找、读写属性、控制样式、注册事件等操作。

(4)一套实用的工具，可快速实现Ajax、动画、浏览器嗅探、函数式编程等功能。

(5)良好的可扩展性，吸引了众多开发者为其设计插件，从而建立起了成熟的生态圈。[考点]jQuery

5.

在jQuery中有哪些方法可以删除元素?正确答案：有4个方法可以用来从文档中删除元素，分别是unwrap()、empty()、detach()和remove()。unwrap()可删除目标元素的父元素；empty()用于删除目标元素的所有子元素(包括子元素中的内容、注册的事件和关联的数据)；detach()和remove()都用于删除目标元素，前者不会删除目标元素上注册的事件和关联的数据，而后者会一并删除。[考点]jQuery

6.

如何用jQuery来创建插件?正确答案：当创建一个jQuery插件时，本质上是在扩展jQuery类库。开发jQuery插件很简单，只要在$.fn(jQuery对象的原型)上分配一个插件名，再指向一个新的函数，就能成功创建一个新的jQuery插件。但通常还会再做一个操作，就是用即时函数(IIFE)把jQuery映射成美元符号($)。这样既能避免$与其它JavaScript类库发生冲突，也能隔离插件中的变量，防止它们污染其他作用域，具体写法如下所示。

(function($){

$.fn.customPlugin=function(){

};

})(jQuery);

//调用插件

$("#container").customP