2010校招笔试其中2个理论题解释

公司2010年的第一轮校招笔试过程应该结束了,第一次接触到大公司的校招笔试,看到试卷的时候第一反应是“这题太变态了”。

去掉主观题和一些答案明确的题,有几题真的很好玩,虽然自己一直都会,但短时间内作答的话也很容易忘记一些细节,抽了几题做个记录。

判断一个变量是字符串,写出函数实现

大部分在校生能够勉强回答出这题的一部分,这次整理出来的答案有2个版本:

function isString(obj) {  
    return typeof obj == 'string';
}

function isString(obj) {  
    return obj instanceof String;
}

将这两个版本整合起来,其实就是一个较为完美的答案,原理不再细说,字符串字面值和new String('abc')的区别很多学习材料上都会提到。

但你以为这样就完了?

接下去才是这题最变态的地方,我们来做2个页面,首先主页面的body代码如下:

<script type="text/javascript">  
    function isString(obj) {
        return typeof obj == 'string' || obj instanceof String;
    }
</script>  
<iframe src="omg.htm"></iframe>  

然后omg.htm里的代码就这么来写吧:

<script type="text/javascript">  
    alert(parent.isString(new String('abc')));
</script>  

OK,运行一下主页面试试?

究其原理,a instanceof b是判断a__proto__属性是否在bprototype链上,而因为iframe的存在,omg.htm中的String和主页面的String根本是两个域的八杆子打不着关系的对象,instanceof也失去了效果。

其实真正的函数应该是这么写的

function isString(obj) {  
    return typeof obj == 'string'
        || obj instanceof String
        || Object.prototype.toString.call(obj) == '[object String]';
}

具体原因参见ECMA262标准中对Object的toString的定义,而前面的typeofinstanceof其实只是点缀,在多数情况下这2个条件可以命中,避免了toString的调用开销而已。

用2个div做一个十字架,撑满整个浏览器,十字架宽50像素。

首先是HTML结构,这个简单

<div id="h"></div>  
<div id="v"></div>  

然后很多应试者给的样式是这样的:

#v {
    width: 50px;
    height: 100%;
    margin: 0 auto;
    background: #f00;
}
#h {
    width: 100%;
    height: 50px;
    background: #f00;
    position: absolute;
    top: 50%;
}

到这一步,基本这题算是给分了,当然这明显不是完美的。

首先,自以为是地用margin: 0 auto;做水平居中,以为浏览器会这么乖乖听话吗?很遗憾傲娇的<body>这个时候的高度是0,管你height: 100%;都没用。所以还请乖乖地使用position: absolute;left值来做居中吧。

其次,垂直居中只用top: 50%;明显是不够的,这一点上可以使用margin-top: -25px;达到目的。当然如果你给<body>加上display: table-cell;,再给<div>加上vertical-align: middle;也是可以兼容不少浏览器的。

但你以为这样就完了?

好吧又是这个问题……一个题要做到完美真的很难,直接拿上面所示的代码去浏览器运行一下就明白问题所在了。

发现body有默认的margin了吧?因此你还需要给body加个样式:

body { margin: 0; }  

嗯,到这一步,总算看到一个没有滚动条地、几乎完美的十字架了……至于IE8以下默认带着2像素的边框以突显立体感,这算不算撑满浏览器,我们也真的不在乎了吧。

但是真的会这样去要求应试者吗?

认真你就输了 – AcFun