阿里巴巴校招笔试题整理（js篇）

PPs：之前把笔记锁了是因为题目都是我在网上搜的，答案也不一定正确，所以锁起来了，而且也没有写完，今天有站里的朋友来加我想看笔试题，现在就不锁了。不对的或者还没验证的地方还请各位朋友指正，谢谢。 

Q1：
在tmall.com的某个页面中存在一个id等于J_iframe_taobao的iframe，该iframe的域名是taobao.com。在不考虑IE浏览器的情况下，用最简洁的代码实现页面与该iframe进行双向通信？

1. ...
   

2. <iframe id="J_iframe_taobao" src="http://taobao.com/xxx"></iframe>
   

3. ...
   

4.  

复制代码

该题应该是考察html5的postMessage。
答案如下（答案是从别的网页搬过来的，po主说可能有误）：

1. var onmessage = function(e) {
   

2.         var data = e.data,p = document.createElement_x('p');
   

3.     p.innerHTML = data;
   

4.     document.getElementById('J_iframe_taobao').appendChild(p);
   

5. };
   

6. //监听postMessage消息事件
   

7. if (typeof window.addEventListener != 'undefined') {
   

8.         window.addEventListener('message', onmessage, false);
   

9. } else if (typeof window.attachEvent != 'undefined') {
   

10.         window.attachEvent('onmessage', onmessage);
    

11. }

复制代码

Q2：请写一个 getParents 方法让它可以获取某一个 DOM 元素的所有父亲节点。

Q3：现有代码如下：

1. function test() {
   

2.         var a = 1;
   

3.         setTimeout(function() {
   

4.                 alert(a);
   

5.                 a = 3;
   

6.         }, 1000);
   

7.         a = 2;
   

8.         setTimeout(function() {
   

9.                 alert(a);
   

10.                 a = 4;
    

11.         }, 3000);
    

12. }
    

13. 
    

14. test();
    

15. alert(0);

复制代码

请注意,代码中有三处alert.他们分别会alert出什么值，时间上的顺序是怎样的？
请详述得到这个答案的原因，特别是test函数的局部变量a是对运行结果的影响。

答案如下：
      它们分别会弹出2、3、0，而对应的时间上的顺序是先弹0，再弹2，最后弹3。
      原因是因为setTimeout会设置定时器将代码延迟执行，第一个setTimeout里面的函数会在执行test以后2秒执行，第二个setTimeout里面的函数会在执行test以后3秒执行，而alert(0)是在test函数执行以后马上就执行了。所以test函数执行以后a的值变为2，然后执行alert(0)弹出0，过两秒弹出a即2，此时a的值变为3，再过一秒弹出a即3。


Q4：
当我们使用CSS3新属性，比如：box-shadow或者transition时，我们怎么检测浏览器是否支持这些属性？
请设计一个JavaScript函数，该函数接受一个CSS属性名作为参数，并返回一个boolean值，表明浏览器是否支持这个属性。
答案如下（该答案是搬过来的，知识不够还未验证）：

1. var supports = (function() {
   

2.    var div = document.createElement('div'),
   

3.       vendors = 'Khtml Ms O Moz Webkit'.split(' '),
   

4.       len = vendors.length;
   

5. 
   

6.    return function(prop) {
   

7.       if ( prop in div.style ) return true;
   

8. 
   

9.       prop = prop.replace(/^[a-z]/, function(val) {
   

10.          return val.toUpperCase();
    

11.       });
    

12. 
    

13.       while(len--) {
    

14.          if ( vendors[len] + prop in div.style ) {
    

15.             // browser supports box-shadow. Do what you need.
    

16.             // Or use a bang (!) to test if the browser doesn't.
    

17.             return true;
    

18.          }
    

19.       }
    

20.       return false;
    

21.    };
    

22. })();
    

23. 
    

24. if ( supports('textShadow') ) {
    

25.    document.documentElement.className += ' textShadow';
    

26. }

复制代码

Q5：如果你现在使用的是 Google Chrome 或 Apple Safari，如何让 input 元素在默认情况下显示 “alipay WD Team”，而在光标移入后则显示空白？
答案如下：
css3 placeholder必须输入文字才会消失，所以不行，需要用js实现。

1.                         // 假设该input元素的id为input
   

2.                         window.onload = function() {
   

3.                                 var input = document.getElementById("input");
   

4.                                 input.onblur = function() {
   

5.                                         this.value = (this.value == '' ? this.defaultValue : this.value);
   

6.                                 };
   

7.                                 input.onfocus = function() {
   

8.                                         this.value = (this.value == this.defaultValue ? '' : this.value);
   

9.                                 };
   

10.                         };

复制代码

Q6：预测以下代码的结果并解释原因。

1. alert(Function instanceof Object);
   

2. alert(Object instanceof Function);

复制代码

答案如下（结果是对的，原因太高深看不懂！）：
Object, Function, Array等等这些都被称作是构造“函数”，他们都是函数。而所有的函数都是构造函数Function的实例。从原型链机制的的角度来说，那就是说所有的函数都能通过原型链找到创建他们的Function构造函数的构造原型Function.protorype对象，所以：

1. alert(Object instanceof Function);   // return true

复制代码

与此同时，又因为Function.prototype是一个对象，所以他的构造函数是Object. 从原型链机制的的角度来说，那就是说所有的函数都能通过原型链找到创建他们的Object构造函数的构造原型Object.prototype对象，所以：

