面试随记(长更)

3.21面试中所遇

仅针对几个印象较深的问题

1、前端是什么？

这个问题在我之前的面试也出现过，以前回答的也是模棱两可，然而并没有太过在意，这是我的疏忽，这次在被问到这个问题的时候，依然没有太多想法，只是简单的描述了几句
“前端即是将用户所想要看到的东西展现在他们的面前，满足用户的需求，诸如此类”
以上大致就是我的答案。
可能这类主观性问题比较受HR的青睐？ 我也不知我这个问题是否符合他们的期望。也许随着经验的提升，对这方面的问题也会有逐渐提升。

2、说说Vue中filter的用法

由于本人在自己做过的项目中基本没有使用filter，也是因为开发经验的不足，实属生疏，故而被问倒了，只是有点印象地说了自定义规则。
filter:自定义过滤器，使用Vue.filter()注册全局过滤器，以下为一个最简单的例子

    <div id="app">
        <div class="num-wrapper">
            {{ number | plus(this.number) }}
        </div>
    </div>

 Vue.filter('plus',function(val,value) {
        return val + +value
    })
    var vm = new Vue({
        el: "#app",
        data: {
            number : 5
        },
        methods: {}
    })

需要注意的是，Vue.filter(‘这里为自定义过滤器的名字’，function(第一个参数固定为value,即要使用过滤器的数据))
所以传入的number值为5，过滤之后为 5 + 5 即10。另外也可以使用多个过滤器前提是他们之间并不冲突。
还有一点Vue.filter()注册全局过滤器必须在Vue实例化之前，若放在Vue实例化之后则此过滤器不生效。

3、Vue框架的优缺点以及与另外两大框架的异同点

由于我自身做项目以及日常所了解都是Vue框架，React了解甚少，Angular更是基本不懂，所以又栽了
我认为Vue的优点在于他的条理性很清楚，通过模块化，组件化，以及路由进行各自分工。另外Vue体积较小，并且是MVVM框架，更少地操作DOM，有利于提高性能，以上。
查阅资料后
与AngularJS的区别
相同点：
1.都支持指令：内置指令和自定义指令。
2.都支持过滤器：内置过滤器和自定义过滤器。
3.都支持双向数据绑定。
4.都不支持低端浏览器。
不同点：
1.AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
3.Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

与React的区别
相同点：
1.React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
补充：SX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
2.中心思想相同：一切都是组件，组件实例之间可以嵌套。
3.都提供合理的钩子函数，可以让开发者定制化地去处理需求。
补充：钩子函数：就是在生命周期执行流程中预留的一个能让我们执行自己代码的地方。叫钩子函数，很形象的，钩子钩子，挂载我们自己的东西。而钩子函数的实现，基本原理就是callback。
4.都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
5.在组件开发中都支持mixins的特性。
补充：mixins的特性：Vue 中的Mixin对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解（引自 Michael Feathers）。Mixin允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次。
不同点：React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。

4、如何处理不同页面中的异步操作

这个问题刚开始我不是特别理解HR想问的意图，在我的印象中，Vue只会渲染当前页面，其他页面在没有打开时本就不会渲染，这样就不会浪费多余的资源去处理页面。

大致就是这样，至于结果可想而知，不过这也为我下一次面试做了铺垫，希望下一次能发挥得更好

##########################分割线##############################

3.26面试所遇

1、你觉得node.js有什么用？

