2021前端面试笔试题及答案

傷城~ 2023-03-01 10:24 6阅读 0赞

## 更多面试题已在小程序更新 ##

## WX搜索 【MST题库】小程序查看 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center]

## css的重绘与回流 ##

重绘：当节点需要更改外观而不会影响布局。
    
    回流：DOM结构的修改引发DOM几何尺寸变化的时候，发生回流。
    常见的几何属性有width、height、padding、margin、left、top、border 或者是DOM节点发生增减移动。
    
    减少重绘和回流的办法。
    使用css3新增属性：translate替代top等方向值。
    避免频繁使用style，而是采用class。

## 箭头函数和普通函数的区别是什么？ ##

普通函数this：
    
    this总是代表它的直接调用者。
    在默认情况下，没找到直接调用者，this指的是window。
    在严格模式下，没有直接调用者的函数中的this是undefined。
    使用call,apply,bind绑定，this指的是绑定的对象。
    
    箭头函数this：
    
    在使用=>定义函数的时候，this的指向是 定义时所在的对象，而不是使用时所在的对象；
    不能够用作构造函数，这就是说，不能够使用new命令，否则就会抛出一个错误；
    不能够使用 arguments 对象；
    不能使用 yield 命令；

## 扫码查看更多面试题 ##

![在这里插入图片描述][20200724094929669.jpg]

## 讲一下let、var、const的区别 ##

var 没有块级作用域，支持变量提升。
    let 有块级作用域，不支持变量提升。不允许重复声明，暂存性死区。不能通过window.变量名进行访问.
    const 有块级作用域，不支持变量提升，不允许重复声明，暂存性死区。声明一个变量一旦声明就不能改变，改变报错。

## 实现一个new的伪代码 ##

创建一个对象
    连接原型
    绑定this
    返回该对象
    
    function _new(){ 
      let obj = new Object();
      let Con = [].shift.call(arguments);
      obj.__proto__ = Con.prototype;
      let result = Con.apply(obj,arguments);
      return typeof result === 'object' ? result : obj
    }

## 原型、原型链 ##

原型链：每个被实例对象都有__proto__对象，它指向了构造该对象的构造函数的prototype属性。同时该对象可以通过__proto__对象来寻找不属于自身的属性，
    原型：就是实现继承过程中产生的一个概念。

## 继承 ##

原理是：复制父类的属性和方法来重写子类的原型对象
    
    原型继承
    构造函数继承
    组合继承
    寄生继承
    寄生组合继承
    class
    等等
    
    // 寄生组合继承方法
    function Father(...arr) { 
        this.some = '父类属性';
        this.params = arr;
    }
    Father.prototype.someFn = function() { 
        console.log(1);
    }
    Father.prototype.someValue = '2';
    function Son() { 
        Father.call(this, 'xxxx');
        this.text = '2222';
    }
    Son.protptype = Object.create(Father.prototype);
    Son.prototype.constructor = Son;

## Object,create做了什么 ##

Object._create = function(obj){ 
      function F(){ }; // 创建了一个新的构造函数F
      F.prototype = obj; // 然后将构造函数F的原型指向了参数对象obj
      return new F(); // 返回构造函数F的实例对象，从而实现了该实例继承obj的属性。
    }

## 闭包 ##

闭包就是有权访问一个函数内部变量的函数，也就是常说的函数内部嵌套函数，内部函数访问外部函数变量，从而导致垃圾回收机制没有将当前变量回收掉。这样的操作，有可能会带来内存泄漏。好处就是可以设计私有的方法和变量。

## 垃圾回收机制（闭包的延伸） ##

js拥有特殊的垃圾回收机制，当一个变量在内存中失去引用，js会通过特殊的算法将其回收，并释放内存。
    分为以下两个阶段：
    
    标记阶段：垃圾回收器，从根对象开始遍历，访问到的每一个对象都会被标示为可到达对象。
    清除阶段：垃圾回收器在对内存当中进行线性遍历，如果发现该对象没有被标记为可到达对象，那么就会被垃圾回收机制回收。
    这里面牵扯到了引用计数法，每次引用都被会‘➕1’ 如果标记清零，那么就会被回收掉。

