2020.04前端高频面试题总结高频面试题：理解js原型链，继承，闭包，this指向，性能优化，vue和react，d

高频面试题：

理解js原型链，继承，闭包，this指向，性能优化，vue和react，diff算法，http和https，设计模式，算法

1. 原型与原型链

js构造函数，有prototype属性指向他的原型对象，原型对象有一个construction属性指向他的构造函数，构造函数的实例化对象有一个__proto__属性指向他的构造函数的原型对象，访问对象中没有的属性和方法是，会去其原型上找，原型上没有就去其原型的原型上找。

实例化对象都有一个__proto__属性，Object和Function都是由Function实例化来的，所以有

Function.__proto__ === Function.prototype Object.__proto__ === Function.prototype

构造函数有一个prototype属性，指向原型对象

Object.prototype -> null

    [].__proto__  ===  Array.prototype
    [].constructor === Array
    Array.prototype.__proto__  ===  Object.prototype

    Object.prototype.__proto__   指向null
    let a = {} ;  
    a.__proto__  ===  Object.prototype   
    a.constructor === Object

    const fn = function() {}
    fn.__proto__ == Function.prototype
    Function.__proto__ === Function.prototype
    Object.__proto__ === Function.prototype
    Object.__proto__ === Function.__proto__

其他博客地址： www.bilibili.com/video/BV1Q6…

2. 继承

js继承主要依靠原型链实现。

原型链继承

实现：子类的原型指向父类的实例;

问题：1. 父类的引用数据类型会被子类实例共享；2. 创建子类实例时无法像父类构造函数传参；

构造函数继承

实现：在子类构造函数中调用父类构造函数

问题：无法复用，父类原型上的方法对子类不可见；

组合继承

实现：原型链 + 构造函数

问题：调用了两次父类构造函数，资源浪费

原型式继承

实现：达格拉斯提出，借助原型基于已有对象创建新对象

问题：父类的引用类型会被子类实例共享

    function onject(o) {
        function F() {};
        F.prototype = o;
        return new F();
    }

寄生式继承

实现：类似工厂模式，创建函数，在函数内部实现继承，然后返回对象

问题：无法复用

寄生组合式继承

解决组合式继承两次调用父类构造函数问题；普遍认为的终极解决方案

实现：组合继承 + 寄生式继承，复制一个父类对象的原型，修正construction指向，最后把复制的对象给到子类的原型对象

其他博客地址： juejin.cn/post/684490…

3. 闭包

定义：有权访问另一个函数作用域内的变量的函数。创建闭包的常见形式是在一个函数内部创建另一个函数，内部函数引用了外部函数的变量，不正确使用闭包可能造成内存泄漏。

    var name = "The Window";
    var object = {
        name : "My Object",
        getNameFunc : function(){
          return function(){
            return this.name;
          };
        }
    };
    alert(object.getNameFunc()());

优点：定义私有变量和方法，不污染全局环境；可以访问函数内部的变量；

缺点：闭包占用内存高，因为会携带包含过他的函数作用域，不正确使用闭包可能造成内存泄露；

使用场景： 1. 封装私有变量和方法； 2. 防抖节流；

内存泄漏：

闭包；2. 意外的全局变量；3. 未清除的定时器；4. dom的引用；

this指向：

全局函数在this指向window; 2.在对象的方法中this指向调用该方法的对象；3.匿名函数的执行环境具有全局性，所以this指向window; 4.箭头函数中this指向负作用域中的this;

其他博客地址：

www.cnblogs.com/huanxiongs0…

性能优化减少http请求次数，减小请求资源大小；提高响应和加载速度；优化加载时机；优化加载方式；

gzip压缩代码；
压缩图片，使用雪碧图、webp、iconfont;
使用http2：多路复用；头部压缩；服务端推送；二进制分帧；
使用cdn内容分发网络，减少网络拥挤，就近获取资源；
使用缓存，强缓存和协商缓存；
减少重排和重绘；
懒加载预加载preload、prefetch，服务端渲染，异步加载js async defer；
使用骨架屏；白屏loading;

juejin.cn/post/684490…

juejin.cn/post/691147…

es6： promise, map, set

vue和react对比
diff算法

http和https
项目难点，大文件上传,

设计模式
算法