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的链式操作加以改善。
  • Jquery与jQuery UI有啥区别?
  • JQuery一个对象可以同时绑定多个事件,这是如何实现的?
  • 是否知道自定义事件。jQuery里的fire函数是什么意思,什么时候用?
时间: 2024-10-11 10:45:23

Web前端面试题目整理的相关文章

2016年Web前端面试题目汇总

今天收集了一些web前端工程师的经典面试题以及自己面试过程中无法解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的web前端基础知识(http://www.maiziedu.com/course/web/),如有错误或更好的答案,欢迎指正. HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框 (border),元素的外边距(margin)四个部分.这四个部分占有的空间

Web前端面试题目及答案汇总

前端新人在面试前都比较焦虑,担心回答不上面试官的问题,也担心自己紧张,其实这都是心理没底的表现,今天和大家分享web前端开发常见面试题及答案,希望可以帮助即将面试的前端同学顺利通过面试. HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分.这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或

Web前端面试题目汇总

http://www.cnblogs.com/bigboyLin/p/5272902.html HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分.这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域.4个部分一起构成了css中元素的盒模型. 2.行内元素有哪些?块级元素有哪些? 空(v

web前端面试经历分享

十天前,我还在纠结这个暑假到底是呆在实验室研究技术好还是找一份实习见识世面好,而现在我已经接到offer准备工作了.这几天真是累得够呛,一方面需要拼命准备期末考试,另一方面,需要往公司里面跑接受面试.欣慰的是,我不仅顺利通过了公司的面试,还认识了好几个厉害的师兄,自己的人生规划也稍有改变. 开始的纠结是有原因的,主要是考虑到了一下几个方面: 第一,作为一个大二的学生有必要这么着急跑出去找实习么? 第二,去找实习主要目的应该是赚钱还是学习技术? 第三,难得有那么两个月的时间,就这样去工作了会不会浪

百度Web前端面试经历

今天面了百度的前端实习职位.一面.时间大概是50分钟.面试官是位很帅气的小伙子,非常友好的一个人.进门的时候他让我等一会,我瞄了一眼他的电脑屏幕,发现他在coding…… 9点50开始的面试. 面试官:自我介绍一下. 我:blablabla. 面试官:javascript的类型转换(比如"2"*1, "a"*1). 我:javascript会调用valueOf来转换为一个基本数据类型,在这种情况下,如果javascript不能通过valueOf转成一个number,

【Android进阶】Android面试题目整理与讲解

这一篇文章专门整理一下研究过的Android面试题,内容会随着学习不断的增加,如果答案有错误,希望大家可以指正 1.简述Activity的生命周期 当Activity开始启动的时候,首先调用onCreate(),onStart(),onResume()方法,此时Activity对用户来说,是可见的状态 当Activity从可见状态变为被Dialog遮挡的状态的时候,会调用onPause()方法,此时的Activity对用户可见,但是不能相 应用户的点击事件 当Activity从可见状态变为被其他

web前端面试总结

本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个年轻的行业,所以关注各种前端技术,跟上快速变化的节奏,也是身为一个前端程序员必备的技能之一. 前端开发知识点: HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级. HTML5.CSS3.Flexbox JavaScript: 数据类

【Android进阶】Android面试题目整理与讲解(二)

今天真机调试的时候莫名其妙遇到了这样的一个问题: This product type must be built using a provisioning profile, however no provisioning profile matching both the identity "iPhone Developer" and the bundle identifier..... 具体如下图所示: 十分蛋疼, 发现不管是从网上下的demo, 还是自己的过程.凡事真机测试的时候都

【Java基础】Java面试题目整理与解说(二)

1.Collection 和 Collections 的差别. Collection 是集合类的上级接口,继承于他的接口主要有 Set 和 List. Collections 是针对集合类的一个帮助类,他提供一系列静态方法实现对各种集合的搜索.排序.线程安全化等操作. 2.HashMap 和 Hashtable 的差别. HashMap 是 Hashtable 的轻量级实现(非线程安全的实现),他们都完毕了 Map 接口,HashMap是非线程安全,效率上可能高于 Hashtable.在多个线程