摸底准备

八股第一部分

instanceof的原理

答：instanceof用于检测构造函数prototype属性是否出现在某个实例对象的原型链。

​ 它会检查右边构建函数的原型对象（prototype），是否在左边对象的原型链上。

手写

function myInstanceof(Obj, constructor) {
  let proto = Object.getPrototypeOf(Obj); //获取原型
  while (proto) {
    if (proto === constructor.pro) {
      return true;
    } else {
      proto = proto.getPrototypeOf(proto); //获取下一个原型
    }
  }
  return false;
}

new的原理

使用new命令时，它后面的函数依次执行下面的步骤。

1. 创建一个空对象，作为将要返回的对象实例。
2. 将这个空对象的原型，指向构造函数的prototype属性。
3. 将这个空对象赋值给函数内部的this关键字。
4. 开始执行构造函数内部的代码。

手写

function myNew(constructor, ...args) {
  //1.创建一个空对象
  let obj = {};
  obj.__proto__ = constructor.prototype;
  let result = constructor.apply(obj, args);
  return result instanceof Object ? result : obj;
}
//这个实现并不完整，因为没有考虑到原型链的问题，如果构造函数的原型链上有属性，那么这个属性也会被继承到实例上

js作用域的理解

原型链

[Js中prototype、[prototype]]和__proto__的区别和用法-CSDN博客

this指向问题

八股第二部分react

hooks的使用限制

通用限制

为什么React Hooks会有两条使用规则 - 掘金 (juejin.cn)

1. 只能在只能在函数组件的顶层使用或自定义Hooks中使用
2. 不能再条件语句中使用

一些反例

1. 在条件/循环语句中使用 Hooks：

function MyComponent() {
  if (someCondition) {
    useState(); // 错误！Hooks 不应在条件语句中使用
  }

  return <div>Hello, World!</div>;
}
function MyComponent() {
  for (let i = 0; i < 5; i++) {
    useState(); // 错误！Hooks 不应在循环中使用
  }

  return <div>Hello, World!</div>;
}

2. 在嵌套函数中使用 Hooks：

function MyComponent() {
  function nestedFunction() {
    useState(); // 错误！Hooks 不应在嵌套函数中使用
  }

  return <div>Hello, World!</div>;
}

3. 在类组件中使用 Hooks：

class MyComponent extends React.Component {
  componentDidMount() {
    useState(); // 错误！Hooks 不应在类组件中使用，Hooks 只能在函数组件的顶层使用
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

4. 在普通 JavaScript 函数中使用 Hooks：

function myFunction() {
  useState(); // 错误！Hooks 只能在函数组件的顶层使用
}

具体限制

1. useState的值不能直接修改
2. useEffect的回调函数中不能使用异步函数
3. useContext必须再useContext所对应的Context.Provider中使用

react hooks的原理

函数组件和闭包

react setState是同步还是异步/react的批量更新机制

答：可能是同步也可能是异步，取决于执行环境