面试--查缺补漏

2021/04/02

XX信息技术（上海）有限公司

1. 信息登记表

2. 笔试（4道题）

（1）js 里的事件循环，代码输出顺序
（2）对象里面的函数，普通函数和箭头函数里的 this 指向问题
（3）es6 语法实现类继承

class Parent {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}

class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    sayAge() {
        console.log(this.age);
    }
}

let child = new Child('lily', 24);
child.sayName();
child.sayAge();

（4）实现一个函数，将字符串 ‘get-last-word’ 转换为 ‘getLastWord’ 并输出

3. 一轮技术面

（1）看程序，判断输出（var，立即执行函数）

var name = 'world';
(
    function () {
        if (typeof name === 'undefined') {
            var name = 'jack';
            console.log('Hello, ', name);
        } else {
            console.log('Hello, ', name);
        }
    }
)();

输出：Hello, jack
原因：var 声明的变量存在变量提升。函数内的 var name 会提升到函数顶部，这样的话，typeof name === ‘undefined’ 条件判断为 true，就会走第一个分支逻辑。

（2）rem 实现响应式布局，以及原理
参考链接

rem 实现的其实是弹性布局，是响应式布局的一种。本质或者说原理，其实就是等比缩放。最好的弹性布局方案是，rem+js方案，同时还要解决noscript问题，解决字体问题，解决屏幕过宽问题。
（1）在 dom load, resize, 屏幕旋转这几个时机，设置根元素 (html) 的宽度为屏幕宽度除以100：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';
（2）设置 body 元素的字体大小，修正后续字体的大小设置：
body {font-size: 16px}
（3）后续字体大小设置使用 em 作为单位，数值的计算：
em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN
（4）针对禁用 js 的用户，给出提示：
<noscript>开启JavaScript，获得更好的体验</noscript>
（5）后续尺寸设置，使用 rem 作为单位，数值的计算：
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN
（6）针对非常宽的屏幕时，设置 body 的最大宽度，并居中：
body { /* 防止页面过宽 */ margin: auto; padding: 0; width: 10rem; /* 防止页面过宽 */ }

（3）webpack loader 加载/执行顺序
解析 less 的 loader 配置：

module: {
	rules: [
		{
			test: /\.less$/,
			use: [
				'style-loader',
				'css-loader',
				'less-loader'
			]
		}
	}
}

webpack 中的 loader 的执行/加载顺序是从右往左的：less-loader -> css-loader -> style-loader
至于为什么是从右往左，而不是从左往右，这是因为，函数组合方式有 2 种：pipe 方式（x | g | f）和 compose 方式（f(g(x))），而 webpack 中选择了从右往左的 compose 的方式而已。

（4）webpack 可以多个出口吗
（5）typeof null? null instanceof Object?

（6）箭头函数的 this 指向问题

箭头函数不会创建自己的 this，而是会从自己作用域链的上一级继承 this 的值。

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
    console.log(this.age);
  }, 1000);
}

var p = new Person();

（7）http 的 304 状态码以及协商缓存
（8）Promise.all，Promise.resolve

（9）vue 的 computed 以及 watcher 的区别
（10）vue-router 的两种模式
（11）事件循环，setTimeOut
（12）vue 样式防止污染，scoped
（13）es6 实现数组扁平化的方法

（14）BFC 以及怎么能触发 BFC
BFC 特点：

（1）成为 BFC 的元素，可以把内容都包起来；BFC 内部的块级元素存在垂直 margin 重叠：

（2）BFC 与 BFC 之间是互不干扰的：

会触发 BFC 的条件：

4. 二轮技术面

（1）业务场景分析，一个登录表单页面，一个列表页面
（2）印象最深的一个项目以及遇到的一个印象深刻的问题，如何解决的
（3）介绍项目
（4）能接受加班多久？能接受 995吗？

5. hr 面

（1）职业发展规划
（2）希望自己的同事上级是怎么样的
（3）是否能接受 995
（4）离职原因

XX

电话面试

（1）箭头函数 this 指向问题
（2）使用过哪些 es6 的特性
（3）var，let，const
（4）改变函数 this 指向的几种方式
（5）闭包的概念以及日常开发使用到的地方
（6）防抖和节流的实现

function debounce(func, delay) {
    let timer;
    return function (args) {
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
            func.call(this, ...args);
        }, delay);
    }
}

function throttle(func, delay) {
    let run = true;
    return function (args) {
        if (!run) {
            return;
        }
        run = false;
        setTimeout(() => {
            func.call(this, ...args);
            run = true;
        }, delay);
    }
}

（7）v-model 如何实现双向绑定
（8）对原型链的理解
（9）vue-router 的理解
（10）vue 里面父子组件如何通信
（11）业务场景分析，怎么处理一个列表渲染很慢的问题