Javascript相关面试题目

题目和答案来自于网络，不保证准确性哦！

1，介绍js的基本数据类型，引用类型

    基本数据类型：1数值类型 Number    2.布尔类型 Boolean 3.字符类型 String    4.未定义 Undefined    5.空类型 Null。这些类型在内存中占有固定大小的空间，值保存在栈空间。

    引用类型：1.数组 Array  2.对象 Object   3.函数 Function。引用类型内存中占有的空间不固定，但是内存地址大小是固定的，因此存储的实际是数据的内存地址。

    typeof( )方法用来返回当前变量的类型

2，例举几种强制类型转换和几种隐式类型转换?  

   强制：比如parseInt，parseFloat，Number()，Boolean()，String()

   隐式:①3 + true; // 4 ②1 + 2 + "3"; // "33" ③var x = NaN;x === NaN; // false

   上面只是简单列举了几种情况，由于类型转换内容较多，这里就不详细解释了。

3，绑定事件和普通事件有什么区别？ 

   事件绑定就是针对dom元素的事件，绑定在dom元素上；普通事件即为非针对dom元素的事件；普通事件只支持单个事件，而事件绑定可以添加多个事件，都执行。

   普通事件分两种方式：

   ①直接在html标签里面添加“onclick”等事件，然后在js里面撰写事件的执行函数

   ②通过DOM方式获取对象，然后为对象添加onclick事件

   绑定事件又分为标准W3C绑定事件和IE绑定事件： 

   ①标准W3C绑定，采用addEventListener()方式绑定

   ②IE绑定，采用attachEvent()方式绑定

4，ajax请求的时候get 和post方式的区别  

    1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到；post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程；

    2、Get请求有如下特性：它会将数据添加到URL中，通过这种方式传递到服务器，通常利用一个问号？代表URL地址的结尾与数据参数的开端，后面的参数每一个数据参数以“名称=值”的形式出现，参数与参数之间利用一个

连接符&来区分。Post请求有如下特性：数据是放在HTTP主体中的，其组织方式不只一种，有&连接方式，也有分割符方式，可隐藏参数，传递大批数据，比较方便。

    3、get传送的数据量较小，不能大于2KB；

    post传送的数据量较大，一般被默认为不受限制。但理论上，因服务器的不同而异.

    4、get安全性非常低，post安全性较高；

  （总结：

    一个在url后面 一个放在虚拟载体里面

    有大小限制

    安全问题

    应用不同 一个是论坛等只需要请求的，一个是类似修改密码的）

5，call和apply的区别  

    相同点:两个方法产生的作用是完全一样的

    不同点:方法传递的参数不同

    Object.call(this,obj1,obj2,obj3,...)第一个参数是函数执行时this的值，其后所有的参数都是需要被传入函数的参数。

    Object.apply(this,arguments)第一个参数也是this的值,第二个参数是一个数组或伪数组，内含函数需要被传入的参数。

6，常用的继承的方法   

 1，使用对象冒充方式

 2，call和apply方法方式（也可以算是对象冒充方式）

 3，原型链方式

 4，混合方式，混合了call方式、原型链方式

 原型prototype机制或apply和call方法去实现较简单，建议使用混合方式。

7，JavaScript this指针、闭包、作用域？

    闭包就是能够读取其他函数内部变量的函数上下文对象(this指针)是指被调用函数所处的环境。其作用是在一个函数内部引用调用它的对象本身。

    this所指向的对象是函数调用时刻调用该函数的对象。this指针是静态作用域的一个补充。

    作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

8，事件委托是什么？  

    也叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。比如给最外面的div加点击事件，那么里面的ul、li、a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

    好处：

    ①管理的函数变少了，不需要为每个元素都添加监听函数，只需对父级对象进行操作，减少内存使用。

    ②可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。

    ③JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。另外与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

9，请描述下事件冒泡机制，如何阻止事件冒泡和默认事件 

    我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程，就是冒泡事件。那么如何有效的阻止冒泡事件的发生？其实在非IE浏览器中提供了一个事件对象stopPropagation，

那么在IE浏览器中有没有一个对象去阻止冒泡事件呢，答案是肯定的，通过cancelBubble事件对象可以阻止。

11，javascript的本地对象，内置对象和宿主对象  

    ECMA-262把本地对象（native object）定义为“独立于宿主环境的ECMAScript实现提供的对象”。本地对象就是ECMAScript中定义好的对象，如Object、Function、String、Array、Boolean、Number、Date、
RegExp等；

    内置对象是本地对象中比较特殊的一种，根据定义，所有内置对象都是本地对象；它不用实例化，ECMA只定义了两个内置对象，即Global和Math；

    所有非本地对象都是宿主对象（host Object），即由ECMAScript实现的宿主环境提供的对象。宿主对象就是BOM、DOM和自己定义的对象，比如document、window等。

    总结：本地对象是ECMA官方定义好的对象；内置对象也是本地对象，只包括Global对象和Math对象；宿主对象包括BOM和DOM对象。

