前端面试题整理-白红宇

1.写出下面程序的运行结果：

if([] instanceof Object){    console.log("hello");}else{    console.log("world");}复制代码

答案是：hello

2.写出下面程序的运行结果：

var x = 1;function ScopeTest(){    alert(x);    var x = "hello world";    alert(x);}ScopeTest();复制代码

答案是：undefined

Hello world

3.写出下面程序的运行结果：

var t = true;window.setTimeout(function(){    t = false;},1000);while(t){}alert("end");复制代码

答案是：浏览器卡死，因为浏览器执行到setTimeout()定时器时，先不执行，先把它放到异步队列中，接着执行while循环同步任务，这时是一个死循环，所以，浏览器卡死。

4.写出下面程序的运行结果：

for(var i = 0; i < 5; i++){    setTimeout(function(){        console.log(i);    },1000);}复制代码

答案是：

5.写出下面程序的运行结果：

(1) console.log(isNaN(NaN));	(2) console.log(isNaN(23));(3) console.log(isNaN('ds'));(4) console.log(isNaN('32131dsafdas'));(5) console.log(NaN === NaN);(6) console.log(NaN === undefined);(7) console.log(undefined === undefined);(8) console.log(typeof NaN);复制代码

答案是：

(1) true (2) false (3) true (4) true (5) false (6) false (7) true (8) number

6.写出下面程序的运行结果：

console.log( ‘hello’ + (1<2) ? 'world' : 'me');复制代码

答案是：world

7.写出下面程序的运行结果：

if(10 > 9 > 8 == true){    console.log("html5");}else{    console.log("css3");}复制代码

答案是：css3

8.写出下面程序的运行结果：

var obj = {};obj.name = "first";var peo = obj;peo.name = "second";console.log(obj.name);复制代码

答案是：second

9.写出下面程序的运行结果：

var length = 10;function fn(){    console.log(this.length);}var obj = {    length : 5,    method : function(fn){        fn();        arguments[0]();    }};obj.method(fn , 1);复制代码

答案是：

10.写出下面程序的运行结果：

var output = (function(x){    delete x;    return x;})(0);console.log(output);复制代码

答案是：0

11.平常在项目中，用到过css3的哪些新特性？

答案是：圆角，阴影，弹性盒子，transition，animation等。

12.列举3种强制类型转换和2种隐式类型转换？

答案是：强制类型转换：Number() , String() , Boolean()；隐式类型转换：布尔值参与的+运算，会先将布尔值转成对应的数字，然后再进行+运算；数字和字符串使用+运算，会将数字转成字符串，然后再进行字符串的连接。

13.call和apply的区别？

答案是：call(新this对象，参数数组)； apply(新this对象，参数列表)；

14.什么是javascript的同源策略？

答案是：同源策略，限制一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

15.你采取过哪些网站性能优化方法？

答案是：(1) 资源压缩合并，减少http请求； (2)非核心代码异步加载； (3)利用浏览器缓存； (4)使用CDN； (5)预解析DNS

16.列出几种js继承的实现方式？

答案是：

(1) 借助构造函数实现继承function Parent(){this.name = ‘lxf’;}function Child(){Parent.call(this);this.age = 18;}这种方式只能实现部分继承，即父类的构造方法中的属性，子类可以继承，其缺点是，父类原型上的属性或方法，子类无法继承。(2)借助原型链实现继承function Parent(){this.name = ‘lxf’;this.play = [1,2,3];}function Child(){this.age = 18;}Child.prototype = new Parent();这种继承方式的缺点是用子类Child实例化两个对象后，var s1 = new Child(); var s2 = new Child(); s1.play.push(4); console.log(s2.play); 也会打印出[1,2,3,4]，其原因是两个对象的__proto__指向了同一个原型对象。(3)组合方式function Parent(){this.name = ‘lxf’;}function Child(){Parent.call(this);this.age = 18;}Child.prototype = Object.create(Parent.prototype);Child.prototype.constructor = Child;此种方式是最完美的方式。复制代码

17.rem实现自适应布局的原理是什么？

答案是：rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现自适应布局。