腾讯笔试有感

 

最近面试有点多，有点麻木，不过这样也挺好，心态很淡定。

本来准备把这篇技术日志写在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
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不完全列表):

* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 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. 事件的兼容写法