Web前端面试题目整理(持续关注更新)

JavaScript

  • 介绍JavaScript的基本数据类型。-->[五种基本类型:Number,string,Boolean,Null,Undefinded;一种复杂类型:Object]

  • 说说写JavaScript的基本规范?-->
    1.不要在同一行声明多个变量。
    2.请使用 ===/!==来比较true/false或者数值
    3.使用对象字面量替代new Array这种形式
    4.不要使用全局函数。
    5.Switch语句必须带有default分支
    6.函数不应该有时候有返回值,有时候没有返回值。
    7.For循环必须使用大括号
    8.If语句必须使用大括号
    9.for-in循环中的变量 应该使用var关键字明确限定作用域,从而避免作用域污染。
  • JavaScript原型,原型链 ? 有什么特点?-->1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。2.每个继承父函数的子函数都包含一个内部属性_proto_。该属性包含一个指针,指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。3.原型链实现了继承。原型链存在两个问题:a 包含引用类型值的原型属性会被所有实例共享。b 在创建子类型时,无法向超类型的构造函数中传递参数。特点:JavaScript对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变。当我们需要一个属性的时,Javascript引擎会先看当前对象中是否有这个属性, 如果没有的话,就会查找他的Prototype对象是否有这个属性,如此递推下去,一直检索到 Object 内建对象。
  • JavaScript有几种类型的值?(堆:原始数据类型和 栈:引用数据类型),你能画一下他们的内存图吗?-->基本数据类型存储在栈中,引用数据类型(对象)存储在堆中,指针放在栈中。两种类型的区别是:存储位置不同;原始数据类型直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储;引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。
  • Javascript如何实现继承?-->构造继承,原型继承,(实例继承,拷贝继承)。构造函数继承可以将构造函数的属性拷贝给实例(*.call(this,[]))。但是缺点是无法实现函数复用。原型继承可以实现函数复用,但是所有实例共享一个属性,任意一个实例改变原型属性都会改变其它实例的属性值。推荐采用构造函数继承传递属性(拷贝),原型继承传递方法.
  • Javascript创建对象的几种方式?-->1.对象字面量的方式p={};2.用function来模拟无参的构造函数,再定义属性;3.用function模拟构造函数,利用this;4.利用工厂方式(内置对象Object);5.利用原型方式来创建;6.混合方式来创建。
  • Javascript作用链域?-->当代码在一个环境中执行时,会创建变量对象的一个作用域链。如果是个函数,则将其活动对象作为变量对象。活动对象在最开始只包含一个arguments对象。而下一个变量对象则来自下一个包含环境。如此一直延续到全局执行环境,这种组织形式即为作用域链。内部函数可访问外部变量,外部变量无法访问内部函数。注意:js没有块级作用域,若要形成块级作用域,可通过(function(){})();立即执行的形式实现。
  • 谈谈This对象的理解。-->
    • this总是指向函数的直接调用者(而非间接调用者);
    • 如果有new关键字,this指向new出来的那个对象;
    • 在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window
  • eval是做什么的?-->计算某个字符串,并执行其中的的 JavaScript 代码。eval(string)。应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。由JSON字符串转换为JSON对象的时候可以用eval,var obj =eval('('+ str +')');
  • 什么是window对象? 什么是document对象?-->Window对象代表浏览器中打开的一个窗口。document对象代表整个HTML文档。实际上,document对象是window对象的对象属性。
  • null,undefined的区别?-->null表示一个对象被定义了,但存放的是空指针。undefined 表示这个值不存在。typeof(null)-object;typeof(undefined)-undefined。
  • ["1", "2", "3"].map(parseInt) 答案是多少?-->
  • 关于事件,IE与火狐的事件机制有什么区别? 如何阻止冒泡?-->IE为事件冒泡,Firefox同时支持事件捕获和冒泡事件。但并非所有浏览器都支持事件捕获。jQuery中使用event.stopPropagation()方法可阻止冒泡;(旧ie的方法 ev.cancelBubble = true;)
  • 什么是闭包(closure),为什么要用它?-->闭包指的是一个函数可以访问另一个函数作用域中变量的函数。常见的构造方法,是在一个函数内部定义另外一个函数。内部函数可以引用外层的参数和变量;参数和变量不会被垃圾回收机制回收。注意,闭包的原理是作用域链,所以闭包访问的上级作用域中的变量是个对象,其值为其运算结束后的最后一个值。除非用立即执行函数来解决。
  • javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么?-->use strict是一种ECMAscript 5 添加的(严格)运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为。目前支持的浏览器为IE10+,Firefox 4+,Safari 5.1+和Chrome。默认支持的糟糕特性都会被禁用,比如不能用with,也不能在意外的情况下给全局变量赋值全局变量的显示声明,函数必须声明在顶层,不允许在非函数代码块内声明函数,arguments.callee也不允许使用;消除代码运行的一些不安全之处,保证代码运行的安全,限制函数中的arguments修改,严格模式下的eval函数的行为和非严格模式的也不相同;提高编译器效率,增加运行速度;为未来新版本的Javascript标准化做铺垫。
  • 如何判断一个对象是否属于某个类?-->使用instanceof 即if(a instanceof Person){alert('yes');}
  • new操作符具体干了什么呢?-->
    1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。p._proto_ = Base.prototype;
    2、属性和方法被加入到 this 引用的对象中。Base.call(p/this)
    3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
  • 用原生JavaScript的实现过什么功能吗?
  • Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?-->Object.hasOwnProperty(proName)
  • 对JSON的了解?-->Js的一个严格子集。一种轻量级的数据交换格式,类似于XML。数据格式简单, 易于读写, 占用带宽小。两个函数:JSON.parse(str)<检查代码 str--js对象>;JSON.stringify(obj);eval('('+json+')')<不会检查代码,会直接执行>
  • [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗?-->获取页面中所有的元素,然后遍历每个元素,为元素的style属性增加一个颜色边框。详细参见http://sentsin.com/web/881.html。注:在javascript中,有好几个类似于数组但是并不是数组的对象,除了NodeLists,还有函数的参数集合arguments。
  • js延迟加载的方式有哪些?-->defer和async属性、动态创建DOM方式(用得最多)、按需异步载入js。注:(setTimeOut(js,time))
  • Ajax 是什么? 如何创建一个Ajax?-->ajax的全称:Asynchronous Javascript And XML。所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验。
    (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象 (考虑IE6的兼容性,new XMLHttpRequest());
    (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息 (xhr.open("get"),"example.php",true);
    (3)设置响应HTTP请求状态变化的函数
    (4)发送HTTP请求
    (5)获取异步调用返回的数据
    (6)使用JavaScript和DOM实现局部刷新
  • 同步和异步的区别-->同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.同步:浏览器访问服务器请求,用户看得到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作。异步:浏览器访问服务器请求,用户正常操作,浏览器后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容。

  • 如何解决跨域问题?-->。

    Ajax注意点:

       HTTP请求过程:1.建立TCP连接。2.Web浏览器向Web服务器发送请求命令。3.Web浏览器发送请求头信息。4.Web服务器应答。5.Web服务器发送应答头信息。6.Web服务器向浏览器发送数据。7.Web服务器关闭TCP连接。

   HTTP请求内容:1.HTTP请求的方法或动作。2.正在请求的URL。3.请求头,包含一些客户端环境信息。4.请求体,客户提交的查询字符串信息和表单信息。

  GET 信息获取,使用URL传递参数,发送信息数量限制在2000字符内。获取的数据存放在cache中。

      POST 信息修改,对发送信息数量无限制。用send(data),注意头文件setRequestHeader。

        request.onreadystatechange = function(){
                   if(request.readyState ==4){
                            if(request.status == 200){
                                 document.getElementById("searchResult").innerHTML =                                  
                                               request.responseText;
                                               }else{ alert("发生错误:"+request.status);}
                                                                }
                                                                 }

  HTTP状态码(status):1XX:信息类,表示收到Web浏览器请求,正在进一步的处理中。

                         2XX:成功,表示用户请求被正确接收,理解和处理。

         3XX:重定向,表示请求没有成功,客户必须采取进一步的动作。

         4XX:客户端错误,表示客户端提交的请求有错误。

         5XX:服务器错误,表示服务器不能完成对请求的处理。

  readyState属性:0:请求未初始化;1:服务器连接已建立。2:请求已接收。3:请求处理中。4:请求完成。

  JSON采用键值对来编写。json的长度和xml格式化比起来很短小。json读写的速度更快。json可以用js内建的方法直接解析,转换成js对象。

  • 页面编码和被请求的资源编码如果不一致如何处理?-->若请求的资源编码,如外引js文件编码与页面编码不同。可根据外引资源编码方式定义为charset="utf-8"或"gbk"。

  • 模块化开发怎么做?-->立即执行函数,不暴露私有成员。参考http://blog.chinaunix.net/uid-26672038-id-4112229.html

  • AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?-->

  • requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?)-->谈一谈你对ECMAScript6的了解?ECMAScript6 怎么写class,为什么会出现class这种东西?异步加载的方式有哪些?-->异步加载的方式有哪些?-->1.defer(IE)。2.async(HTML5属性)。3.创建script,插入DOM中,加载完毕后callBack。

  • DOM操作——怎样添加、移除、移动、复制、创建和查找节点?-->;createDocumentFragment();createElement();createTextDode();appendChild();removeChild().
  • .call() 和 .apply() 的作用和区别?——>这两个方法是属于function.prototype的方法属性。两个函数的目的都是为了借用别人的方法来调用,就像调用自己的一样.二者唯一的区别是调用方法格式不一样。fun.call(this,a,b,c,d)(this为当前对象,是未包含当前fun函数的对象,如此调用之后,this所指对象即拥有了fun函数,a,b,c,d是固有的属性);而apply()函数则是fun.call(this,arguments)(this的含义是相同的,关键是第二个参数arguments,这个是函数的固有属性,用来存放参数)。由此可见apply()用于函数参数不确定的情况下使用。注意,this可替换成别的具体对象。
  • //穿插一个比较好的博客http://www.feeldesignstudio.com/2015/05/front-end-interview-questions 里面的问题阐述如下:
  • 数组和对象有哪些原生方法,列举一下?-->LIFO 对应的push()和pull();FIFO对应的shift()和pop()。重排序reverse()和sort()。toString()。改变原数组的方法:pop()、push()、reverse()、shift()、sort()、splice()、unshift();不改变原数组的方法:concat()、join()、slice()、toString()。
  • JS 怎么实现一个类。怎么实例化这个类

  • JavaScript中的作用域与变量声明提升?-->1.全局作用域;2函数作用域(立即执行时);3:eval作用域;切记无块级作用域。JS代码执行时,所有的变量和函数声明会先声明。1)VO(变量对象)初始化阶段按照如下顺序填充:函数参数(传入,若未传入,则初始化为参数值undefined);函数声明(若冲突,则覆盖);变量声明(初始化变量值均为undefined,若发生冲突,会忽略)。var e=function _e(),其中,e会被加入VO对象,而_e不会,所以无法用_e调用函数。即命名函数表达式的名字不可在外面被调用。2)VO赋值阶段,被执行的语句会执行赋指计算。注意,赋值的时候,变量赋值会覆盖已有变量的值。注意以下代码:alert(x);//function var x = 10; alert(x); //10 ;x=20; function x(){} alert(x);//20 if(true){var a=1}else{var b = true}; alert(a);//1  alert(b); //undefined.

  • 如何编写高性能的Javascript?-->阅读完高性能JS回答。

  • 那些操作会造成内存泄漏?-->闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
  • JQuery的源码看过吗?能不能简单概况一下它的实现原理?

  • jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?

  • jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?

  • jquery.extend 与 jquery.fn.extend的区别?-->jQuery.extend(): 把两个或者更多的对象合并到第一个当中。扩展静态方法;jQuery.fn.extend():把对象挂载到jQuery的prototype属性,来扩展一个新的jQuery实例方法。扩展实例方法;jQuery.extend()是直接用$调用,jQuery.fn.extend()是用$()调用,另外jQuery.extend()接收多个对象作为参数,如果只有一个参数,则把这个对象的属性方法附加到jQuery上,如果含有多个参数,则把后面的对象的属性和方法附加到第一个对象上。

  • jQuery 的队列是如何实现的?队列可以用在哪些地方?-->jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.

  • 谈一下Jquery中的bind(),live(),delegate(),on()的区别?-->bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
  • $("a").bind("click",function(){alert("ok");});

    live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的

    $("a").live("click",function(){alert("ok");});

    delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

    $("#container").delegate("a","click",function(){alert("ok");})

    on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

    差别:

    .bind()是直接绑定在元素上

    .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。

    .delegate()则是更精确的小范围使用事件代理,性能优于.live()

    .on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

  • jQuery 是通过哪个方法和 Sizzle 选择器结合的?(jQuery.fn.find()进入Sizzle)
  • 针对 jQuery性能的优化方法?-->1,总是从ID选择器开始继承;2,在class前使用tag(标签名)<使用一个tag name来限制(修饰)class ;就近的ID修饰>;3,将jQuery对象缓存起来,可以使用jQuery的链式操作加以改善。

转载于:https://www.cnblogs.com/lightsun/p/5582189.html

你可能感兴趣的:(Web前端面试题目整理(持续关注更新))