web常忘面试题

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 1. 原始数据类型和引用类型的区别 原始数据类型是栈存储，是系统自动分配，并且自动释放的， 而引用类型是堆存储，是动态分配的内存，并不会自动释放。 2. 栈内存和堆内存 添加链接描述 3. null和undefined的差异 null转换为数字为0，而undefined转换成数字为NAN undefined代表声明了一个变量但是没有赋值 null是一个特殊对象，初始值设置为null的对象或变量会被回收 4. 面向对象三大要素 封装 继承 多肽 5. 面向对象和面向过程的区别吗 面向对象是研究所有情况下对象的表现和变化 面向过程是研究的问题所需的每个步骤 6. 怎么实现封装和继承 封装就是封装对象也就是创建对象，创建对象有三种方式: (1)直接{}声明 var obj1 = { name: 'Lisa', age: '18' }

(2) new创建
        var obj2 = new Object();
        obj2.name="Lisa";

    (3)构造函数
        function Farther() {
            this.name="Lisa"；
            this.age = "18";
        }
        var obj3 = new Father();

继承就是通过构造函数创建的实例对象会继承构造函数中的属性以及构造函数的原型函数。有借用继承，组合继承，原型继承，寄生继承，寄生组合继承

javascript function Super() { this.name = "Lisa"; } Super.prototype.sayName = function () { alert("i am Lisa"); }; function Sub() { this.age = 18; } Sub.prototype = new Super(); Sub.prototype.sayAge = function () { alert("i am 18"); }; const obj = new Sub(); obj.sayName(); //alert("i am 18")

Es6可以用class的extend继承

7. instanceof和typeof
typeof检测数据类型，只能检测出sting,number,boolean,null,undefined,function,object(Array和object);无法区分对象和数组 instanceof检测对象是谁的实例 ，也就是判断构造函数，那么就可以判断数组和对象 比如： obj = {color: 'red'};
console.log(obj instanceof Object); // true

8. new的作用 const obj = new Sub(); javascript var obj = {}; obj.__proto__ = Funciton.prototype; Funciton.call(obj);
   • 创建一个空对象/实例
   • 将空对象的原型指向构造函数的原型对象
   • 将this指向这个空对象，并且调用构造函数
9. 一句话概述什么是闭包 特殊的作用域对象
10. 箭头函数有不同
    • 函数体内this指向定义时所在的对象，而不是使用时现在的对象
    • 不可以当做构造函数，也就是说这样定义的函数不能使用new命令，不然会报错
    • 箭头函数没有arguments,如果想拿到实参，可以用rest剩余参数
    • 不可以使用yield命令，因此箭头函数不能用作Generator函数
    • 箭头函数没有自己的this，使用call,apply,bind不能改变函数体内this指向；
11. ...args剩余参数和 arguments对象的区别
    • 剩余参数只包含那些没有对应形参的实参，而arguments包含的是所有的实参
    • 剩余参数是真正的数组，可以使用数组的方法，而arguments是一个类数组对象。
    • arguments里还包含一些其他的属性，比如arguments.callee代表函数本身
    • 在函数体内，函数本身的length就是他的形参的个数，只有arguments.length是实参的个数 javascript function test(a,b,c){ console.log(arguments.callee.length); console.log(test.length); console.log(arguments.length); }
12. 理解call,apply,bind？ 改变this指向并且传参； 场景： 判断数据类型Object.prototype.toString.call({}) call'类数组' 借用数组的方法 apply，Math.max/min方法不用展开数组Math.max.apply(Math,[1,2,3]) 继承：借用父类 bind类似闭包使用，保存函数参数 bind绑定回调函数callback.bind(this)

13. 什么是yield,什么是generator函数 当我们写一个函数 在function后面或者函数名称前加* ，然后调用这个函数返回的就是Generator，yield是Generator的关键字；Generator可以结合yield语句控制一部分函数的执行，以及剩余何时执行，a = (*main(){})(); a.next();

14. script 标签上的defer和async标签的作用和区别 不加任何属性的script标签: 当解析html时如果遇到外联的js文件，会中止解析html，而先去下载js文件，解析js文件，结束后继续解析html可能产生页面白屏，或者部分页面白屏 加上defer: 在解析HTML时，如果遇到外联，会开启新线程去下载js,下载完先不解析，等html解析完成后开始解析js,,如果有多个带defer的script外联js,按照顺序下载 家async： 在解析HTML时，如果遇到外联，会开启新线程去下载js，下载完成后解析js,并中止html解析，js解析完成后解析html,谁先下载完先解析谁

15. react的生命周期 设置默认属性 constructor()初始化状态 componentWillMount() 组件即将被渲染 render() 组件渲染 componentDidMount() 组件被渲染后 componentWillReceiveProps() 接受到props shouldComponentUpdate() 状态发生变化要不要更新 componentWillUpdate()更新前 componentDidUpdate()更新后 componentWillUnmount()销毁前
16. wepack
17. 缓存
18. cdn的实现原理
19. 闭包(bind实现)

```javascript for(var i = 1;i<=5;i++){ (function(i){ setTimeout(function(i){console.log(i)},1000) })(i) }

for(var i = 1;i<=5;i++){
    setTimeout(function(i){console.log(i)}.bind(null,i),1000)
}

``` 20. let,var let有自己的作用域 21. Map和Set Set可以去重，set的数组保留原数组的类型，对象不相等 new Set([0,2,2,1,0,3,2,'3']) //Set(5){0, 2, 1, 3, "3"} Map是set对象 new Map(new Map([['name', 1],['age','2']])) //Map(2){"name" => 1, "age" => "2"} 22. 防抖函数

js const debounce = (fn, time = 300) => { let timeOut; return function (e) { clearTimeout(timeOut); e.persist && e.persist(); timeOut = setTimeout(() => { fn(e); }, time); }; }; 23. react-redux 24. Promise和axios 25. eventloop 26. react-hooks怎么实现的？ 27. useEffect能代替哪几个生命周期钩子 28. vue和react的区别 29. react的生命周期 30. grid和flex、table三种布局的区别？ 31. js/css沙箱隔离？为什么要隔离？微前端是怎样做css隔离的？ 32. webpack和vite的区别？bundle.js打包和不打包的对比？先去了解下vite? 33. 微前端有哪些方式？基础原理？ 34. 什么场景下会取消请求？ 35. get和post的基础开销？