高级前端面试题 js 2

对比代码可以知道，子类的继承都是成功的，但是问题出在，子类的 __proto__ 指向不一样。

ES5 的子类和父类一样，都是先创建好，再实现继承的，所以它们的指向都是 [Function] 。

ES6 则得到不一样的结果，它指向父类，那么我们应该能推算出来，它的子类是通过 super 来改造的。

根据 es6--阮一峰 在class继承里面的说法，是这样子的：

引用阮一峰的 ECMAScript6入门 的class继承篇

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

1、class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。

2、class 声明内部会启用严格模式。

3、class 的所有方法（包括静态方法和实例方法）都是不可枚举的。

4、class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。

5、必须使用 new 调用 class。

6、class 内部无法重写类名

解析：第 7 题

第 8 题：setTimeout、Promise、Async/Await 的区别

其中settimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行； promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行；async函数表示函数里面可能会有异步方法，await后面跟一个表达式，async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行。

解析：第 8 题

第 9 题：（头条、微医）Async/Await 如何通过同步的方式实现异步

async await 用于把异步请求变为同步请求的方式,第一个请求的返回值作为后面一个请求的参数,其中每一个参数都是一个promise对象

例如：这种情况工作中会经常遇到

(async () => {
    var a = await A();
    var b = await B(a);
    var c = await C(b);
    var d = await D(c);
})();

解析：第 10 题

第 11 - 20 题

第 11 题：（携程）算法手写题

已知如下数组：

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组

    var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
    // 方法一
    console.log(Array.from(new Set(arr.flat(Infinity))).sort((a, b) => a - b))
    // 方法二
    console.log(Array.from(new Set(arr.toString().split(‘,‘))).map(Number).sort((a, b) => a - b))

    // 方法三
    // 第一步：扁平化
    let newArr = [];
    function flat(originArr) {
        if ({}.toString.call(originArr) === ‘[object Array]‘) {
            for (let i of originArr) {
                if ({}.toString.call(i) === ‘[object Array]‘) {
                    arguments.callee(i)
                } else {
                    newArr.push(i)
                }
            }
        }
        return newArr;
    }
    console.log(flat(arr))
    // 第二步：去重
    var newArr1 = [];
    for (let i of newArr) {
        if (!newArr1.includes(i)) newArr1.push(i);
    }
    // 第三步：排序 可以采用相关算法处理
    console.log(newArr1.sort((a, b) => a - b))

    setTimeout(() => {
        // callback 函数体
    }, 1000)

    function* fetch() {
        yield ajax(‘XXX1‘, () => { })
        yield ajax(‘XXX2‘, () => { })
        yield ajax(‘XXX3‘, () => { })
    }
    let it = fetch()
    let result1 = it.next()
    let result2 = it.next()
    let result3 = it.next()

async function test() {
        // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
        // 如果有依赖性的话，其实就是解决回调地狱的例子了
        await fetch(‘XXX1‘)
        await fetch(‘XXX2‘)
        await fetch(‘XXX3‘)
    }

解析：第 12 题

第 13 题：（微医）Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？

    const promise = new Promise((resolve, reject) => {
        console.log(1)
        resolve()
        console.log(2)
    })

    promise.then(() => {
        console.log(3)
    })

    console.log(4)

执行结果是：1243
promise构造函数是同步执行的，then方法是异步执行的

解析：第 13 题

第 14 题：（兑吧）情人节福利题，如何实现一个 new

先理清楚 new 关键字调用函数都的具体过程，那么写出来就很清楚了

首先创建一个空的对象，空对象的 ___proto____属性指向构造函数的原型对象
把上面创建的空对象赋值构造函数内部的this，用构造函数内部的方法修改空对象
如果构造函数返回一个非基本类型的值，则返回这个值，否则上面创建的对象

function _new(fn, ...arg) {
    var obj = Object.create(fn.prototype);
    const result = fn.apply(obj, ...arg);
    return Object.prototype.toString.call(result) == ‘[object Object]‘ ? result : obj;
}

 

解析：第 14 题

第 15 题：（网易）简单讲解一下http2的多路复用

解析：第 15 题

第 16 题：谈谈你对TCP三次握手和四次挥手的理解

解析：第 16 题

第 17 题：A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态

如果A 与 B 建立了正常连接后，从未相互发过数据，这个时候 B 突然机器重启，问 A 此时处于 TCP 什么状态？如何消除服务器程序中的这个状态？（超纲题，了解即可）

解析：第 17 题

第 18 题：（微医）React 中 setState 什么时候是同步的，什么时候是异步的？

解析：第 18 题

第 19 题：React setState 笔试题，下面的代码输出什么？

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }

  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};
复制代码

 

解析：第 19 题

第 20 题：介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？

解析：第 20 题