平常搭建web项目，都是先安装node，然后安装Vue-cli，之后便是通过指令构造项目，没有想过node.js究竟起到了何种作用，只是说了“可以提供代码运行的环境，为webpack打包提供环境”大概这样子的回答。
以下为查阅的资料
1、什么是node.js?
Node.js基于事件驱动架构和非阻塞输入/输出API，在优化应用程序的吞吐量和实时Web应用程序的可伸缩性，可用于Web开发的框架都基于无状态模型，无状态模型是在一个会话中生成的数据，未在与该用户的下一个会话中使用的情况。必须做很多工作来维护用户请求之间的会话信息。但是使用Node.js，最终有一种方法可以让Web应用程序具有实时的双向连接，客户端和服务器都可以启动通信，允许它们自由地交换数据。
2、node.js用途
1.Node.js最适合在流媒体应用程序中使用，还有一些聊天应用程序。
2.游戏服务器 - 需要一次处理数千个请求的快速和高性能服务器，这是一个理想的框架。
3.广告服务器 - 再次在这里你可以有数千个请求从中央服务器提取广告，Node.js可以是一个理想的框架来处理这个问题。
4.流服务器 - 使用Node的另一个理想方案是用于多媒体流服务器，其中客户端有请求从该服务器提取不同的多媒体内容。
以上就是对nodejs是做什么的？有哪些功能的全部介绍，如果你想了解更多有关Node.js视频教程，请关注php中文网。

2、说说js中apply用法

由于我自己在做项目中碰到this指向问题基本上用简单的箭头函数就解决了，很少用到call和apply，故而没有说的特别清楚，只是说了apply和call都是改变this指向，第一个参数即为要指向的对象，现在查了一下发现八九不离十。下面举个简单例子

function Animal() {
    this.say = function() {
        console.log('My color is ' + this.color)
    },
    this.color = 'blue'
}

var Obj = {
    color: 'red'
}

var f1 = new Animal()
f1.say.apply(Obj)

以下为输出结果

可以看到Animal实例中属性color值为’blue’，改变指向为Obj之后值为Obj中的color即red
apply和call的用法在只有第一个参数的情况下是相同的，不同的是多个参数的接收方法。

3、Vue是如何操作DOM的

这个问题我刚开始不是特别理解，
Vue中不推荐操作DOM，Vue是MVVM框架，视图与数据是双向绑定的，改变数据的同时视图也同时改变。
大致是这么回答的，但是HR说Vue的确不推荐操作DOM，但是那是不推荐我们操作DOM，Vue本身是一定要操作DOM的不然如何能够实现数据的双向绑定，我问的是这个。
这时候我才理解HR问的意思，不过我并没有深层追究这个问题所以也就无法答上来。
只是说了几个把数据作为响应式监听，等等。现在我网上找了一下似乎也没有类似的问题，故而有待考究。

以上

3.26下午笔试

今天下午去了笔试，虽然路途比较远但由于我之前并没有过笔试的经验所以也去尝试了一下。
不得不说，手写代码真是难受啊。
这其中有下面这一道题

这个问题当场我兵没有做出来，因为我忘记了arguments是个啥东西，我一度以为和伪数组有关，所以打错了。回来之后仔细研究并验证了之后才理解了这道题。
首先答案是10，2，5。
执行obj.method(fn,1)，
首先执行fn() 即console.log(this.length),这里的this指向的是fn()这个函数定义时指向的this,而非调用他的obj的this,即这里指向的是window，window下的length就是上面定义的全局变量var length = 10,所以这里是10
然后是arguments【0】()，arguments即你当前函数的参数集合，arguments【0】()就是执行函数传入的第一个作为参数的函数，即fn() ，而这里的this指向的是arguments，又因为执行obj.method(fn,1) 这里传入了两个参数，虽然第二个参数我们没有用到，但是arguments长度变为2而非1，所以arguments【0】()执行结果为2，即这里的length 为arguments实际长度，另外两个length是变量。
第三个fn.call(obj,12) 这里就是用call改变了this的指向为call, 所以this.length 值为5，传入的12并没有用到，只是混淆视听而已。

以上

---

7月面试

