原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/

好吧,最近打算换工作,所以关注比较多的是面试题,这套还不错,留下~~

1、JS相关问题:

  • 解释下事件代理(基础题)

  • 解释下 JavaScript 中 this 是如何工作的(始终指向调用当前函数的对象)

  • 解释下原型继承的原理。

  • AMD vs. CommonJS?

  • 什么是哈希表?

  • 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):function foo(){ }();.((function(){ })())

  • 描述以下变量的区别:nullundefined 或 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()

  $('a').bind('click', function() { alert("That tickles!") });

  这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

   .live()

  $('a').live('click', function() { alert("That tickles!") });

  JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。

  live方法还可以被绑定到具体的元素(或context)而不是document上,像这样:

  $('a', $('#container')[0]).live(...);

  .delegate()

  $('#container').delegate('a', 'click', function() { alert("That tickles!") });

  JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。

 为什么.delegate()要比.live()好用

  基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:

  $('a').live('click', function() { blah() }); 
  // 或者 
  $(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)")`

前端面试题(JS篇)的更多相关文章

  1. 前端面试题 -- JS篇

    前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数 ...

  2. 前端面试题(js)

    js 基础面试题 css 面试题 js 面试题 JavaScript 有几种类型的值?,你能画一下他们的内存图吗 原始数据类型(Undefined,Null,Boolean,Number.String ...

  3. 微信前端面试题----js实现LazyMan

    这是微信小程序的一道面试题,题目是这样的: 实现一个LazyMan,可以按照以下方式调用:LazyMan("Hank")输出:Hi! This is Hank! LazyMan(& ...

  4. 前端面试题 | JS部分(附带答案)

    目前在找工作,所以各方收集了一堆面试题.其实刷面试题的过程也能更新自己对知识的认识,所以也提醒自己多看多理解.如果对下面题目有更深理解,会实时更新.遇到新题目,也会不定时更新.希望能帮助到部分朋友- ...

  5. 前端面试题 ---- html篇

    想要换工作了,转载自https://www.cnblogs.com/zhangshuda/p/8464772.html,感谢原博主. 一.html 1.html和xhtml区别 1. html:超文本 ...

  6. 某一线互联网公司前端面试题js部分总结

    js部分 1,使用严格模式的优点 - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度 ...

  7. 前端面试题-----js和jquery的区别是什么?

    最近我有一个朋友问我js和jquery的区别是什么,于是我打算写一篇文章说下到底有什么区别. 首先你要知道: 1.js是网页的脚本语言,记住哈,js是语言! 2.jquery是用js语言写出来的一个框 ...

  8. 常见前端面试题JS部分

    1.闭包 2.JS操作和获取cookie //创建cookie function setCookie(name, value, expires, path, domain, secure) { var ...

  9. 前端面试题 ----css篇

    转载自https://www.cnblogs.com/zhangshuda/p/8465043.html,感谢原博主 1.css盒模型有哪些及区别content-box border-box padd ...

  10. 前端面试题(js部分)

    一.==和===的区别 1.==   用于比较.判断两者相等,比较时可自动换数据类型 2.===  用于(严格)比较.判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一致时 ...

随机推荐

  1. 高斯判别分析 Gaussian Discriminant Analysis

    如果在我们的分类问题中,输入特征xx是连续型随机变量,高斯判别模型(Gaussian Discriminant Analysis,GDA)就可以派上用场了. 以二分类问题为例进行说明,模型建立如下: ...

  2. org.opencv.android.JavaCameraView 摄像机方向的问题

    ——> org.opencv.android.JavaCameraView 摄像机方向的问题 ref: http://www.tuicool.com/articles/q6vUvqB 注意:一般 ...

  3. 练习用php做表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. wust 1061 链表的合并

    怒刷存在感! ~从此wustoj踏上ty博客这样高端霸气上档次的地方啊啦啦~ 只是顺便看了下保研复试题,原来觉得链表好讨厌,现在数据结构学的没办法了,写了个大概是标准的链表合并的写法吧... #inc ...

  5. LINUX内核分析第四周学习总结——扒开应用系统的三层皮(上)【转】

    转自:http://www.cnblogs.com/lalacindy/p/5276874.html 张忻(原创作品转载请注明出处) <Linux内核分析>MOOC课程http://moo ...

  6. 聚集索引、非聚集索引、聚集索引组织表、堆组织表、Mysql/PostgreSQL对比、联合主键/自增长、InnoDB/MyISAM(引擎方面另开一篇)

    参考了多篇文章,分别记录,如下. 下面是第一篇的总结 http://www.jb51.net/article/76007.htm: 在MySQL中,InnoDB引擎表是(聚集)索引组织表(cluste ...

  7. github概念和实战

    fork: 通过fork操作,你将拥有了别人创建的repo的ownership,但是url却变成了/youraccount/repo,这时你将可以做git push操作 clone: 该命令是直接将r ...

  8. HDU 1074 Doing Homework

    第一次做这道题大概是半个月前了吧,状压DP一个很新鲜的名词 当时看题解怎么也看不懂,现在看懂了以后还是很简单的 所谓状态压缩就是用一个整数的二进制来表示一个状态,比如有三个作业 000表示一科作业也没 ...

  9. HDU 2544 最短路【Bellman_Ford 】

    题意:给出n个节点,m条边,问从起点到终点的最短距离 用bellman_ford,注意是无向图 初学bellman_ford= =一点点理解 因为dijkstra是每次用集合里面的点去更新它们所连接的 ...

  10. UVa 1395 Slim Span【最小生成树】

    题意:给出n个节点的图,求最大边减最小边尽量小的值的生成树 首先将边排序,然后枚举边的区间,判定在该区间内是否n个点连通,如果已经连通了,则构成一颗生成树, 则此时的苗条度是这个区间内最小的(和kru ...