configurable: true, get () { console.log('price属性被读取了') return housePriceVal }, set (newVal) { console.log('price属性被修改了') housePriceVal = newVal } }) setTimeout(() => { const price = data.price console.log('price', price) }, 500)
setTimeout(() => { data.price = 200 }, 1000)
在node上运行的结果是：
price属性被读取了 price 180 price属性被修改了
###### 模拟vue监听data下的多个属性：
const data = { price: 180, age: 70 } const observer = function () { for (const key in data) { // 重新定义各个属性，监听起来 defineReactive(data, key, data[key]) } }
const defineReactive = (data, key, value) => {
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get () {
console.log(${key}属性被读取了)
return value
},
set (newVal) {
console.log(${key}属性被修改了)
value = newVal
// 监听到被修改了可以做各种操作
}
})
}
setTimeout(() => { console.log('price:', data.price) }, 500)
setTimeout(() => { data.price = 200 console.log('price:', data.price) }, 1000) observer()
setTimeout(() => { console.log('price:', data.price) }, 500)
setTimeout(() => { data.price = 200 console.log('price:', data.price) }, 1000) observer()
node 运行的结果：
price属性被读取了 price: 180 price属性被修改了 price属性被读取了 price: 200
# 判断
回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。
第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。
第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。
前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，**我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！**
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