最近参加了几次面试，其中几个比较印象深刻的问题如下
1、vue中数据双向绑定的原理是什么？
平常在书写代码的时候，很多东西都只知道怎么用，却并不知道其原理，也导致最近面试不太顺，就连这vue最常用的数据绑定，其原理我都回答不上来。当场面试官就说是用Object.defineProperty的方法来实现的，
从简单层次上来说，数据的双向绑定，即数据变化更新视图，视图变化更新数据，要做到前者并不难，我们只需要监听该元素，在其发生改变的时候改变数据即可，主要是如何知道数据发生了变化。
这里主要用的是Object.defineProperty()这个函数,用此函数给需要双向绑定的数据进行拦截，每当该函数被读取或者被修改的时候会分别触发get()和set()函数，此时就可以知道数据发生了改变并且可以更新视图。
下面是简单的例子

let car = {}
let val = 3000
Object.defineProperty(car, 'price', {
	get() {
		console.log('被读取了')
		return val
	},
	set(newVal) {
		console.log('被修改了'),
		val = newVal
	}
})

这样子的话在读取car.price 和 修改 car.price的时候就会分别触发两个函数，从而可以更新视图。
当然这只是最基础的，再往下需要将其封装成一个方法，因为一个对象里面有许多个属性，都需要进行可观测化，上面仅仅是一个属性的实例。

再之后我们就需要通知视图更新数据，为了方便，我们需要先将所有依赖收集起来，一旦数据发生变化，就统一通知更新。其实，这就是典型的“发布订阅者”模式，数据变化为“发布者”，依赖对象为“订阅者”。
现在，我们需要创建一个依赖收集容器，也就是消息订阅器Dep，用来容纳所有的“订阅者”。订阅器Dep主要负责收集订阅者，然后当数据变化的时候后执行对应订阅者的更新函数。
订阅者Watcher在初始化的时候需要将自己添加进订阅器Dep中，那该如何添加呢？我们已经知道监听器Observer是在get函数执行了添加订阅者Wather的操作的，所以我们只要在订阅者Watcher初始化的时候出发对应的get函数去执行添加订阅者操作即可，那要如何触发get的函数，再简单不过了，只要获取对应的属性值就可以触发了，核心原因就是因为我们使用了Object.defineProperty( )进行数据监听。这里还有一个细节点需要处理，我们只要在订阅者Watcher初始化的时候才需要添加订阅者，所以需要做一个判断操作，因此可以在订阅器上做一下手脚：在Dep.target上缓存下订阅者，添加成功后再将其去掉就可以了。

实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。

2、调用promise函数的整个过程中有哪几个状态？
平常调用promise的时候并没有关注这个问题，所以在面试过程中吃亏了，pending—未决，既不是成功也不是失败，可以理解为初始状态， resolve—调用成功时候的状态，reject—调用失败时候的状态。以上
3、async函数的原理是什么？
被问到这个问题的时候是面试官问了我解决异步的方式有哪些，我先说的promise，然后说的ES6的async函数，配合await来使用，然后就问了我这个问题，因为我并没有了解过其原理，所以不清楚，后被告知说async的原理，理所当然的就是promise。
4、es6中箭头函数作用
这个平常一直在用，结果关键时候脑袋短路了一下，说的含糊不清，主要是用来解决this指向问题，譬如setTimeOut(), setInterval() 这两个函数中的this指向的是window,如果想要指向当前的object, 就需要使用() => 箭头函数，这是我自己平常箭头函数用的比较多的情况。
5、点击一个div元素的时候，会有怎么样的流程？
其实我没怎么懂这个问题，到底想问的是什么，后来面试官提示了事件冒泡和事件捕获，然后才说了这两个事件的解决方法，其中事件冒泡的js原生解决方法印象有点模糊，一直没怎么想起来，后来面试官提示了，是window.event.cancelBubble()方法，另外还有一个是stopPropagation(),都是用来阻止事件冒泡的，不同之处在于前者只支持IE浏览器，后者可以支持火狐等浏览器，故而很多情况下两者需要一起使用，但是cancelBubble在新版本的某些浏览器中已经支持使用。