12，怎样添加、移除、移动、复制、创建和查找节点？

（1）创建新节点

 createDocumentFragment()    //创建一个DOM片段

 createElement()   //创建一个具体的元素

 createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

 appendChild()

 removeChild()

 replaceChild()

 insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

 getElementsByTagName()    //返回带有指定标签名的所以元素

 getElementsByName()    //返回带有指定Name属性的所以元素

 getElementsByClassName()  //返回带有指定类名的所有元素

 getElementById()    //返回带有指定 ID 的元素

13，js面向对象的几种方式。

 JavaScript中对象的创建有以下几种方式：

（1）使用本地对象，通过JavaScript语言原生对象的构造方法，比如Array、Object等,实例化出一个新的对象。

（2）使用JSON符号，JavaScript默认将JSON当做一个对象处理。我们不但可以将一个JSON字符串转化为对象，也可以反过来将一个对象“编译”为一个JSON字符串，以方便JavaScript中的对象的传输。

（3）自定义对象构造，创建高级对象构造有两种方式：使用“this”关键字构造、使用原型prototype构造。

14、IE和标准下有哪些兼容性的写法？

 比如：

 Var ev = ev || window.event

 document.documentElement.clientWidth || document.body.clientWidth

 Var target = ev.srcElement||ev.target

15，jq几种事件绑定方法，各有什么不同？

    1，bind()是最直接的绑定方法 ，会绑定事件类型和处理函数到DOM element上, 这个方法是存在最久的，而且也很好的解决了浏览器在事件处理中的兼容问题。但是这个方法有一些performance方面的问题

    2，live()方法用到了事件委托的概念来处理事件的绑定。它和用.bind()来绑定事件是一样的。.live()方法会绑定相应的事件到你所选择的元素的根元素上，即是document元素上。那么所有通过冒泡上来的事件都可以用这个相同的handler来处理了

    3，delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation

    4，其实.bind() ,live(), delegate()都是通过on()来实现的，unbind(),die(),undelegate(),也是一样的都是通过off()来实现的

   用bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上；

   不要再用live()了，它已经不再被推荐了，而且还有许多问题；

   delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上；

   我们可以用on()来代替上述的3种方法。

16，==和===的区别

  "==" 只要求值相等; "===" 要求值和类型都相等

17，$(document).ready()和window.onload的区别

   1.执行时间不同。

     window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行；

     $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

   2.编写个数不同。

     window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个；

     $(document).ready()可以同时编写多个，并且都可以得到执行。

   3.简化写法。

     window.onload没有简化写法；

     $(document).ready(function(){})可以简写成$(function(){})。

18，eval是做什么的？

    eval()，这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。在实际中，eval（）很少被用到，eval()是一个危险的函数，代码可能被恶意方（不怀好意的人）影响,通过在使用方的机器上使用恶意代码，可能让你失去在网页或者扩展程序上的权限。常规用例的安全会被eval()改变。

19，怎么实现一个轮播。

 1，利用CSS3动画(animation)；

 2，利用myfous；

 3，利用jquery轮播效果；

 4，通过CSS3过渡(transition)；

 具体过程就不详细介绍了。

20，你有哪些性能优化的方法？

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

（2）前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4） 当需要设置的样式很多时设置className而不是直接操作style。

（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

21，JavaScript原型，原型链?有什么特点？

    每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

    关系：instance.constructor.prototype = instance.__proto__

    特点：

    JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

22，怎么提升网站性能，

（1）合并压缩JS/CSS     （2）使用CSS sprites （3）避免使用CSS表达式  （4）精简HTML CSS JS代码大小

（5）避免JS的复杂计算和DOM操作，减少页面的重绘重排（6）JS尽量放到页面底部  （7）合并AJAX请求

（8）TAB页异步或延迟加载  （9）非关键图片尽量延迟加载，如头像  （10）压缩图片质量

（11）设置较长的客户端缓存过期时间 （12）设置GZIP压缩（13）cookie隔离 （14）适当使用多域名增加并行加载

（15）重点优化首屏，减少用户等待时间  （16）避免重定向 （17）条件允许时使用CDN加速

23,请给出异步加载js方案，不少于两种。

 1.defer（只支持IE）

 2.async规定一旦脚本可用，则会异步执行，只适用于外部脚本

 3.创建script，插入到DOM中，加载完毕后callBack