1. alert(Function instanceof Object);   // return true

复制代码

Q7：现有代码如下：

1.                         var foo = 1;
   

2.                         function main(){
   

3.                                 alert(foo);
   

4.                                 var foo = 2;
   

5.                                 alert(this.foo);
   

6.                                 this.foo = 3;
   

7.                         }

复制代码

（1）请给出以下两种方式调用函数时，alert的结果，并说明原因。

1.      var m1 = main();
   

2.      var m2 = new main();

复制代码

答案如下（答案是对的，原因也分析的有理有据，可是第一个alert(foo)不是应该直接就默认的全局变量foo吗？怎么就变成undefined了？！这道题要再想想）：
var m1=main()时，alert的结果是undefined和1,原因是首先在alert(foo)的时候，foo在main()函数域内还没有被定义，因此提示undefined,而在输出this.foo时，因为此时的函数执行环境是全局域，相当于window.main()，因此this=window，所以this.foo=window.foo=1
var m2=new main()时,alert的结果是undefined和undefined，第一个undefined的原因与前面一种情况相同，而第二个提示undefined的原因是在这种情况下用new构造了一个main()的实例，因此执行环境发生了改变，不再是全局域，而是m2，因此此时的this=m2，因此this.foo=m2.foo，但是由于在alert(this.foo)时，m2中的this.foo还未被定义,因此提示undefined。
（2）如果想要var m1 = main()产生的m1和前面的m2完全一致,又该如何改造main函数?
答案如下（答案就是错的！）：
若要m1=main()与前面的m2产生的效果一致，则main()函数要修改成为function main(){alert(foo);foo=undefined;alert(this.foo);}即可。

Q8：写一段脚本，实现：当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号，如第一个链接则alert(1), 依次类推。
答案如下：

1. window.onload = function() {
   

2.     var l = document.links.length;
   

3.     for (var i = 0; i < l; i++) {
   

4.         document.links[i].onclick = function(x) {
   

5.             return function() {
   

6.                 alert(x + 1);
   

7.             };
   

8.         }(i);
   

9.     }
   

10. };

复制代码

Q9：(new Date).getTime()  和  +new Date()  都可以取到当前时间戳，它们的实现原理是什么，哪个效率更高？
答案如下（这个答案是搬过来的）：
第一种写法所耗的时间基本上只有第二种写法的一半。Date.getTime 这个函数本身实际上等价于 valueOf ，那么结论也呼之欲出了。因为第一种方法实际上直接调用了 valueOf ，而第二种方法涉及到JS内部的类型转换（可以参见网友的这篇文章：【WEB前端】百度前端面试经历小研究1——JavaScript 类型转换），尽管最终的结果也是调用了 valueOf 函数，但是毕竟有个转换的过程，所以效率理应比前者要来的低下吧。

Q10：有一个数组，其中保存的都是小写英文字符串，现在要把它按照除了第一个字母外的字符的字典顺序(字典顺序就是按首字母从a-z顺序排列，如果首字母相同则按第二个字母……)排序，请编写代码：
例：
["abd","cba","ba",]
排序后
["ba","cba","abd"]

答案如下（照搬的，还没验证）：
这个题目是专门凸显js函数式编程特点的题目，结果原作者居然用C语言解答了……捂脸。这里给出js的写法，十分简洁明了。

1. var bySecLetter = function(x, y) {
   

2.     if (typeof x === 'string' && typeof y === 'string') {
   

3.         var a = x.slice(1)
   

4.         ,   b = y.slice(1)
   

5.         if (a > b) return 1
   

6.         else if (a < b) return -1
   

7.     }
   

8.     return 0
   

9. }
   

10. 
    

11. var a = ["abd","cba","ba"]
    

12. a.sort(bySecLetter)

复制代码

这里只需要调用sort的比较函数，大于返回正数，小于返回负数，等于返回0即可。而作为字符串，本身的比较顺序就是字典顺序，所以只需要截取从第二个字符开始的字串进行比较，就可以得出比较结果。更多关于sort函数的信息可以参见MDN。

Q11：
（1）你了解arguments对象么,它有哪些属性?
答案如下（大部分的文章都只介绍了这4种属性，不知道有没有caller属性，答案引自【JS入门之arguments对象 】）：
0…n 属性；
argument属性：为当前执行的 function 对象返回一个arguments 对象，function 参数是当前执行函数的名称，可以省略；
length 属性：包含了传递给函数的参数的数目；
callee属性：返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文，callee 属性仅当相关函数正在执行时才可用，callee 属性的初始值就是正被执行的 Function 对象。

（2）arguments是数组么?如果不是请写一段代码将其转化为真正的数组,什么情况下需要这么做?
答案如下（代码是搬的，不知道对不对）：
arguments对象不是数组，

1. function A(){
   

2. 　　　var  Args = Array.prototype.slice.call(arguments, 0);
   

3. 　　　B(Args.slice(1));
   

4. 　　}

复制代码

（3）arguments有什么特性,可以用这些特性做什么?
答案如下：

Q12：请为JavaScript每个Array对象添加一个类似于PHP的shuffle()的方法。
答案如下（搬的）：

1. var data = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);    
   

2.     if (!Array.prototype.shuffle) {
   

3.         Array.prototype.shuffle = function() {
   

4.             for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
   

5.             return this;
   

6.         };
   

7.     }     
   

8.     alert(data.shuffle());

复制代码

文章来源:http://www.youjobit.com/news_122.html