## 简述深浅拷贝 ##

浅拷贝
    	通常需要拷贝的对象内部只有一层的这种对象。
    	常用的方法
    
    	Object.assign方法来实现
    	扩展运算符 ...obj
    
    深拷贝
    	通常是嵌套二层或以上的复杂对象
    	常用方法
    
    	JSON.parse(JSON.stringfy(object)); 该方法忽略掉undefined、忽略Symbol、忽略function。只适合简单深拷贝
    	手写递归方法去实现。
    	通过第三方库提供的深拷贝实现。

## 函数的节流和防抖 ##

防抖函数：将多次触发变成最后一次触发；
    
    
    function debounce(fn,wait){ 
      let timer = null;
      return function (){ 
        let arg = arguments;
        if(timer){ 
          clearTimeout(timer);
          timer = null;
        }
        timer = setTimeout(()=>{ 
           fn.apply(this,arg)
        },wait)
      }
    }
    function clg(){ 
      console.log('clg')
    }
    window.addEventListener('resize',debounce(clg,1000))

## 节流函数：将多次执行变成每隔一个时间节点去执行的函数 ##

## call、apply区别 ##

相同点：都是重定向this指针的方法。
    不同点：call和apply的第二个参数不相同，call是若干个参数的列表。apply是一个数组
    
    手写一个call方法
    
    
    // 在这之前需要重新认识一下call方法的执行操作
    let mock = {  value : 1 };
    function mockNum(){ 
     console.log('value',this.value)
    }
    mockNum.call(mock) // 改变了函数中this的指向，当前this指向了mock对象
    
    转换一下实现方法就是
    
    let mock = { 
      value:1;
      mockNum:function(){ 
         console.log('value',this.value)
      }
    }
    mock.mockNum();
    所以经过上面这个操作的演化而来的结果就是如下步骤：
    1. 将函数设为一个对象的属性
    2. 并将这个函数的属性调用
    3. 删除该函数
    
    Function.prototype.Mycall = function(context){ 
      let obj = context || window;
      obj.fn = this; // 这一步可以看做是this其实就指的当前函数。
      let args = [...arguments].slice(1); // 返回删除第一个元素的数组；
      let result = obj.fn(...args); // 调用函数
      delete obj.fn;
      return result;
    }
    
    // 操作一下
    let mock = {  value : 1 };
    function mockNum(){ 
      console.log('value',this.value);
    }
    mockNum.Mycall(mock) // value 1

## 然后根据上面的方法再手写一个apply方法 ##

Function.prototype.Myapply = function (context){ 
        let obj = context || window;
        obj.fn = this;
        let result = arguments[1] ? obj.fn(arguments[1]) : obj.fn([]);
        delete obj.fn;
        return result;
    }
    let mock3 = { 
      arr: [1, 2, 3, 4, 5],
    };
    function arrx2(arr) { 
      return this.arr.concat(arr).map((x) => x * 2);
    }
    console.log("arrx2", arrx2.myApply(mock3));

## bind ##

bind方法是直接返回一个新的函数，需要手动去调用才能执行。
    
    创建一个新函数，当这个新函数被调用时，bind()方法的第一个参数将作为运行他的this，之后的一系列参数将会在传递的实参传入作为他的参数；
    特点：1. 返回一个函数。 2. 可以传入参数；
    手写一个bind方法
    
    例如：
    let foo = {  value : 1 };
    function bar() { 
      console.log('bindFoo',this.value);
      // return this.value // 考虑到函数可能有返回值
    }
    let bindFoo = bar.bind(foo);
    bindFoo() // 1 // 如果有返回值的情况下 bindFoo() === 1;
    
    Function.prototype.Mybind = function(obj){ 
      if(typeof this !== 'function') throw new Error('not a function');
      let self = this;
      let args = [...arguments].clice(1);
      return function F(){ 
        if(this instanceof F){ 
          return new self(...args,...arguments);
        }
        return self.apply(obj,args.concat([...arguments]));
      }
    }

## 关于函数的调用 ##

作为一个正常的函数调用
    函数作为方法调用
    使用构造函数调用函数
    作为函数方法调用函数

## 捕获和冒泡 ##

捕获：就是从根元素开始向目标元素递进的一个关系；从上而下
    冒泡：是从目标元素开始向根元素冒泡的过程；想象一下水里的泡泡从下而上。
    
    ⚠️stopPropagation 通常理解它是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。

## instanceof原理 ##

instanceOf用来判断右边的prototype是否在左边的原型链上，告诉我们左边是否是右边的实例。
    
    
    function instanceof(left, right) { 
        // 获得类型的原型
        let prototype = right.prototype
        // 获得对象的原型
        left = left.__proto__
        // 判断对象的类型是否等于类型的原型
        while (true) { 
            if (left === null){ 
                return false  
            }
            if (prototype === left){ 
                return true
            }
            left = left.__proto__
        }
    }

## typeof ##

typeof 检测对象，除开函数是function类型之外。像常见的数组，对象或者是正则,日期等等都是object；
    需要注意一下：
    
    
    typeof Symbol() // 'symbol'
    typeof null // object
    typeof undefined // undefined
    typeof null检测输出object因为js最初版本，使用的是32位系统，类型的标签存储在每个单元的低位中000是object类型。null全是0，所以当我们使用typeof进行检测的时候js错误的判断位object

## 简述cookie、localstorage、seesionstorage ##

cookie	4kb左右	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	默认是关闭浏览器后失效, 但是也可以设置过期时间
    localstorage	5M	仅在浏览器中保存，不参与和服务器的通信	除非手动被清除，否则永久保存
    SessionStorage	5M	仅在浏览器中保存，不参与和服务器的通信	仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间

## js跨域如何解决 ##

目前暂时已知的跨域方法是：
    
    jsonp跨域，原理：script标签没有跨域限制的漏洞实现的一种跨域方法，只支持get请求。安全问题会受到威胁。
    cors跨域，通过后端服务器实现，Access-Control-Allow-Origin。
    postMessage window的一个属性方法。
    websocket
    nginx反向代理
    iframe跨域

## webpack proxy跨域 ##

首先需要明白webpack proxy跨域只能用作与开发阶段，临时解决本地请求服务器产生的跨域问题。
    并不适合线上环境。配置在webpack的devServer属性中。
    webpack中的devsever配置后，打包阶段在本地临时生成了一个node服务器，浏览器请求服务器相当于请求本地服务。

## 深度优先和广度优先 ##

广度优先：尝试访问尽可能靠近它的目标节点，然后逐层向下遍历，直至最远的节点层级。
    深度优先：从起始节点开始，一直向下找到最后一个节点，然后返回，又继续下一条路径。知道找遍所有的节点。

## 浏览器禁用cookie该如何处理 ##

一般会用到url重写的技术来进行会话跟踪，每一次的交互，都会在url后面加上sid=xxx类似的参数。服务端根据这种方式来识别用户。

## setTimeout与setInterval的区别 ##

setTimeout表示间隔一段时间之后执行一次调用，而setInterval是每隔一段时间循环调用，直至清除。
    
    内存方面，setTimeout只需要进入一次宏队列，setInterval不计算代码执行时间，有可能多次执行多次代码

## 更多面试题已在小程序更新 ##

## WX搜索 【MST题库】小程序查看 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/1043474ed7b84be2a1ab02b6b047c7d0.png
[20200724094929669.jpg]: /images/20230209/ae836eb11bbd43b1abccbc7f5b988af1.png