24，请写出绑定事件的方法，不少于两种

 Javascript事件绑定的几种方式：

 1、直接在元素上绑定回调函数 <button id="btn" onclick="clickBtn()">clickme</button>

 2、JS获取DOM元素对象后，对onclick属性赋值，绑定事件：

      document.getElementById('btn').onclick=clickBtn;

 3、JS获取DOM对象后，调用对象的addEventListener函数绑定事件：

      document.getElementById('btn').addEventListener('click',clickBtn);

25,请解释 CSS 动画和 JavaScript 动画的优缺点。

 CSS3的动画

 优点：

 1.在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）

 2.代码相对简单

 缺点：

 1.在动画控制上不够灵活

 2.兼容性不好

 3.部分动画功能无法实现（如滚动动画，视差滚动等）

 JavaScript的动画

 优点：

 1.控制能力很强，可以单帧的控制、变换

 2.兼容性好，写得好完全可以兼容IE6，且功能强大。

 缺点：

 计算没有css快，另外经常需要依赖其他的库。

 结论：

 所以，不复杂的动画完全可以用css实现，复杂一些的，或者需要交互的时候，用js会靠谱一些~

26,当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

 ①直接在DOM里绑定事件：<E onclick=”test()”></E>；

 ②在JS里通过onclick绑定：xxx.onclick = test；

 ③通过事件添加进行绑定：xxx.addEventListener('click',test, false);

                         IE：xxx.attachEvent('onclick', test);

27,Javascript的事件流模型都有什么？

(1).冒泡型事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发 

(2).捕获型事件：它与冒泡型事件相反，指事件按照从最不精确到最精确的对象的顺序逐一触发

28,什么是Ajax和JSON，它们的优缺点。

 Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

 优点：

　 可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量

　 避免用户不断刷新或者跳转页面，提高用户体验

 缺点：

　 对搜索引擎不友好（

　 要实现ajax下的前后退功能成本较大

　 可能造成请求数的增加

　 跨域问题限制

 JSON是一种轻量级的数据交换格式，ECMA的一个子集

 优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

 缺点：

   没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；

   JSON格式目前在Web Service中推广还属于初级阶段。

29,一次完整的HTTP事务是怎样一个过程？HTTP状态码

 1xx表示请求已被接受，但需要后续处理。如：100，客户端应继续发送请求。

 2xx请求已成功被服务器接收、理解、并接受。如：200，请求已成功

 3xx这类状态码代表需要客户端采取进一步的操作才能完成请求。如：301，被请求的资源已永久移动到新位置，

 4xx这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。 如：404，由于包含语法错误，当前请求无法被服务器理解。400通常在服务器端表单验证失败时返回。

 5xx这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。并且响应消息体中应当给出理由，除非是HEAD请求。

如：500，通常是代码出错，后台Bug。

30、 this对象的理解

 ①this总是指向函数的直接调用者（而非间接调用者）；

 ②如果有new关键字，this指向new出来的那个对象；

 ③在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

31、null和undefined的区别？

 null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

 undefined：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

 null：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

32、new操作符具体干了什么呢?

（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

（2）属性和方法被加入到 this 引用的对象中。

（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

33、哪些常见操作会造成内存泄漏？

    内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

    垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

    setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

    闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

34、split() join() 的区别

 split()方法：用于把一个字符串分割成字符串数组. 

 join() 方法用于把数组中的所有元素放入一个字符串。

 （总结：前者是切割成数组的形式，后者是将数组转换成字符串）；

35、数组方法pop() push() unshift() shift()

 push()尾部添加； pop()尾部删除；

 unshift()头部添加； shift()头部删除；

36、javascript的内存管理应注意什么？

 ①避免不必要的定义全局变量

 ②及时解除不在使用的变量引用，将其赋值为null

 ③合理的使用函数，函数中的局部变量执行结束后就会自动释放内存

 ④合理使用回调函数、闭包等

37、JS对象与JSON格式的互相转换

     eval( ) 函数（使用的是 JavaScript 编译器）可编译并执行任何 JavaScript 代码，但这隐藏了一个潜在的安全问题。使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。在浏览器中，这提供了原生的
JSON 支持，而且 JSON 解析器的速度更快。

     ①JSON的解析（json数据转换成JS对象）：

      var myObject=JSON.parse(myJSONtext)；

    JSON的序列化（JS对象转换成JSON数据）：

     ②var myJSONtext=JSON.stringify(myObject)；

39、为什么减少DOM操作是性能优化的主要思想之一？

    在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间

40、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？ 

答案：dns缓存，cdn缓存，浏览器缓存，服务器缓存

41、javascript的同源策略 

    一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、议和端口号的组合 

42、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个 

    对象：Window document location screen history navigator 

    方法：Alert() confirm() prompt() open() close() 

43、documen.write和 innerHTML 的区别？ 

    document.write 只能重绘整个页面；innerHTML 可以重绘页面的一部分

44、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？ 

    伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

45、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？ 

    hasOwnProperty