2024年Web前端最新js进阶-手写js原生方法(1)，2024年最新面试时知识点都记不住咋办

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

context = context || window //如果没有传或传的值不为对象 context指向window

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;

// 插入数据需要的次数

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-QlJG4OlX-1715425651704)]

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