作为前端面试官,我会问哪些问题?(基础篇:附答案)

基础题

我出的这套基础题,面试(当面答题,想百度是不存在的)好多人,情况都比较差,没有令我满意的,是我出题太难了么?

介绍一下js原型继承

查看答案

当我们想要从 object 中读取一个缺失的属性时,js 会自动从原型中获取它

举例:

const animal = {
  eats: true,
  sleep: true,
  voice: '',
  bark(){
    console.log(this.voice);
  },
}
const dog = {
  run: true,
  voice: 'wang~~ wang~~',
}
dog.__proto__ = animal;
console.log(dog.run) // true
console.log(dog.eats) // true
console.log(dog.bark()) // wang~~ wang~~
console.log(dog.sleep) // true

总结:

  所有的对象都有一个隐藏的 [[Prototype]] 属性,它可以是另一个对象或者 null。

  可以使用 obj.__proto__ 进行访问。

  [[Prototype]] 引用的对象称为“原型”。

  要读取 obj 属性或者调用一个方法,而且它不存在,那么就会尝试在原型中查找它。

  写/删除直接在对象上进行操作,它们不使用原型(除非属性实际上是一个 setter)。

  我们调用 obj.method(),而且 method 是从原型中获取的,this 仍然会引用 obj。

  方法重视与当前对象一起工作,即使它们是继承的。

扩展:

  构造函数继承、组合继承、寄生继承、寄生组合式继承。

说说什么是防抖、节流,在实际应用中在哪些场景会用到它们

防抖:

  连续触发的事件(高频),在单位时间T内只执行最后一次,

  若在T内再次触发,则清空定时重新计算。场景:模糊搜索

节流:

  连续触发的事件(高频),在单位时间T内只执行一次。窗口滚动,获取滚动条top

javascript如何实现跨窗口通信

若子域同源,则可以通过设置document.domain将窗口视为同源站点,进行通信,

  例如本地储存等等方式。

若不同源,我们可以在通过 postMessage(data,targetOrigin) 这个接口,进行跨窗口通信。

什么是点击劫持,如何防范

点击劫持:

  允许恶意网页以用户的名义点击 “受害站点”。

  通常恶意网页在受害网站链接之上放置一个透明 <iframe> 标签。

防范:

  服务端 header 字段 X-Frame-Options 能够允许或禁止 frame 内页面的显示。

介绍一下什么是单向链表?有哪些特点?你知道的在哪些方面有链表的应用

链表(Linked list)是一种常见的基础数据结构,是一种线性表,

  但是并不会按线性的顺序储存数据,而是在每一个节点里存到下一个节点的指针(Pointer)。

  由于不必须按顺序储存,链表在插入的时候可以达到 o(1)的复杂度,比另一种线性表顺序表快得多,

  但是查找一个节点或者访问特定编号的节点则需要 o(n)的时间,而顺序表响应的时间复杂度分别是 o(logn)和 o(1)。

特点:

  无需预先分配内存,可以充分利用计算机内存空间,实现灵活的内存动态管理

  插入/删除节点不影响其他节点

  随机访问速度较慢

  增加了结点的指针域,空间开销比较大

单向链表:

  是链表中最简单的一种,它包含两个域,一个信息域和一个指针域。

  这个链接指向列表中的下一个节点,而最后一个节点则指向一个空值。

应用:

  git commit、es6的Iterator、react的fiber算法。

前后端路由差别

前端路由(spa)纯浏览器行为,是由浏览器控制的(hash、history),

  当打开一个spa页面后,切换路由,浏览器改变地址栏url并通过js展示对应页面(组件)

后端路由,切换路由时,服务端会去匹配并查找对应资源,返回给浏览器并渲染。

是否研究过webpack,谈谈你对它的理解及loader的设计原则

本题相对开放一些。

webpack个人理解:

  webpack是划时代的,比较完美解决了前端模块依赖的问题,任何资源都是js,任何资源都可以在js中声明依赖,

  真正实现了通用的模块化开发。

loader的设计原则:

  单一职责、所有模块都是js模块,webpack 只支持js模块,所有其他类型的模块,

  比如图片,css等,都需要通过对应的loader转成js模块。

  所以在webpack中无论任何类型的资源,本质上都被当成js模块处理。

  所有的loader都是一个管道,可以把一个loader看做是一个数据管道,

  进口是一个字符串,然后经过加工,输出另一个字符串。

给定一个一维数组arr,将其按一定数量num分组为二维数组,例如: 条件为arr=[0,1,2,3,4,5,6], num=3, 结果为[[0,1,2],[3,4,5],[6]]

假设我们有一个函数 slow(x,y,z,...) ,它是 CPU 重负载的,但它的结果是稳定的,换句话说,对于相同的输入 x,y,z...,它总是返回相同的结果 XYZ,我们该如何优化,才能避免在重新计算上花费额外的时间

function slow(x,y,z) {
  // 这里可能会有重负载的CPU密集型工作
  // ...
  alert(`Called with ${XYZ}`);
  return XYZ;
}

用js实现一个发布-订阅模式

class Event{
  constructor(){
    this.pool = new Map()
  }
  broadcast(){
    const [key,...rest] = [...arguments];
    if(this.pool.has(key)){
      const func = this.pool.get(key)
      func.apply(this, rest)
    }
  }
  addEventListenering(key, func){
    this.pool.set(key,func)
  }
  removeEventListenering(key){
    this.pool.delete(key)
  }
}
const ev = new Event();
ev.addEventListenering('event1',function(param){
  console.log('发布新值了',param)
})
ev.broadcast('event1',1000); //发布新值了 1000
ev.broadcast('event1',2000); //发布新值了 2000
ev.broadcast('event1',3000); //发布新值了 3000
ev.removeEventListenering('event1');
ev.broadcast('event1',3000);

以下代码打印的是什么

function A() {
  this.a = 1;
}
A.prototype.b = 1;
const a = new A();
console.log(a.a);
console.log(a.b);
const b = new A();
b.__proto__.a = 2;
A.prototype.b = 2;
console.log(a.a);
console.log(a.b);

1 1 1 2

请输出下面代码的打印内容

var name = '小红';
var obj = {
  name: '小明',
  sayName() {
    console.log(`${this.name}`);
  },
};
var sayName = () => {
  console.log(`${this.name}`);
};
var fn = obj.sayName;
sayName();
obj.sayName();
sayName.call(obj);
obj.sayName.call(this);
fn();

小红 小明 小红 小红 小红复制代码

请输出以下代码的打印内容

new Promise((resolve) => {
  console.log(3);
  resolve();
}).then(() => {
  onsole.log(4);
});
setTimeout(() => {6
  console.log(2);
}, 0);
Promise.resolve().then(() => {
  console.log(5);
});
console.log(1);

3 1 4 5 2

下一章:20道web前端面试总结

一、CSS问题1.flex布局display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩flex:1; 子元素设置,设置子元素如何分配父元素的空间,flex:1,子元素宽度 ...