2024年最全js进阶-手写js原生方法，阿里三面后多久hr面

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

let fn = Symbol(‘fn’)

context[fn] = this

let result = contextfn //执行fn

delete context[fn] //删除方法

return result

}

//其实apply和call差别主要是在参数的传递上

bind

---

Function.prototype.myBind = function (_this,…arg) {

if(typeof this !== ‘function’){//如果不为function的话，直接报错

return throw new Error(‘must be function’)

}

let fn = this;

let fnNop = function(){};//中转

let resultFn = function(){

//需判断是否将bind返回的函数，去当做构造函数使用

fn.apply(this instanceof fnNop ? this : _this,

arg.concat(Array.prototype.slice.call(arguments)))

}

fnNop.prototype = this.prototype;

resultFn.prototype = new fnNop();//继承原函数的属性

return resultFn

}

模拟new操作

---

function MyNew(fn,…arg){

if(typeof fn !== ‘function’){

throw new TypeError(‘Type Error’)

}

let child = Object.create(fn.prototype)

let result = fn.apply(child,arg)

return result instanceof Object ? result :child

}

instanceof

=============================================================================

const myInstanceof = (left, right) => {

if(typeof left !== ‘object’ || left ===null) return false

// 基本数据类型都返回false

left = Object.getPrototypeOf(left);

right = right.prototype

while (true) {

if (left === null) return false;

if (left === right) return true;

left = Object.getPrototypeOf(left); //一层一层向上找

}

}

继承

=====================================================================

function Parent() {

this.name = ‘parent’;

}

function Child() {

Parent.call(this);

this.type = ‘children’;

}

Child.prototype = Object.create(Parent.prototype);

Child.prototype.constructor = Child;

图片懒加载

---

function lazyload() {

const imgs = document.getElementsByTagName(‘img’);

const len = imgs.length;

// 视口的高度

const viewHeight = document.documentElement.clientHeight;

// 滚动条高度

const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;

for (let i = 0; i < len; i++) {

const offsetHeight = imgs[i].offsetTop;

if (offsetHeight < viewHeight + scrollHeight) {

const src = imgs[i].dataset.src;

imgs[i].src = src;

}

}

}

渲染几万条数据不卡住页面

---

// 渲染大数据时，合理使用createDocumentFragment和requestAnimationFrame，

//将操作切分为一小段一小段执行。

setTimeout(() => {

// 插入十万条数据

const total = 100000;

// 一次插入的数据

const once = 20;

// 插入数据需要的次数

const loopCount = Math.ceil(total / once);

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】