字节跳动企业应用前端日常实习一二面面经

// 发布者,订阅中心
class Dep {
  constructor() {
    this.subs = [];
  }
  // 此处的sub是依赖收集时，Dep.target也就是当前正在执行的watcher
  addSubs(sub) {
    if (this.subs.indexOf(sub) < 0) {
      this.subs.push(sub);
    }
  }
  notify() {
    this.subs.forEach(item => item.update())
  }
}
Dep.target = null;

// 订阅者
class Watcher {
  constructor(obj, key, updateCb) {
    this.data = obj;
    this.key = key;
    this.updateCb = updateCb;
    this.value = this.get()
  }
  get() {
    Dep.target = this;
    this.value = this.data[this.key];
    Dep.target = null;
    return this.value;
  }
  update() {
    const oldValue = this.value;
    const newValue = this.get();
    this.updateCb(newValue, oldValue);
  }
}

// observer类 劫持数据
class Observer {
  constructor(obj) {
    this.data = obj;
    if (this.data == null || typeof this.data !== "object") {
      return;
    }
    if (Array.isArray(this.data)) {
      this.observeArray();
    } else {
      this.walk();
    }
  }
  walk() {
    for (let i in this.data) {
      this.defineReactive(this.data, i);
    }
  }
  observeArray() {
    for (let i = 0; i < this.data.length; i++) {
      observe(this.data[i]);
    }
  }
  defineReactive(obj, key) {
    let val = obj[key];
    observe(val);
    const dep = new Dep();
    Object.defineProperty(obj, key, {
      get() {
        if (Dep.target) {
          dep.addSubs(Dep.target)
        }
        return val;
      },
      set(newVal) {
        if (newVal === val) {
          return;
        }
        val = newVal;
        observe(val);
        dep.notify();
      }
    })
  }
}
// 数据监测方法
function observe(data) {
  new Observer(data);
}

// 写一个最简单的例子
const obj = {
  a: 1
};
observe(obj);
new Watcher(obj, "a", (newVal, oldVal) => {
  console.log("newVal", newVal);
  console.log("oldVal", oldVal + '\n');
});
obj.a = 2;
obj.a = 3;

<template>
  <div class="sticky" :style="Position">
    <div class="sticky-wrap">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "sticky",
  data() {
    return {};
  },
  computed: {
    Position() {
      var position = this.support("position", "sticky")
        ? "sticky"
        : "relative";
      return "position:" + position;
    },
  },
  mounted() {
    if (this.support("position", "sticky")) {
        return;
      }
      const sticky = this.$el;
      const Wrap = this.$el.querySelector(".sticky-wrap");
      const util = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
              Wrap.style.position = 'absolute'
            } else {
              Wrap.style.position = 'fixed'
            }
        })
      }, {
        // 这个参数忘记了，大概是目标元素的可视比例
      })
      util.observe(Wrap)
  },
  methods: {
    support(attr, value) {
        // 主要是测试是否兼容sticky
    }
  },
};
</script>

var a = {};
setValue(a, "b.c", 10);
a = {
  b: {
    c: 10
  }
}

function debounce(fn, wait, immediate) {
    let timer = null
    return function () {
        let context = this
        let args = arguments
        if (timer) clearTimeout(timer)
        if (immediate) {
            let call = !timer
            timer = setTimeout(() => {
                timer = null
            }, wait)
            if (call) fn.apply(context, args)
        } else {
            setTimeout(() => {
                fn.apply(context, args)
                timer = null
            }, wait)
        }
    }
}

traverse(document.getElementById('root'));
=>
["DIV"]
["DIV", "P"]
["DIV", "SPAN"]
["DIV", "SPAN", "SPAN"]
["DIV", "P"]

function traverse(root) {
  let res = []
  function dfs(root, queue) {
    queue.push(root)
    console.log(queue)
    if (!root.childNodes) {
      res.push(queue)
      queue = [root]
      return
    }
    const childs = root.childNodes
    for (let item in childs) {
      dfs(item, queue)
    }
  }
  dfs(root, [])
  return res
}

二面(7.06 严重怀疑自己)

function fn(arr) {
  return [].reduce.call(arr, (pre, next) => {
    let res = []
    pre.forEach(a => {
      next.forEach(b => {
        let temp = '' + a + b
        res.push(temp)
      })
    })
    return res
  })
}

console.log(fn([
  ['a', 'b'],
  ['n', 'm'],
  ['0', '1']
]))

// 其实也就是链式调用延时器实现sleep效果：breakfast -> 3s后 -> lunch -> 3s后 -> dinner
class U {
  constructor() {
    this.queue = Promise.resolve()
  }
  console(str) {
    this.queue = this.queue.then(() => {
      console.log(str)
    })
    return this
  }
  setTimeout(wait) {
    this.queue = this.queue.then(() => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, wait)
      })
    })
    return this
  }
}

let u = new U()

var A = function () {};
A.prototype.n = 1;
var b = new A();
A.prototype = {
  n: 2,
  m: 3
};
var c = new A();

console.log(b.n);  // 1
console.log(b.m);  // undefined
console.log(c.n);  // 2
console.log(c.m);  // 3

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2')
}
console.log('script start')
setTimeout(function () {
  console.log('setTimeOut')
}, 0)
async1()
new Promise(function (resolve) {
  console.log('promise1')
  resolve()
}).then(function () {
  console.log('promise2')
})
console.log('script end')

// 改写：
function async1() {
    return new Promise((resolve, reject) => {
        console.log('async1 start')
        async2()
        resolve()
    }).then(() => {
        console.log('async1 end')
    })
}

function async2() {
    return new Promise((resolve, reject) => {
        console.log('async2')
                resolve()
    })
}

// 输出顺序：
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeOut