面试奇谈-解答篇

bind模拟实现

Function.prototype.bind2 = function (context) {
    var self = this;
    // 获取bind2函数从第二个参数到最后一个参数,这里的参数是bind的时候传入的
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
        // 这个时候的arguments是指执行bind返回的函数传入的参数
        var bindArgs = Array.prototype.slice.call(arguments);
        self.apply(context, args.concat(bindArgs));
    }
}

2018-03-05面试解析

jenkins工作流程

搭建：

与svn/git进行公钥密钥配对，获取拉取项目的权限。
写持续集成脚本，大概步骤如下：
1. 根据程序pid找到就项目进程，执行kill操作。
2. 重新构建项目。
3. 执行守护进程，告诉os Don't kill me。

工作流程：

jenkins根据是定的时间去检测代码仓是否有变化
若有变化，重新拉取项目
根据pid找到旧进程，执行kill操作
重新构建项目
执行守护进程，告诉操作系统不要杀了我这个进程don't kill me

关于ES6

推荐去看ECMAScript 6 入门 – 阮一峰

promise的3个状态：

pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

箭头函数与普通函数的区别：

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
箭头函数与function的区别
MDN– 箭头函数
js箭头函数和普通函数的区别

css

dom回流重绘：

css与dom解析完毕后，合并为渲染树（render tree）

重绘(repaint)：当render tree中的一些元素需要更新属性，单这些属性只会影响元素的外观，风格，而不会影响到元素的布局，此类的页面渲染叫作页面重绘。

回流(reflow)：当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而引起的页面重新渲染。

回流必定引起重绘。

页面重绘（repaint）和页面回流（reflow）

lodash

有多年开发经验的工程师，往往都会有自己的一套工具库，称为 utils、helpers 等等，这套库一方面是自己的技术积累，另一方面也是对某项技术的扩展，领先于技术规范的制定和实现。

Lodash 就是这样的一套工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，其中部分是目前 ECMAScript 尚未制定的规范，但同时被业界所认可的辅助函数。目前每天使用 npm 安装 Lodash 的数量在百万级以上，这在一定程度上证明了其代码的健壮性，值得我们在项目中一试。

lodash入门介绍

文档

原生ajax

function success(text){
  //todo something
}
function fail(code){
  //todo something
}
var request = new XMLHttpRequest();	//新建xmlhttprequest对象
request.onreadystatechange = function(){
  if(request.readystate === 4){		//成功完成
    if(request.status === 200){
      return success(request.responseText);
    }else{
      return fail(request.status);
    }
  }else{
    //http请求继续
  }
}
//发送请求
request.open('GET','url');
request.send();

2018-02-26面试解析

let有没有提升

答案是没有，原题如下：

var val = 10;
function func(){
    console.log(val);   	//undefined
    var val = 2;
}
func();

var val = 10;
function func(){
  	var val = 2;
    console.log(val);   	//2
}
func();

var val = 10;
function func(){
    console.log(val);   	//10
}
func();

变种,下面会出现什么情况，答案是会报错：

let val = 10;
function func(){
    console.log(val);   	//ReferenceError: val is not defined
    let val = 2;
}
func();

因为没有变量提升，所以变量没有提前声明，还没有声明就使用，就会报错。

!!typeof “111”===”string” 的boolean值 -选择

1	consoloe.log(!!typeof "111"==="string") //false

答案是false，然后面试官问了执行顺序，跟我说“！”的优先级比“===”高。根据《javascript高级程序设计第三版介绍》：逻辑非操作符首先会将他的操作数转化为一个布尔值，然后再对其求反。也就是说逻辑非操作符遵循下列规则：

如果一个操作数是一个对象，则返回false。（!obj === false）
如果一个操作数是一个空字符串，返回true。(!”” === true)
如果操作数是一个非空字符串，返回false。(!”1111” === false)
如果操作数是0，返回true。(!0 === true)
如果操作数是任意非0数值，包括Infinity，返回false。(!1 === false)
如果操作数是null，返回true。(! null === true)
如果操作数是NaN，返回true。(! NaN === true)
如果操作数是undefined，返回false。(! undefined === true)

所以原题执行顺序为：

typeof "111" === string
!typeof "111" === false
!!typeof "111" === true
true === “string” 为false

关于优化

关于这题，我是看了一个博客里面写的，进行总结的。我写的答案大概如下：

减少css，js标签，用webpack打包工具打包。css放前面，js放后面，防止单线程阻塞。
图片加载，base64，雪碧图。
gzip压缩：gzip压缩是http协议上的gzip压缩编码技术。首先，我们应该要清楚的是压缩可以达到怎样的目的。比如说纯文本内容进行压缩之后，大小可以缩小大概40%左右。大小减小了最直接的就是传输的速度将会加快，以及流量将会减少。尤其是对于大流量类网站来说，压缩文件内容大小，减少流量是很有必要的(毕竟省钱嘛！)，另一方面，压缩过的内容将减少存储空间。
css:预处理，scss。不滥用字体。
尽量使用事件代理，利用事件冒泡，避免批量绑定事件。

关于浏览器兼容

我答了项目中遇到的几个问题，大概全都是我的博客里面写过的问题。总结几个Angular2与ios wechat的问题

浏览器内核答起，回答CSS前缀，Polyfill，Babel这些内容。。

数据库postgresql优点

google一波，毕竟写前端很少写数据库。。

MySQL 的各种 text 字段有不同的限制, 要手动区分 small text, middle text, large text… Pg 没有这个限制, text 能支持各种大小。
它可以存储 array 和 json, 可以在 array 和 json 上建索引, 甚至还能用表达式索引.
pg性能优于mysql，相同的数据量计算，pg时间一般只有mysql的四分之一左右（具体情况可能有所不同）

express有什么中间件

下面全部是文档的介绍

Express 是一个路由和中间件 Web 框架，其自身只具有最低程度的功能：Express 应用程序基本上是一系列中间件函数调用。

中间件函数能够访问请求对象 (req)、响应对象 (res) 以及应用程序的请求/响应循环中的下一个中间件函数。下一个中间件函数通常由名为 next 的变量来表示。

中间件函数可以执行以下任务：

执行任何代码。
对请求和响应对象进行更改。
结束请求/响应循环。
调用堆栈中的下一个中间件函数。

如果当前中间件函数没有结束请求/响应循环，那么它必须调用 next()，以将控制权传递给下一个中间件函数。否则，请求将保持挂起状态。

Express 应用程序可以使用以下类型的中间件：

您可以使用可选安装路径来装入应用层和路由器层中间件。还可以将一系列中间件函数一起装入，这样会在安装点创建中间件系统的子堆栈。

字符串反转

参考

var str = "a,b,c,d,e,s";
function reverseString(str) {
    return str.split('').reverse().join('');
}
console.log(reverseString(str));   //s,e,d,c,b,a

ul和li列表的默认样式

回来自己在chrome上试了下，结果如下：

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

css3新特性

css3特性

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image