前端面试易错题 -个人心得体会

2019-2-20

typeof ($) 是啥？|| jQuery

• function 为什么呢？
• 因为我们来看他的源码

• 我们可以看到jQuery 是直接封装的 function ,而它的 prototype 封装的才是 {} 对象 这里有可能会搞混

vue中的 使用async，如何使用，他啊实现原理是？

• 要讲清楚async，我们得先来搞清楚 Generator
• 这里讲它太长了，大家去看看 阮一峰的es6 入门 Generator 函数的语法 这一章
• 好现在让我们来回到 async 现在我们来解释 async 函数是什么？一句话，它就是 Generator 函数的语法糖。

[友情链接async到底干了啥](理解 JavaScript 的 async/await)

好了~ 他怎么实现的去看友情链接，怎么实现原理？怎么实现的让面试官见鬼去吧**告诉他怎么实现的自己去看 ! ! ! **

好吧！ 我就是打打嘴炮，同学们 要自己看看原理~~ ，不然被人问到你会xxx吗？“会” 怎么做的？ “xxxxx” 好他的实现原理是什么？ men 逼 中~ ~ ~

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

例如：

async function getStockPriceByName(name) {
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName('goog').then(function (result) {
  console.log(result);
});

他有多种形式

// 函数声明
async function foo() {}

// 函数表达式
const foo = async function () {};

// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)

// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

const storage = new Storage();
storage.getAvatar('jake').then(…);

// 箭头函数
const foo = async () => {};

好了 其他 什么并行用法啥的自己去看~~

我们来看一看官方对它的实现原理是怎么解释的吧 ！

async 函数的实现原理

async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。

async function fn(args) {
  // ...
}

// 等同于

function fn(args) {
  return spawn(function* () {
    // ...
  });
}

所有的async函数都可以写成上面的第二种形式，其中的spawn函数就是自动执行器。

下面给出spawn函数的实现，基本就是前文自动执行器的翻版。

function spawn(genF) {
  return new Promise(function(resolve, reject) {
    const gen = genF();
    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch(e) {
        return reject(e);
      }
      if(next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}

v-model 的实现原理是啥？ 如果不用v-model 这个指令 如是实现双向数据绑定

v-model的双向数据绑定很好用，面试教做人才得知，原来 v-model 只不过是一个语法糖

可能大多数童鞋都知道了！ 可是Ruodaun 我是真的没考虑过这个问题

不过今天 ~ 算是知道了 特此记录，鞭策自己 ，轮子不能用完就用完了 ，究其原理，推本溯源

例如

<input v-bind:value="iIsFoll" v-on:input="iIsFoll=$event.target.value">

每次输入都会触发input事件，所以输入时input的内容会绑定到iIsFoll中，于是iIsFoll的值就被改变

中间件中 现有 A B C 三个中间件，他的执行顺序是？

• 因为我没用过koa,用过一点点express ，我记得他的执行顺序是流体执行，然后通过参数next() 的调用来执行下一个中间件，

• 可能是面试官没用过express，其实express和koa的设计思路是不同的：

• express中间件一个接一个的顺序执行, 习惯于将response响应写在最后一个中间件中；

​ 而koa的中间件执行顺序是“洋葱圈”模型。

他纠正我是环形 执行的 也就是说 A > B > C >B >A 这样的执行顺序，但是这是koa 的执行，俗称洋葱圈

我们用这张图来理解 express 的执行顺序

koa

的执行顺序我就不说了

A > B > C >B >A 这样的执行顺序，但是这是koa 的执行，俗称`洋葱圈理解了

参考这里 就可以