react高频面试题（JavaScript篇）

前言

网上的React面试题文章有非常多，但很多题都过时了。

有的文章只包含了react相关题目，但是真正面试不只考react问题，js，css，http，es6都会涉及的到。

此片文章，针对以上几点，整理了一些时下高频的react前端面试题，并且做出相应的解析。

---

其他篇

react高频面试题（React篇）

react高频面试题（css篇）.

react高频面试题（http&&浏览器篇）.

---

# 正文

1.var/let/const区别？什么是块状作用域？const a ={}; a.x=1能不能修改？

var/let/const区别：
var：使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；

let：使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升，不可以重复声明；

const：使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。

块状作用域：一般用大括号就代表一个作用域，外层作用域无法获取到内层作用域。函数可以在块级作用域中声明。

const a ={}; a.x=1能不能修改：可以修改。对于复合类型的变量，const只是修饰栈空间的地址不可更改，并没有修饰堆空间的值不可修改。

---

2.call、apply、bind区别？实现bind。

1. 在es5中，this永远指向最后调用它的那个对象。
2. 如何改变this指向，使用es6的箭头函数、函数内部使用_this = this；使用bind、call、apply
3. call，apply，bind的第一个参数都是this要指向的对象。
4. bind是返回对应函数，便于稍后调用，call与apply是立即调用
5. call传递参数是按顺序传入，apply是把参数放入数组中 。
   call(this指向的对象,参数1,参数2,参数3…);
   apply(this指向的对象，[参数1,参数2,参数3…]);

bind实现：

 function.prototype.bind=function (obj){
    
	 var that=this; 
	 return function(){
    
	 	that.apply(obj,arguments); 
	 } 
} 

call实现：

Function.prototype.myCall = function (context, ...args) {
   
  var _context = context || window;
  let fn = Symbol()
  context[fn] = this;
  context[fn](...args)
  delete context[fn]
}

apply实现：

Function.prototype.apply = function (context, args) {
   
	if (!Array.isArray(args)) {
   
      throw new Error("newApply的第二个参数只能是数组哦");
   }
    var context = Object(context) || window
    let fn = Symbol()
	context[fn] = this;
	context[fn](...args)
	delete context[fn]
}

bind是返回一个函数，函数中使用apply，将this绑定为bind中传入的参数，这里返回的函数中，已经固定将this绑定为obj了，后面再次进行this绑定都会失效！

---

3.闭包概念，最主要的还是问闭包的场景？

闭包：是指有权访问另外一个函数作用域中的变量的函数。 或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用。

优点：

（1）可以重复使用变量，并且不会造成变量污染

（2）可以用来定义私有属性和私有方法

缺点：闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

使用场景：

（1）读取函数内部的变量

（2）封装功能时(需要使用私有的属性和方法)，函数防抖、函数节流、函数柯里化、给元素伪数组添加事件需要使用元素的索引值。

---

4.防抖、节流的含义，使用场景？手写一下？

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

常见的场景：
防抖：

（1）按钮提交场景:防止多次提交,只提交最后一次.

（2）搜索框联想场景:防止联想发送请求,只发送最后一次输入.

节流：

（1）拖拽场景:固定时间只执行一次,防超高频次触发.

（2）缩放场景:监控浏览器resize,scroll

防抖手写：

function debounce(func, wait) {
   
    let timeout;
    return function () {
   
      const context = this;//获取 this
      const args = arguments;//参数的传递
      if (timeout) clearTimeout(timeout);
      timeout = setTimeout(() => {
   
        func.apply(context, args)
      }, wait);
    }
  }

<button onClick={
   debounce(() => {
    console.log('防抖')},1000)}>节流</button>

节流手写：

function throttle(func, wait) {
   
    let timeout;
    return function() {
   
        let context = this;//获取 this
        let args = arguments;//参数的传递
        if (!timeout) {
    //当timeout为null时
            timeout = setTimeout(() => {
   
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}

 <button onClick={
   throtle( () => {
    console.log(