最近面试有点多，有点麻木，不过这样也挺好，心态很淡定。
本来准备把这篇技术日志写在QQ空间里面备份，但是羞于被老板抓包，就写在这个没有85后的人人吧。
今天去了腾讯面试，不能说他们的笔试题有多难，只能说平时积累的太粗糙了，很多东西没有整理，没有回味，没有实践，没有仔细想，想明白，好在自己还有这个心，平时笔试完了都把不会的恶补一下，这次也不例外。
以下就当备份吧，方便以后查阅，从记忆最深的谈起。
第一个问题是this。
老生常谈，this一直是javascript中的用的比较混乱的。很多人都没有搞清楚，原因就是javascript不是纯粹的面向对象语言（oo），而是一门专业名词的叫基于对象的语言（object based）。
举个例子吧，也是面试官问过我的:
<script type="text/javascript">
funciton a() {
alert(this);
}
a();
</script>
问：调用a()时，此处的this指的是什么？
实验结果：弹出框中显示的是：object
答案： 此处this指window对象。
总结：
1. 当函数作为作为普通函数直接调用的时候，this指向的都是window对象。
2. 当函数作为控件事件触发时：
a. 内联事件注册
将事件直接写到在HTML代码中：<element onclick = "a();"></element>，此时this指向window对象。
b. 传统事件注册
javascript： element.onclick = a(); 此时this指向element对象。
c. 参数
javascript： element.onclick = a(this); 此时this作为参数传递指向事件源的element。
3. 作为对象使用时，this指向当前对象c，如：var c = new a(); b.a();
4. 使用apply或者call方法时，this指向所传递的对象
如：var obj = {};
a.apply(obj,new Array("nothing"));
5. 动态添加事件
if (document.body.attachEvent){
document.getElementById('inpt').attachEvent('onclick', EventHandler);}
else
if(document.body.addEventListener){
document.getElementById("inpt").addEventListener("click", EventHandler,
false);
}
function EventHandler(evt){
//alert(this.event.srcElement.value);
//FF:this.event is undefined; IE:正常 （没有形参evt）
//alert(evt.srcElement.value); //FF:evt.srcElement is undefined; IE:正常
（带有形参evt）
//alert(this.event.target.value); //FF:this.event is undefined;
IE:event.target is undefined （没有形参evt）
//alert(evt.target.value); //
FF:正常; IE:evt.target is undefined（带有形参evt）
//alert(this.value); //FF:正常;
IE:弹出undefine
//var evg = evt.srcElement?evt.srcElement:evt.target;
alert(evg.value); //均正常
}
适用于FF：绑定的函数必须带参数（此处为evt），事件源用evt.target表示
适用于IE：绑定的函数不一定带参数
1. 不带参数：事件源用可以this.event.srcElement表示
2. 带参数：事件源可以用this.event.srcElement或者evt.srcElement
第二个问题是haslayout 和 zoom
不说了贴了，这哥们说的挺好，摘自腾讯的前端观察。
要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多
IE
下的显示错误，就是源于 haslayout。
什么是 haslayout ？
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）
当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。如果某个HTML元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout 为只读属性 一旦被触发，就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML 元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout 的元素，通常显示为“haslayout = -1”。
负责组织自身内容的元素将默认有一个布局，主要包括以下元素（不完全列表）：
* body and html
* table, tr, th, td
* img
* hr
* input, button,
file, select, textarea, fieldset
* marquee
* frameset, frame, iframe
*
objects, applets, embed
对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。
如何激发 haslayout？
大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。
* display: inline-block
* height: (任何值除了auto)
* float: (left 或
right)
* position: absolute
* (任何值除了auto)
* writing-mode:
tb-rl
* zoom: (除 normal 外任意值)
Internet Explorer 7 还有一些额外的属性(不完全列表):
* min-height: (任意值)
* max-height: (除 none 外任意值)
* min- (任意值)
*
max- (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除
visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed
其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性，目前还未被浏览器广泛支持。
对于内联元素(默认即为内联的元素，如 span，或 display:inline; 的元素)，
- width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
- zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。
具有“layout” 的元素如果同时 display: inline ，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。
haslayout 问题的调试与解决
当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1 。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是 haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的 width/height 属性，其次再考虑其他属性。
对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE 的条件注释。
对 IE7 来说，最好的方法时设置元素的最小高度为 0 (min-height:0;)。
haslayout 问题引起的常见 bug
IE6 及更低版本的双空白边浮动 bug
bug 修复: display:inline;
IE5-6/win 的 3 像素偏移 bug
bug 修复: _height:1%;
IE6的躲躲猫(peek-a-boo) bug
bug 修复: _height:1%;
先说这两个，其他想起来再说
第三个问题 arguments 和 argument.callee()
arguments是一个函数的参数组成的“数组”（不是数组），是一个函数的内部保留字
函数a(x,y){}，调用的时候a(a,b,c)，这样调用不会出错，但是c是undefine，用arguments即参数的默认取法，arguments[0]就是a，arguments[1]就是b。
递归的时候匿名函数用到arguments.callee
function factorial(n){
if (n <= 0)
return 1;
else
return n * arguments.callee(n -
1)
}
alert(factorial(3));
第四个问题 call 和 apply
call 和 apply 类似，都有2个参数，第一个参数为替换的对象，call的第二个参数是许多参数（不能说是第二个），apply的第二个参数是参数组成的数组：
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
apply([thisObj[,argArray]])
例如：
function func(a,b){
...
}
func.apply(this,[10,20]);
func.call(this,10,20);
记录一下用法，官方的解释为：调用一个对象的一个方法，以另一个对象替换当前对象。
call可以改变当前对象的this指针，指向另一个对象，主要用在js对象各方法互相调用的时候，使当前this实例指针保持一致，或在特殊情况下需要改变this指针。语法如下：
obj1.method1.call(obj2,argument1,argument2)
call的作用就是把obj1的方法放到obj2上使用，后面的argument1…这些做为参数传入。
例1：
function Obj(){this.value="对象！";}
var value="global 变量";
function Fun1(){alert(this.value);}
window.Fun1(); //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById('myText')); //input text
Fun1.call(new Obj()); //对象！
例2：
function Class1() {
this.name = "class1";
this.showNam = function() {
alert(this.name);
}
}
function Class2() {
this.name = "class2";
}
var c1 = new Class1();
var c2 = new Class2();
c1.showNam.call(c2); // class1
例3：
/**定义一个animal类*/
function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}
/**定义一个Cat类*/
function Cat(){
this.name =
"Cat";
}
/**创建两个类对象*/
var animal = new Animal();
var cat = new Cat();
//通过call或apply方法，将原本属于Animal对象的showName()方法交给当前对象cat来使用了。
//输入结果为"Cat"
animal.showName.call(cat,",");
animal.showName.apply(cat,[]);
总结：
obj1.method1.call(obj2,argument1,argument2)
其实就执行obj1或者执行obj1.mentod1时，将obj1的上下文环境变成了obj2的环境。
说几个比较好玩的东西（腾讯的面试真题）：
1. if (!(a in window))
{
var a =1;
}
alert(a);
执行结果是什么？
2. var a = 5;
var b = 6;
var c = a+++b;
执行后，a、b、c分别是多少？
3. 怎样触发haslayout？ A. float:left B. positon:absolute C.width：200px D.zoom:1
4. display的属性有哪些？各是什么含义
5. 透明的兼容写法
6. 事件的兼容写法