自己总结web前端面试题之javascript

1.js的几种数据类型？

字符串、数字、布尔、对象、Null、Undefined

2.typeof下的类型都有什么？

string、number、boolean、function、object、Undefined

3.js的常见内置对象类？

Date,Array,Math、Number、Boolean、String、Array、RegExp、Function...

4.创建一个对象

      function Person(name, age) {

        this.name = name;

        this.age = age;

        this.sing = function() { alert(this.name) }

      }

5.谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是总有一个原则，那就是this指的是调用函数的那个对象。

this一般情况下是全局对象Global。 作为方法调用，那么this就是指这个对象

6.十六进制与RGB值转化？

十六进制转化成RGB

# A9 D3 5E

R:A9=9*16^0+10*16^1=169

G:D3=3*16^0+13*16^1=211

B:5E=14*16^0+5*16^1=94

rgb(169,211,94)

RGB转化成十六进制

169/16=10余9 A9

211/16=13余3 D3

94/16=5余14 5E

#A9D35E

7.null和undefined的区别？

    null和undefined都表示没有内容，是空值，null是数值类型当中最小的，可以和其他数值进行转化，它的类型属于object，而undefined不可以进行转化，一般用作语义提示，表示控制，属于undefined类型

8.前++和后++的区别？

++表示本身变量自行加1，前++是先自身加1，再执行其他运算；后++是先执行其他运算，后自身加1

9.while和do-while的区别

while是先判断条件是否满足，在执行循环语句；do-while是先执行语句，再判断条件；条件不满足情况下，do-while比while多走一次

10.结束语句的区别

break:结束所有循环，当多层循环时，可以指定跳出某层循环

    continue：结束当前循环

return 跳出函数体，如果函数里有多层循环，会跳出所有循环，并且返回值给调用者

11.什么是变量的作用域

全局变量:是定义在方法体外面，可以再任何表达式或函数里使用，在顶层代码中我们使用this关键字和window对象都可以访问到它

局部变量:是定义在方法体里，只能在当前函数里使用，函数执行完毕时局部变量即刻销毁

JS变量没有块级作用域，函数中的变量在整个函数都中有效

基本数据类型:定义简单的数据字段

引用数据类型:可以定义多个值，或者包含属性和方法

12.js的垃圾回收机制？

js具有自动回收垃圾的机制，不用程序员手动调用，而c或c++需要自己回收，js的垃圾回收机制有固定的时间间隔和周期。引用数据类型没有固定大小，例如，定义数组时，当程序知道已知大小时，才在内存中分配空间，如果初始没给大小，则定义值时才分配空间。局部变量只在函数运行过程中存在，但是全局变量在页面加载时就已经存在了，并且全局变量会在页面关闭时才回收。

手动回收,例如：var x=new Number();

x=null;//清空内存

13.函数声明和匿名函数的区别？

 函数声明：又叫做函数表达式，函数声明要定义函数名称，并且通过标签里的事件进行调用，函数声明被调用时才会存在，用过之后会在内存中清空

匿名函数：属于闭包的一种，不用定义函数名称，更体现了页面的表现与结构相分离，匿名函数在页面加载时就存在，在页面关闭时进行清空。用匿名函数可以更好的封装js

14.解释一下闭包?

是指有权访问另一个函数的作用域中的变量的函数

优点：在页面加载时在内存中存在，调用速度快，并闭包的变量也会始终保存在内存中

缺点：造成内存消耗过大，页面性能降低，需要手动清空才能释放内存

闭包的表现形式:函数的嵌套，递归，匿名函数等。

15.new操作符具体干了什么呢?

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

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

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

16.如何判断一个对象是否属于某个类？

使用instanceof （待完善）

       if(a instanceof Person){

           alert('yes');

       }

17.模块化怎么做？

立即执行函数,不暴露私有成员

var module1 = (function(){

var _count = 0;

var m1 = function(){

//...

};

var m2 = function(){

//...

};

return {

m1 : m1,

m2 : m2

};

})();

18.继承有几种方法？

1、原型链继承

function Cat(){

}

Cat.prototype = new Animal();

Cat.prototype.name = 'cat';

2、构造继承

function Cat(name){

   Animal.call(this);

   this.name = name ;

}

3.组合继承

function SuperType(name) {

this.name = name;

this.colors = ["red","blue","green"];

}

SuperType.prototype.sayName = function() {

  console.log(this.name); }

function SubType(name, age) {

SuperType.call(this,name);//继承属性

this.age = age;

}

4.原型式继承

  function object(o) {

  function F(){}

  F.prototype = o;

return new F();

}

5.寄生式继承

function createAnother(original) {

var clone = object(original);

clone.sayHi = function () { alert("hi"); };

return clone;

}

var person = {

name:"EvanChen";

};

var anotherPerson = createAnother(person);

anotherPerson.sayHi();

6.寄生组合式继承

function inheritProperty(subType, superType) {

var prototype = object(superType.prototype);//创建对象

prototype.constructor = subType;//增强对象

subType.prototype = prototype;//指定对象

  }

19.什么是原型链？

原型链：作为继承的主要方法，用一个引用类型的原型，调用原型里的属性和方法，实现子类继承父类进行调用，每一个原型对象包含一个指向构造器的指针，通过指针孩子可以找到父类里属性和方法，那么prototype就是这个指针，当指向父类，在内存中就构成了一个原型链。

20.怎么提高节点操作性能？

文档碎片相当于一个口袋，用来提高DOM的操作性能，使操作节点的速度更快。

var frag=document.createDocumentFragment();//创建口袋

 frag.appendChild(l);//往口袋放对象

 对象.appendChild(frag);//把口袋执行

