前端面试题（JS篇）

2022-09-22 23:10:31

     原题地址：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()

 

　　$(‘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篇）,布布扣,bubuko.com

前端面试题（JS篇）

上一篇：Android组件学习之ExpandableListView


下一篇：通过HttpClient请求webService