前端最新最全面试题库JS部分.docx

前端最新最全面试题库JS部分1 , 怎么实现跨域问题？对于端口和协议的不同，只能通过后台来解决。我们要解决的是域名不同的问题。1.下 面 是 用 php 进 行 的 设 置 ，“ * ” 号 表 示 允 许 任 何 域 向 我 们 的 服 务 端 提 交 请 求 ：header"Access-Control-Allow-Origin： *"2.JSONP(JSON with Padding 填充式 JSON 或参数式 JSON)在 js 中，我们虽然不能直接用 XMLHttpRequest 请求不同域上的数据时，但是在页面上引入不同域上的 js 脚本文件却是可以的，jsonp 正是利用这个特性来实现的。JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的 JSON 数据。2,JSNOP 的优缺点优点：它的兼容性更好，在更加古老的浏览器中都可以运行，不需要 XMLHttpRequest 或 ActiveX 的支持；能够直接访问响应文本，支持在浏览器与服务器之间双向通信缺点：JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。它只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求；它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题3、谈谈 js 作用域和闭包？答：简单的说，作用域是针对变量的，比如我们创建一个函数 a1，函数里面又包了一个子函数 a2。此时就存在三个作用域：全局作用域a1 作用域a2 作用域；即全局作用域包含了 a1 的作用域，a2 的作用域包含了 a1 的作用域。当 a1 在查找变量的时候会先从自身的作用域区查找，找不到再到上一级 a2 的作用域查找，如果还没找到就到全局作用域区查找，这样就形成了一个作用域链。理解闭包首先要理解，js 垃圾回收机制，也就是当一个函数被执行完后，其作用域会被收回，如果形成了闭包，执行完后其作用域就不会被收回。如果某个函数被他的父函数之外的一个变量引用，就会形成闭包。闭包的作用，就是保存自己私有的变量，通过提供的接口（方法）给外部使用，但外部不能直接访问该变量。4、什么是原型链？答：Javascript 是面向对象的，每个实例对象都有一个_proto_属性，该属性指向它原型对象，这个实例对象的构造函数有一个原型属性 prototype，与实例的_proto_属性指向同一个对象。当一个对象在查找一个属性的时，自身没有就会根据_proto_ 向它的原型进行查找，如果都没有，则向它的原型的原型继续查找，直到查到Object.prototype._proto_为 nul，这样也就形成了原型链。6、什么是事件冒泡/捕获？答：事件冒泡：子元素事件的触发会影响父元素事件；开关事件冒泡：A，开启事件冒泡：element.addEventListener(eventName，handler，false)；B，关闭事件冒泡：假设传统方式事件的返回值为 e，就可以通过 e.stopPropagation()来关闭事件冒泡；事件捕获：父元素的事件会影响子元素的事件；开启事件捕获：element.addEventListener(eventName，handler，true)7、请说说事件委托机制？这样做有什么好处？答：事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委托。打个比方：一个 button 对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。好处：A，提高性能：列如，当有很多 li 同时需要注册事件的时候，如果使用传统方法来注册事件的话，需要给每一个 li 注册事件。然而如果使用委托事件的话，就只需要将事件委托给该一个元素即可。这样就能提高性能。B，新添加的元素还会有之前的事件；8、请列举字符串操作的方法？charCodeAt 方法返回一个整数，代表指定位置字符的 Unicode 编码；charAt 方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串； slice 方法返回字符串的片段；substring 方法返回位于 String 对象中指定位置的子字符串。substr 方法返回一个从指定位置开始的指定长度的子字符串。indexOf 方法返回 String 对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1； lastIndexOf 方法返回 String 对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回-1； search 方法返回与正则表达式查找内容匹配的第一个字符串的位置。concat 方法返回字符串值，该值包含了两个或多个提供的字符串的连接； split 将一个字符串分割为子字符串，然后将结果作为字符串数组返回；11、怎么理解 jQuery？答：JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js 库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+， FF1.5+， Safari 2.0+， Opera 9.0+），jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX 交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery 能够使用户的 html 页面保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆 js 来调用命令了，只需要定义 id 即可。jQuery 是一个兼容多浏览器的 javascript 库，核心理念是 write less，do more(写得更少，做得更多)。jQuery在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery 已经成为最流行的 javascript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。jQuery 是免费、开源的，使用 MIT 许可协议。jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。除此以外，jQuery 提供 API 让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery，顾名思义，也就是 JavaScript 和查询（Query），即是辅助 JavaScript 开发的库。13、表单验证传输的什么数据？明文还是暗文=加密？如何加密？是每一次传输数据，都是加密之后才传输吗？答：概述：GET 是从服务器上请求数据，POST 是发送数据到服务器。事实上，GET 方法是把数据参数队列（query string）加到一个 URL 上，值和表单是一一对应的。比如说，name=John。在队列里，值和表单用一个&符号分开，空格用+号替换，特 殊的符号转换成十六进制的代码。因为这一队列在 URL 里边，这样队列的参数就能看得到，可以被记录下来，或更改。通常 GET 方法还限制字符的大小（大概是 256 字节 ）。事实上 POST 方法可以没有时间限制的传递数据到服务器，用户在浏览器端是看不到这一过程的，所以 POST 方法比较适合用于发送一个保密的（比如信用 卡号）或者比较大量的数据到服务器。区别：Post 是允许传输大量数据的方法，而 Get 方法会将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比 Post 方法好。总结：1、get 方式的安全性较 Post 方式要差些，包含机密信息的话，建议用 Post 数据提交方式；2、在做数据查询时，建议用 Get 方式；而在做数据添加、修改或删除时，建议用 Post 方式；所以：表达如果是向服务器传输数据(如帐号密码等)都是加密数据(post)，如果只是单单想要从服务器获得数据或者传输的数据并不重要， 可以直接使用明文方式传输( get )14、面向对象和类的区别？答：简单的说类是对象的模版。在js 中没有类， 所以在 js 中所谓的 类 就是构造函数， 对象就是由构造函数创建出来的实例对象。面向对象就是使用面向对象的方式处理问题， 面向对象是对面向过程进行封装。面向对象有三大特性抽象性， 需要通过核心数据和特定环境才能描述对象的具体意义封装性， 封装就是将数据和功能组合到一起， 在 js 中对象就是键值对的集合， 对象将属性和方法封装起来， 方法将过程封装起来继承性， 将别人的属性和方法成为自己的， 传统继承基于模板(类)， js 中继承基于 构造函数对象的概念，面向对象编程的程序实际就是多个对象的集合，我们可以把所有的事物都抽象成对象，在程序设计中可以看作：对象=属性+方法。属性就是对象的数据，而方法就是对象的行为。类的概念，类是对象的模版，而对象是类的实例化。举个例子，汽车设计图可以看作是类，而具体的汽车就是对象。再比如有一个类是表示人，然后可以通过人这个模版来实例化出张三、李四。15、在 JS 的计时器运行原理是怎样的，为什么可以触发计时效果? 计时器是多线程吗?答：1.javascript 引擎只有一个线程，强迫异步事件排队等待被执行。2.setTimeout 和 setInterval 本质上不同的地方是他们如何执行异步代码的。3.如果一个定时器正在执行的时候被阻塞了，那么它将会被推迟到下一个可能的执行点，这既是使得延迟时间有可能会超过声明定时器时设置的值。4.Interval 如果有足够的时间来执行（大于制定的延迟），那么它将会无延迟的一个紧接着一个执行。原理：计时器通过设定一定的时间段（毫秒）来异步的执行一段代码。因为 Javascript 是一个单线程语言，计时器提供了一种绕过这种语言限制来执行代码的能力。总结：计时器是单线程的， 需要等待上一个执行完， 如果上一个没有执行完， 下一个需要延迟执行， 知道上一个执行完16、如何查找构造函数和原型中的属性？答：构造函数.prototype查看构造函数的原型属性实例对象._proto_ 查看实例对象的构造函数的原型实例对象._proto_.constructor 查看实例对象的构造函数17、js 中一共有几种数据类型？答：Undefined、Null、Boolean、Number 和 String。还有一种复杂的数据类型 Object，Object 本质是一组无序的名值对组成的。18、call 和 apply 的区别答： 它们的共同之处：都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。”它们的不同之处：apply：最多只能有两个参数新 this 对象和一个数组 argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。call：则是直接的参数列表，主要用在 js 对象各方法互相调用的时候，使当前 this 实例指针保持一致，或在特殊情况下需要改变 this 指针。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。更简单地说，apply 和 call 功能一样，只是传入的参数列表形式不同：如 func.call(func1，var1，var2，var3) 对应的 apply 写法为：func.apply(func1，var1，var2，var3)。19、说说你对 this 的理解？答：this 是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。1.作为纯粹的函数调用 this 指向全局对象2.作为对象的方法调用 this 指向调用对象3.作为构造函数被调用 this 指向新的对象（new 会改变 this 的指向）4.apply 调用 this 指向 apply 方法的第一个参数21、js 的异步加载有哪几种方法？答：方案一：<script>标签的 async="async"属性。HTML5 中新增的属性，Chrome、FF、IE9&IE9+均支持（IE68不支持）。此外，这种方法不能保证脚本按顺序执行。方案二：<script>标签的 defer="defer"属性。兼容所有浏览器。此外，这种方法可以确保所有设置 defer 属性的脚本按顺序执行。方案三：AJAX eval（使用 AJAX 得到脚本内容，然后通过 eval_r(xmlhttp.responseText)来运行脚本）。兼容所有浏览器。方案四：iframe 方式（这里可以参照：iframe 异步加载技术及性能中关于 Meboo 的部分）。兼容所有浏览器。22、列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常用方法至少 5 个？答：对象：Window document location screen history navigator方法：Alert() confirm() prompt() open() close()23、简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法做简单说明？答： document.getElementById 根据元素 id 查找元素 document.getElementByName 根据元素 name 查找元素 document.getElementTagName 根据指定的元素名查找元素24、原生 JS 的 window.onload 与 Jquery 的$(document).ready(function () )，$(function () )有什么不同？答：1.执行时间window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。2.编写个数不同window.onload 不能同时编写多个，如果有多个 window.onload 方法，只会执行一个$(document).ready()可以同时编写多个，并且都可以得到执行3.简化写法window.onload 没有简化写法$(document).ready(function()可以简写成$(function()；25、简述在 jQuery 中.eq()和.get()的异同？答：相同：get() ：取得其中一个匹配的元素。数字序号表示取得第几个匹配的元素eq()：获取第 N 个元素，下标都是从 0 开始， 用法基本相同。不同：eq 返回的是一个 jquery 对象； 返回的是 jQuery 对象，就可以继续调用其他方法。get 返回的是一个 html 对象数组；不能调用 jQuery 的其他方法；15