21事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

 1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。  

 2. 事件处理机制：IE是事件冒泡、火狐是事件捕获；

 3.  第一种：event.stopPropagation();

     第二种：return false;

     第三种：event.preventDefault(); 

     第四种：event.cancelable=true; 只支持IE8以下浏览器

22.事件绑定用什么？

1.addEventListenter("事件名称",调用函数,true/false)

true表示捕获事件false在冒泡阶段调用（支持高版本）

2.attachEvent()绑定事件(IE8以下) IE低版本下只支持冒泡事件

23.js是单线程还是多线程

JS是单线程，同理js所有写的框架也都是单线程。

js里有异步函数和延迟函数，会在其他函数调用完成后执行，所以这两种函数在队列末尾处加载

24.js的运行机制

简单来说js有2种机制，一个是事件机制，一个是io机制。

事件机制是通过网页标签所操作的事件流程，用来调用DOM和BOM对象的；io机制简单来说是处理文件的，例如：上传下载，读写文件，操作数据库等

25.浏览器存储都有哪些？

cookie ：cookie值是存在用户电脑里，用来存储文本框的值，窗体图标等一些小图片，存在电脑磁盘下，所以刷新页面不会被清空，它所存在浏览器相应的文件夹里，由你访问的页面设置信息的保存周期，但是在页面上显示cookie值需要在服务器上设置js，一个cookie值最多只能存储4kB，如果网络连接不通，cookie也不会进行显示

sessionStorage：存储数据在页面关闭之后，数据会被删除，信息存储在本地磁盘下

localStorage：没有时间限制，除非手动删除，一个本地存储可多达5MB以上

26.告诉我答案是多少？

(function(x){

     delete x;

     alert(x);

})(1+5);

函数参数无法delete删除，delete只能删除通过for in访问的属性。

当然，删除失败也不会报错，所以代码运行会弹出“1”。

27.JS中的call()和apply()方法的区别？

call方法:

语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

定义：调用一个对象的一个方法，以另一个对象替换当前对象。

说明： call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法： 

语法：apply([thisObj[,argArray]])

定义：应用某一对象的一个方法，用另一个对象替换当前对象。

说明： 如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

28.JSON 的了解

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

{'age':'12', 'name':'back'}

29.如何解决跨域问题?

1.通过动态加载script标签

2.通过动态生成iframe

document.domain + iframe

location.hash + iframe

window.name + iframe

3.postMessage html5 跨域技术

var ifr = document.getElementById('ifr');

var targetOrigin = 'http://b.com';  

ifr.contentWindow.postMessage('I was there!', targetOrigin);

4.CORS 自定义http头

var xdr = new XDomainRequest();

  console.log(xdr.responseText);

5.JSONP 回调函数和json数据

script.src = 'http://www.baidu.com/json/?callback=handleResponse';

6. web sockets html5 web通信技术

var socket = new WebSockt('ws://www.baidu.com');

30.http状态码有那些？分别代表是什么意思？

    100-199 用于指定客户端应相应的某些动作。

    200-299 用于表示请求成功。

    300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

    400-499 用于指出客户端的错误。400    1、语义有误，当前请求无法被服务器理解。401   当前请求需要用户验证 403  服务器已经理解请求，但是拒绝执行它。

    500-599 用于支持服务器错误。 503 – 服务不可用

31.那些操作会造成内存泄漏？

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

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

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

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

32.对Node的优点和缺点提出了自己的看法：

    *（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，

    因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。

    此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，

    因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

    *（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，

    而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

33.异步加载的方式

  (1) defer，只支持IE

  (2) async

var scriptEle = document.createElement("script");

         scriptEle.async = true;

  (3) XHR Injection(XHR 注入)：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。

34.ajax的缺点

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。 

35.ajax 是什么?ajax 的交互模型?同步和异步的区别?

1. 通过异步模式，提升了用户体验

2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

4.同步是一个进程正在运行，其他进程必须等待该进程执行完之后才执行，异步是线程并行加载互不影响。

36. Ajax的最大的特点是什么。

Ajax可以实现动态不刷新（局部刷新）

readyState属性 状态 有5个可取值： 0=未初始化 ，1=正在加载 2=以加载，3=交互中，4=完成

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

浏览器缓存，dns缓存，cdn缓存，服务器缓存

38.http请求头有哪些?

Accept：浏览器可接受的MIME类型。

Accept-Charset：浏览器可接受的字符集。

Accept-Encoding：浏览器能够进行解码的数据编码方式，比如gzip。Servlet能够向支持gzip的浏览器返回经gzip编码的HTML页面。许多情形下这可以减少5到10倍的下载时间。

Accept-Language：浏览器所希望的语言种类，当服务器能够提供一种以上的语言版本时要用到。

Authorization：授权信息，通常出现在对服务器发送的WWW-Authenticate头的应答中。

Connection：表示是否需要持久连接。如果Servlet看到这里的值为“Keep-Alive”，或者看到请求使用的是HTTP 1.1（HTTP 1.1默认进行持久连接），它就可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。

Content-Length：表示请求消息正文的长度。

Cookie：这是最重要的请求头信息之一

From：请求发送者的email地址，由一些特殊的Web客户程序使用，浏览器不会用到它。

Host：初始URL中的主机和端口。

If-Modified-Since：只有当所请求的内容在指定的日期之后又经过修改才返回它，否则返回304“Not Modified”应答。

Pragma：指定“no-cache”值表示服务器必须返回一个刷新后的文档，即使它是代理服务器而且已经有了页面的本地拷贝。

Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。

User-Agent：浏览器类型，如果Servlet返回的内容与浏览器类型有关则该值非常有用。

UA-Pixels，UA-Color，UA-OS，UA-CPU：由某些版本的IE浏览器所发送的非标准的请求头，表示屏幕大小、颜色深度、操作系统和CPU类型。