【备战秋招Day 8】经典面试题29-32及在线编程题22-24答案

转载IMWeb团队，知乎地址：https://zhuanlan.zhihu.com/p/27979439

经典面试题

29..JavaScript如何实现继承？

构造继承

原型继承

实例继承

拷贝继承

原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。

function Parent(){
    this.name = 'wang';
}
function Child(){
    this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性

30.清除浮动有哪些方式？比较好的方式是哪一种？

（1）父级div定义height。

（2）结尾处加空div标签clear:both。

（3）父级div定义伪类:after和zoom。

（4）父级div定义overflow:hidden。

（5）父级div定义overflow:auto。

（6）父级div也浮动，需要定义宽度。

（7）父级div定义display:table。

（8）结尾处加br标签clear:both。

比较好的是第3种方式，好多网站都这么用。

31.box-sizing常用的属性有哪些？分别有什么作用？

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

32.Doctype作用？标准模式与兼容模式各有什么区别?

(Q1)告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

(Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

前端思考题

15.如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？

display:none;的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。

visibility:hidden;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间3.overflow:hidden;一个比较合理的方法.texthidden{display:block;/统一转化为块级元素/overflow:hidden;width:0;height:0;}就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

16.你觉得WebAssembly为什么比asm.js快？

WebAssembly 是为 Web 而设计的、可以生成浏览器可执行的二进制文件的编程语言。并且于2017 年 2 月 28 日，四个主要的浏览器一致同意宣布 WebAssembly 的 MVP 版本已经完成，即将推出一个浏览器可以搭载的稳定版本。WebAssembly 的一个主要目标就是变快。当然，“快”是相对的概念。相比于 JavaScript 和其他动态语言，WebAssembly 的快主要是因为它的静态类型特性和方便优化特性。WebAssembly 意在速度上能够达到和本地执行一样快，其实 asm.js 已经比较接近这一目标了，但是 WebAssembly 要进一步缩短和本地执行速度之间的差距。

在线编程题

22.柯里化

要求：

已知 fn 为一个预定义函数，实现函数 curryIt，调用之后满足如下条件：

1、返回一个函数 a，a 的 length 属性值为 1（即显式声明 a 接收一个参数）

2、调用 a 之后，返回一个函数 b, b 的 length 属性值为 1

3、调用 b 之后，返回一个函数 c, c 的 length 属性值为 1

4、调用 c 之后，返回的结果与调用 fn 的返回值一致

5、fn 的参数依次为函数 a, b, c 的调用参数

思路：

不用 arguments.callee 的方法，用变量名代替了，大同小异：

function curryIt(fn) {
    var length = fn.length,
        args = [];
    var result =  function (arg){
        args.push(arg);
        length --;
        if(length <= 0 ){
            return fn.apply(this, args);
        } else {
            return result;
        }
    }    
    return result;
}

不懂，我的代码：

function curryIt(fn) {
    return a=function(ra){
        return b=function(rb){
            return c=function(rc){
                return fn(ra,rb,rc);
            }
        }
    }
}

23.且运算

要求：

返回参数 a 和 b 的逻辑且运算结果。

思路：

且运算符”&&”的运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。

function and(a, b) {
    return !!(a && b)
    //如果a为true，b为非Boolean就会返回非Boolean值，所以加一步转换
}

感觉这里加了！！就骚操作很多？我没有加！！

24.二进制转换

要求：

给定二进制字符串，将其换算成对应的十进制数字

思路：

parseInt方法可以将其它进制转换为十进制，只需要给该方法传入需要转换的字符串和该字符串的进制表示两个参数即可。

function base10(str) {
    /**
        其它进制转十进制
        parseInt(str,2)
        parseInt(str,8)
        parseInt(str,16)
    */
    return parseInt(str,2);
}