前端面试题(JS篇)
原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/
好吧,最近打算换工作,所以关注比较多的是面试题,这套还不错,留下~~
1、JS相关问题:
-
解释下事件代理(基础题)
-
解释下 JavaScript 中
this
是如何工作的(始终指向调用当前函数的对象) -
解释下原型继承的原理。
-
AMD vs. CommonJS?
-
什么是哈希表?
-
解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):
function foo(){ }();
.((function(){ })()) -
描述以下变量的区别:
null
,undefined
或undeclared
?(undefined是变量声明了但没有定义,没有声明会直接报错,undeclared是一种错误) -
什么是闭包,如何使用它,为什么要使用它?
-
请举出一个匿名函数的典型用例?
-
解释 “JavaScript 模块模式” 以及你在何时使用它。
-
你是如何组织自己的代码?是使用模块模式,还是使用经典继承的方法?
-
请指出 JavaScript 宿主对象和原生对象的区别?(http://blog.csdn.net/foamflower/article/details/9165691)
-
指出下列代码的区别:
function Person(){
some cod
}var person = Person();
var person = new Person();
第一个是函数调用,对象是全局变量;第二个是新创建了个person对象
-
.call
和.apply
的区别是什么?(参数不同) -
请解释
Function.prototype.bind
的作用?(保持this一致性)
render: function () {
this.getAsyncData(function () {
this.specialFunction();
this.anotherSpecialFunction();
}.bind(this));}
-
你何时优化自己的代码?
-
在什么时候你会使用
document.write()
? -
请指出浏览器特性检测,特性推断和浏览器 UA 字符串嗅探的区别?
-
请尽可能详尽的解释 AJAX 的工作原理。
-
请解释 JSONP 的工作原理,以及它为什么不是真正的 AJAX。(Ajax不能跨域)
-
你使用过 JavaScript 模板系统吗?
-
请解释变量声明提升。
-
请描述下事件冒泡机制。
-
"attribute" 和 "property" 的区别是什么?(http://www.liyao.name/2013/09/differences-between-property-and-attribute-in-javascript.html)
-
为什么扩展 JavaScript 内置对象不是好的做法?(容易影响到他人使用,枚举对象属性时会出现扩展项)
-
为什么扩展 JavaScript 内置对象是好的做法?
-
请指出 document load 和 document ready 两个事件的区别。(load是全部加载完,ready只是dom加载完了)
-
==
和===
有什么不同? -
你如何从浏览器的 URL 中获取查询字符串参数。
function getQueryStringArgs(){
var qs = (location.search.length>0 ? location.search.substring(1) : ""),
args = {},
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
i = 0,
len = items.length;
for (i=0; i<len; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if(name.length){
args[name] = value;
}
}
return args;
}
-
请解释一下 JavaScript 的同源策略。
-
请描述一下 JavaScript 的继承模式。(原型、构造函数、组合继承、寄生)
-
如何实现下列代码: [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]`
Array.prototype.duplicator = function(){
return this.concat(this);
}
-
描述一种 JavaScript 中实现 memoization(避免重复运算)的策略。
换个问法就是,如何优化递归
http://demon.tw/programming/javascript-memoization.html
-
什么是三元表达式?“三元” 表示什么意思?
-
函数的参数元是什么?
-
什么是
"use strict";
? 使用它的好处和坏处分别是什么?
jQuery 相关问题:
-
解释"chaining"。 函数中的链式结构,如$().().()
-
解释"deferreds"。 延迟执行,减少回调函数的嵌套 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
-
你知道哪些针对 jQuery 的优化方法。(1) 用ID选择器 (2) 缓存jquery对象,方便后面使用。(3)使用data缓存数据.
-
请解释
.end()
的用途。.$('ul.first').find('.foo').css('background-color', 'red')
.end()
.find('.bar').css('background-color', 'green');
<div id="test">
<h1>jQuery end()方法</h1>
<p>讲解jQuery中end()方法。</p>
</div>
JS代码:
$(document).ready(function() {
$("#test").click(function() {
$(this).find("p").hide().end().hide();
});
});
点击id为test的div时,首先找到div里边的p标签,将其隐藏。接下来使用end()方法结束了对p标签的引用,此时返回的是#test(jQuery对象),从而后边的hide()方法隐藏了div。这样相信大家已经理解了jQuery中end()方法。
-
你如何给一个事件处理函数命名空间,为什么要这样做?
$("#test").bind('click.a',function(){
alert(1);
});
$("#test").bind('click.b',function(){
alert(2);
});
$("#test").bind('click.c',function(){
alert(3);
});
$("#test").unbind('click.a'); //解绑a
$("#test").trigger('click.c'); //弹出3
$("#test").click(); //弹出2、弹出3
-
请说出你可以传递给 jQuery 方法的四种不同值。选择器(字符串),HTML(字符串),回调函数,HTML元素,对象,数组,元素数组,jQuery对象等
-
什么是效果队列?http://www.w3school.com.cn/jquery/data_queue.asp
-
请指出
.get()
,[]
,eq()
的区别。
<p style="color:yellow">绯雨</p>
使用eq来获得第一个p标签的color值:
$("p").eq(0).css("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方法css
使用get来获得第一个p标签的color值:
$("p").get(0).style.color //因为get(num)返回的是个html对象,所以要使用传统的HTML对象方法,jq对象此时就没用了。
当然,你也可以get(num)后把对象转为jq的对象再进行操作:
$($("p").get(0)).css("color")
-
请指出
.bind()
,.live()
和.delegate()
的区别。
.bind()
这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。
.live()
JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。
live方法还可以被绑定到具体的元素(或context)而不是document上,像这样:
.delegate()
JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
为什么.delegate()要比.live()好用
基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:
// 或者
$(document).delegate('a', 'click', function() { blah() });
速度
后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断,但是$()函数并未知道被链接的方法将会是.live()。
而另一方面,delegate方法仅需要查找并存储$(document)元素。
一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live,这样它就会立即执行。在这种方式下,其会在DOM获得填充之前运行,因此就不会查找元素或是创建jQuery对象了。
灵活性和链能力
live函数也挺令人费解的。想想看,它被链到$(‘a’)对象集上,但其实际上是在$(document)对象上发生作用。由于这个原因,它能够试图以一种吓死人的方式来把方法链到自身上。实际上,我想说的是,以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法,live方法会更具意义一些。
仅支持CSS选择器
最后一点,live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作,这使得它变得非常的不灵活。
欲了解更多关于CSS选择器的缺点,请参阅Exploring jQuery .live() and .die()一文。
-
请指出
$
和$.fn
的区别,或者说出$.fn
的用途。($指jq对象,$.fn指jquery的原型,可以用来定义jQuery的新属性) -
请优化下列选择器:http://down.chinaz.com/try/201203/1695_1.htm
$(".foo div#bar:eq(0)")`