面试题小计
**公司面试题总结 （5.12号第六家一面）
技术很硬的一家公司，只是自己水平还比较水，问的是一些比较基础的东西，但是组织好语言把一件事情的原理讲清楚自我感觉还是有难度，或许就是基础的部分掌握不太好，今天把面试过程的问题总结了下，也算是个巩固（记性不好，能回忆起来的都在下面）
1.js的值类型和引用类型
（1）值类型：number，boolean、null、undefined。
（2）引用类型：对象、数组、函数。
JavaScript中函数参数的传递方式既不是传值，也不是传引用，而是叫传内存的引用： call-by-sharing
1 function changeStuff(num, obj1, obj2) 2 { 3 num = num * 10; 4 obj1.item = "changed"; 5 obj2 = {item: "changed"}; 6 } 7 8 var num = 10; 9 var obj1 = {item: "unchanged"}; 10 var obj2 = {item: "unchanged"}; 11 changeStuff(num, obj1, obj2); 12 console.log(num); // 10 13 console.log(obj1.item); // changed 14 console.log(obj2.item); // unchanged
changeStuff()中的num, obj1, obj2都是一个引用- 他们的内容是某块内存的地址
- 这个地址的值来自于外部定义的三块内存，是那三块内存地址的一份拷贝
- 同时，在函数内部这三个参数的值是可以直接被修改的，可以指向其他对象（由于JavaScript中没有指针或引用运算符，只能直接修改）
因此，我们从内存和引用的角度再来看看changeStuff()的定义：
1 function changeStuff(num, obj1, obj2) 2 { 3 num = num * 10; // 对num赋值，修改num的指向，新内存的内容为old_num * 10 4 obj1.item = "changed"; // 修改原始obj1内存中的内容 5 obj2 = {item: "changed"}; // 对obj2赋值，修改obj2指向，新内存的内容为{item: "changed"} 6 }
下面还有几个例子，仔细区分和理解下
1 function test1(){ 2 var a=[1]; 3 var b=a; 4 alert(a);// 1 5 b=[2]; 6 alert(a);//1 7 } 8 test1(); 9 function test2(){ 10 var a=[1]; 11 var b=a; 12 alert(a);// 1 13 b[0]=2; 14 alert(a);//2 15 } 16 test2(); 17 function test3(a){ 18 a={name:'bob'}; 19 } 20 var a={name:'john'}; 21 alert(a.name);//john 22 test3(a); 23 alert(a.name);//john 24 25 function test4(a){ 26 a.name='bob'; 27 } 28 var a={name:'john'}; 29 alert(a.name);//john 30 test4(a); 31 alert(a.name);//bob
2.json的数据格式以及如何处理
json就是javascript object notation ，他与xml一样都是用来做数据的传递用的，json是一种文本格式，不是文档格式，是独立存在的而不是局限于某一种语言，是理想的数据交换格式
json基于两种结构来搭建：（1）.名字/键值对 （2） 有序值的列表
json 各种数据格式如下：（1）object （2）array （3）value 值 （4）string （5）number
注意：任何的xml都可以通过json的数据格式来表示，json的编码格式统一是Unicode格式，编码默认是UTF-8
3.DOM对象模型
DOM就是document object model 其中
document代表文档对象 ，
object ：对象。js中的对象又分为三种 用户定义对象（由程序员自行创建的对象），内建对象（内建在javascript语言里的对象，ECMA-262 只定义了两个内置对 象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象），本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：
Object Function Array String Boolean Number Date RegExp Error EvalError RangeError ReferenceError SyntaxError TypeError URIError
宿主对象（由浏览器提供的对象，所有 BOM 和 DOM 对象都是宿主对象）。
4.选取DOM元素的方法
（1）通过ID选取元素：getElementById();该函数是document对象特有的函数，参数只有一个，必须放在单引号，或者双引号里面，返回值是有着该参数的元素节点对应的 对象。
（2）通过标签名获取元素：getElementsByTagName()；也是只有一个参数，参数是标签的名字，但是它返回的是一个对象数组(Nodelist对象)，即使整个文档里这个标签只 有一个元素，也是返回一个数组，只是这时的数组长度为1,。
（3）通过css类选取元素：getElementsByClassName();也是只接受一个参数，及类名，要指定多了类名时，只要在字符串参数中，用空格分隔开来就行
如element.getElementsByClassName("class2 class1")将选取elements后代元素中同时应用了class1和class2样式的元素（样式名称不区分先后顺序），返回也是一个对 象数组（Nodelist对象），对应着文档里的一组特定元素节点。
（4）通过名字选取元素：getElementsByName();也是一个参数，name 的名称，返回一个对象数组（Nodelist对象）。Name属性，只在少数的HTML元素中有效，比如： 表 单，表单元素，<iframe>，<img>元素。这是因为name属性是为了方便提交表单数据而打造。 并且，getElementsByName()方法，不在Document类中，只是针对 HTML文档可用，在XML中却不能用。
（5）、通过CSS选择器选取元素：document.querySelectorAll("selector") 其中，selector为合法的CSS选择器，比如： 通过过#id，.class,p[tittle=”aaa”] , var test=document.querySelectorAll("#test");通过这样获得对象那个后，再继续操作。等等。返回值也是一个对象数组（Nodelist 对象）。
这些原生的元素选取的方法比jQuery要快很多。
扩展：获取和设置属性。（1）getAttribute()；只有一个参数，打算获得的属性的名字；
（2）setAttribute（）；允许对属性节点值做出修改。使用方法：object.setAttribute(attribute,value);
5.js中的常用事件
onabort onblur onchange onclick ondblclick onerror onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseout onmouseover onmouseup onreset onresize onselect onsubmit onunload
6.js调用函数的方法
- 方法调用模式 比如说给一个对象添加一个方法，然后进行调用
1 var myobject={ 2 value:0, 3 inc:function(){ 4 alert(this.value) 5 } 6 } 7 myobject.inc()
- 函数调用模式
1 var add=function(a,b){ 2 alert(this)//this被绑顶到window 3 return a+b; 4 } 5 var sum=add(3,4); 6 alert(sum)
- 构造器调用模式（不建议使用）
1 var quo=function(string){ 2 this.status=string; 3 } 4 quo.prototype.get_status=function(){ 5 return this.status; 6 } 7 var qq=new quo("aaa"); 8 alert(qq.get_status());
- apply和call调用模式
7.js绑定事件的方法
- 在DOM元素中直接绑定
<input onclick="alert('hello neo')" type="button" value="hello neo"
- 在javascript代码中绑定 .onclick=function()的格式
1 document.getElementById("demo").onclick=function(){ 2 alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签 3 }
- addEventListener() 或 attachEvent() 来绑定事件监听函数
其中前者的使用方法 elementObject.addEventListener(eventName,handle,useCapture)
| eventName | 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
| useCapture | Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。 |
后者的使用方法elementObject.attachEvent(eventName,handle); 这里注意eventname有on
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数； 但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。
8.事件冒泡和事件捕获
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数 useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用 attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候 执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。
传统绑定事件方式
在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。
ele.onclick = doSomething2
IE浏览器
如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。
ele.attachEvent("onclick", doSomething2);
事件的传播是可以阻止的：
• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）后，后面的冒泡过程也不会发生了~
stopPropagation() 能阻止父元素的click事件函数执行，但不能阻止当前元素同时绑定的其它事件函数执行 。
3.阻止事件的默认行为，例如click <a>后的跳转~
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;
不是所有的事件都能冒泡，例如：blur、focus、load、unload
9.事件委托的机制
所谓事件的委托，就是通过父元素给子元素绑定事件，其实现的原理一是基于事件发生机制中的冒泡过程，二是监听事件源，w3c下是e.target ， IE下是window.event.srcElement 下面是原生的js实现一个事件委托的过程
1 oUl.onmouseover = function(ev){ 2 var ev = ev || window.event;//获取event对象 3 var target = ev.target || ev.srcElement;//监听事件源 4 if(target.nodeName.toLowerCase() == "li"){//当事件源于要添加事件的对象一致时 5 //执行事件 6 target.style.background = "red"; 7 } 8 }
通过事件委托来绑定事件有两方面的好处 ： 1. 提升性能 2.动态绑定，新添加的元素也有事件，而不用重新执行绑定过程
10.控制台的使用（挖坑，慢慢填）
11.浏览器对象模型 BOM
- BOM是Browser Object Model的缩写，简称浏览器对象模型
- BOM提供了独立于内容而与浏览器窗口进行交互的对象
- 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
- BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
- BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是 W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工作组 目前正在努力促进BOM的标准化）
- BOM最初是Netscape浏览器标准的一部分
JavaScript中的任何一个全局函数或变量都是window的属性
window子对象
- document 对象
- frames 对象
- history 对象
- location 对象
- navigator 对象
- screen 对象
window对象关系属性
- parent：如果当前窗口为frame，指向包含该frame的窗口的frame （frame）
- self ：指向当前的window对象，与window同意。 （window对象）
- top ：如果当前窗口为frame，指向包含该frame的top-level的window对象
- window ：指向当前的window对象，与self同意。
- opener ：当窗口是用javascript打开时，指向打开它的那人窗口（开启者）
window对象定位属性
- IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置，但未提供任何判断窗口大小的方法。用 document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小（显示HTML页的区域），但它们不是标准属性。
- Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了 window.innerWidth和window.innerHeight属性来判断视口的大小，window.outerWidth和 window.outerHeight属性判断浏览器窗口自身的大小。
window对象的方法
- 窗体控制
- moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
- moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域
- resizeBy(w,h)——相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体
- resizeTo(w,h)——把窗体宽度调整为w个像素，高度调整为h个像素
- 窗体滚动轴控制
- scrollTo(x,y)——在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
- scrollBy(x,y)—— 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)
- 窗体焦点控制
- focus()—— 使窗体或控件获取焦点
- blur()——与focus函数相反，使窗体或控件失去焦点
- 新建窗体
- open()——打开(弹出)一个新的窗体
- close()——关闭窗体
- opener属性——新建窗体中对父窗体的引用，中文"开启者"的意思
window.open方法语法
window.open(url, name, features, replace);
open方法参数说明
- url -- 要载入窗体的URL
- name -- 新建窗体的名称(目标,将在a 标签的target属性中用到，当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式，因此页面都将以弹出的方式打开
- features -- 代表窗体特性的字符串，字符串中每个特性使用逗号分隔
- replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定
open函数features参数说明,如果不使用第三个参数，将打开一个新的普通窗口
| 参数名称 | 类型 | 说明 |
|---|---|---|
| height | Number | 设置窗体的高度，不能小于100 |
| left | Number | 说明创建窗体的左坐标，不能为负值 |
| location | Boolean | 窗体是否显示地址栏，默认值为no |
| resizable | Boolean | 窗体是否允许通过拖动边线调整大小，默认值为no |
| scrollbars | Boolean | 窗体中内部超出窗口可视范围时是否允许拖动，默认值为no |
| toolbar | Boolean | 窗体是否显示工具栏，默认值为no |
| top | Number | 说明创建窗体的上坐标，不能为负值 |
| status | Boolean | 窗体是否显示状态栏，默认值为no |
| width | Number | 创建窗体的宽度，不能小于100 |
特性字符串中的每个特性使用逗号分隔，每个特性之间不允许有空格
open方法返回值为一个新窗体的window对象的引用
- 对话框
- alert(str)—— 弹出消息对话框（对话框中有一个“确定”按钮）
- confirm(str)—— 弹出消息对话框（对话框中包含一个“确定”按钮与“取消”按钮）
- prompt(str,defaultValue)——弹出消息对话框（对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框），由于各个浏览器实现的不同，若没有第二个参数（文本框中的默认值）时也最好提供一个空字符串
- 状态栏
- window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时)，浏览器底部的区域称为状态栏，用于向用户显示信息
- window.status 属性——临时改变浏览器状态栏的显示
- 时间等待与间隔函数
- setTimeout()—— 暂停指定的毫秒数后执行指定的代码
- clearTimeout()——取消指定的setTimeout函数将要执行的代码
- setInterval()——间隔指定的毫秒数不停地执行指定的代码
- clearInterval()——取消指定的setInterval函数将要执行的代码
setTimeout与setInterval方法有两个参数，第一个参数可以为字符串形式的代码，也可以是函数引用，第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID
var tid = setTimeout("alert('1')",1000);
alert(tid);
clearTimeout(tid);
History对象,在浏览器历史记录中导航
History 对象的属性:length 返回浏览器历史列表中的 URL 数量
History 对象的方法
- back() 加载 history 列表中的前一个 URL
- forward() 加载 history 列表中的下一个 URL
- go(num) 加载 history 列表中的某个具体页面
Location 对象
Location 对象的属性
- hash 设置或返回从井号 (#) 开始的 URL（锚）
- host 设置或返回主机名和当前 URL 的端口号
- hostname 设置或返回当前 URL 的主机名
- href 设置或返回完整的 URL
- pathname 设置或返回当前 URL 的路径部分
- port 设置或返回当前 URL 的端口号
- protocol 设置或返回当前 URL 的协议
- search 设置或返回从问号 (?) 开始的 URL（查询部分）
Location 对象的方法
- assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的
- reload() 重新加载当前文档，如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
- replace() 用新的文档替换当前文档，replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前纪录。
Navigator对象
Navigator 对象的属性
- appCodeName 返回浏览器的代码名
- appName 返回浏览器的名称
- appVersion 返回浏览器的平台和版本信息
- browserLanguage 返回当前浏览器的语言
- cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
- cpuClass 返回浏览器系统的 CPU 等级
- onLine 返回指明系统是否处于脱机模式的布尔值
- platform 返回运行浏览器的操作系统平台
- systemLanguage 返回 OS 使用的默认语言
- userAgent 返回由客户机发送服务器的 user-agent 头部的值
- userLanguage 返回 OS 的自然语言设置
框架与多窗口通信
子窗口与父窗口
只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口通过window.opener属性来访问父窗口。 而在opener窗口中，可以通过window.open方法的返回值来访问打开的窗口！
框架
window.frames集合：在框架集或包含iframe标签的页面中，frames集合包含了对有框架中窗口的引用
alert(frames.length);//框架的数目
alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用
//不但可以使用下标，还可以使用frame标签的name属性
alert(frames["frame1"].document.title);
在框架集中还可以使用ID来获取子窗口的引用
var frame1 =document.getElementById("frame1");//这样只是获取了标签
var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用
//还可以直接获取框架中document的引用
var frameDoc = frame1.contentDocument;
alert(frameDoc);//但IE不支持contentDocument属性
子窗口访问父窗口——window对象的parent属性
子窗口访问顶层——window对象的top属性
浏览器检测
市场上的浏览器种类多的不计其数，它们的解释引擎各不相同，期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时 候，然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了，主要分为两种：1.userAgent字符串检测，2.对象检测；当然，也 不能考虑所有的浏览器，我们需要按照客户需求来，如果可以确信浏览网站的用户都使用或大部分使用IE浏览器，那么你大可放心的使用IE专有的那些丰富的扩 展，当然，一旦用户开始转向另一个浏览，那么痛苦的日子便开始了。下面是市场上的主流浏览器列表：
- Internet Explorer
- Mozilla Firefox
- Google Chrome
- Opera
- Safari
注意，浏览器总是不断更新，我们不但要为多种浏览器作兼容处理，还要对同一浏览器多个版本作兼容处理。比如IE浏览器，其6.0版本和7.0版本都 很流行，因为微软IE随着操作系统绑定安装（之前也是同步发行，微软平均每两年推出一款个人桌面，同样IE也每两年更新一次；直到现在，由于火狐的流 行，IE工作组才加快IE的更新），所以更新的较慢，6.0版和7.0版有很大差别。
市场上还存在一些其它浏览器，但由于它们都是使用的上面所列浏览器的核心，或与上面浏览器使用了相同的解释引擎，所以无需多作考虑。下面是主流的浏览器解释引擎列表：
- Trident
Trident （又称为MSHTML），是微软的窗口操作系统（Windows）搭载的网页浏览器—Internet Explorer的排版引擎的名称，它的第一个版本随着1997年10月Internet Explorer第四版释出，之后不断的加入新的技术并随着新版本的Internet Explorer释出。在未来最新的Internet Explorer第七版中，微软将对Trident排版引擎做了的重大的变动，除了加入新的技术之外，并增加对网页标准的支持。尽管这些变动已经在相当大 的程度上落后了其它的排版引擎。使用该引擎的主要浏览器：IE，TheWorld，MiniIE，Maxthon，腾讯TT浏览器。事实上，这些浏览器是 直接使用了IE核心，因为其userAgent字符串中返回的信息与IE是一模一样的！
- Gecko
壁虎，英文为"Gecko"。Gecko是由Mozilla基金会开发的布局引擎的名字。它原本叫作NGLayout。Gecko的作用是读取诸如 HTML、CSS、XUL和JavaScript等的网页内容，并呈现到用户屏幕或打印出来。Gecko已经被许多应用程序所使用，包括若干浏览器，例如 Firefox、Mozilla Suite、Camino,Seamonkey等等
- Presto
Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。Presto取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto在推出后不 断有更新版本推出，使不少错误得以修正，以及阅读Javascript效能得以最佳化，并成为速度最快的引擎。
- KHTML
是HTML网页排版引擎之一，由KDE所开发。KDE系统自KDE2版起，在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写， 并以LGPL授权，支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高，不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法，为了使KHTML引擎可呈现的网页达到最多， 部分IE专属的语法也一并支援。目前使用KHTML的浏览器有Safari和Google Chrome。而KHTML也产生了许多衍生品，如：WebKit,WebCore引擎
12.overflow hidden为什么能够清除浮动
首先这涉及到BFC机制，
2.独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。
浙公网安备 33010602011771号