2023前端面试题2023最新前端面试题 JS高级 JS面向对象创建对象方法+各自优缺点属性 JS高级 JS函数 J

23年四月份，在二线城市找工作，下面这些前端知识完全够用了，现在入职在写jquery，前后端不分离的，笑哭，我搁这补齐一下前端历史。但是要是一线的话，需要工程化的知识，还有各种原理必须要懂，手写代码必须强哦，甚至再来点算法题。

一些必会基础知识-JS高级

JS面向对象

对象：无序属性的集合（键值对的集合）；属性可以包括：基础值、对象、函数

创建对象方法+各自优缺点

1、字面量形式
2、工厂模式
3、构造函数模式
4、原型模式
5、构造+原型: 即支持向构造函数传参，又可以共享对方法的引用，节省内存
`
   function Person(name, age){
       this.name = name;
       this.age = age;
   };
   Person.prototype.say = function (){
       console.log(this.name+'-->'+this.age)
   }
`

属性

1、访问属性
2、定义属性
3、删除属性

JS函数

1. 具名函数
2. 匿名函数
3. 自执行函数(function(){})();
4. 递归函数
阶乘：
function fun(num){
    if(num<1){return 1;}
    return num*fun(num-1);      
}

JS 作用域

函数被创建时，创建的一个执行环境及相应的作用域链，该执行环境定论了变量或函数有权访问的其他数据；
作用域链的首位始终是当前执行环境的变量对象，第二位是外部函数的活动对象...直到作用域终点的全局执行环境。
作用域链是全局的、线性的。
1. 全局执行环境
2. 局部执行环境

闭包

外部函数返回的，持有外部函数局部变量的内部函数
function say(){
    let name = 'l';
    return function(){
        return name;
    }
}
有什么应用场景？

this

JS中的关键字，函数运行时，自动生成的内部对象，只能在函数内部使用，this的指向是由执行环境决定的
1. 对象环境中，指向调用函数的对象
2. 构造函数环境中，this指向构造出来的对象，注：构造函数不能return对象
3. DOM事件环境中，this指向触发事件的元素本身

更改this指向

1. 使用一个变量保存this

普通函数：this指向直接调用者，非严格模式下没有找到直接调用者就指向window（严格模式下this是undefined）。
  const name = 'lu';
  const obj = {
    name:'rena',
    say:function(){
        const _this = this;
        setTimeOut(function(){
           console.log(_this.name)
        },0)
    }
  };
obj.say()
  //rena
2. 也可以直接改成箭头函数，不用保存变量

    注：箭头函数和匿名函数区别？
    本质上都是函数，箭头函数是匿名函数的简写形式。最大区别就是this指向。
    箭头函数：
    1.没有prototype(原型)，所以箭头函数本身没有this。   
    2.不能当作构造函数，即不能使用new命令。
    3.不能使用arguments对象，函数体内不存在该对象。可使用rest参数代替。
    4.* 没有调用者，捕获其所在（即定义的位置）上下文的this值， 作为自己的this值。this一旦被捕获，就不再发生变化。

3. 使用call和apply方法和区别
Test:
 var a = '10'
  var foo = {
    a: 20,
    bar:function(){
          var a = 30;
          return this.a
    }
  };
  foo.bar();
  (foo.bar)();
  (foo.bar=foo.bar)();

堆栈

深拷贝和浅拷贝
手写深拷贝：
function deepClone(target){
    if(typeof target === 'object'){
        let cloneObj = Array.isArray(target) ? [] :{};
        for(const key in target){
            cloneObj[key] = deepClone(target[key]);
        }
        return cloneObj;
    }else{
        return target;
    }  
};
const obj = {
    field1:[1,2,3,{name:'guojing'}],
    field2: {
        name:'lu',
        age:'18'
    },
    field3: true 
};
let test = deepClone(obj);

原型

面试题

快手面试题：

将class comp改写成hooks

快手面试题2： setInterval会返回一个数字

快手面试题3

//请实现repeat函数
function repeat(fn, cycle, time) {
    return function(text){
        let num = 0;
        const timer =  setInterval(()=>{
           if(num===cycle){
                clearInterval(timer)
                return;
            }
            num = num+1;
            fn(text)
        },time);
    }
}
const repeatLog = repeat(console.log, 4, 1000)

repeatLog("helloworld") //每3秒打印一次helloworld，总计执行4次

字节面试题

let a = function () {
 return {
  m: function () {
   console.log(this)
  },
  n: () => {
   console.log(this)
  }
 }
}
let b = {}
let c = a.call(b)
console.log('bb-->',b);
console.log('cc-->',c)
c.m()
c.n()
a().m()
a().n()

一些零七八碎想到哪写到哪的问题：

tips: 只是贴出问题，答案是我精挑细选的，直接点题目的链接~ 没链接也不会的自己百度吧~

数组常用方法
防抖和节流区别？
less和sass区别？
http三次握手和四次挥手
h5和css3新特性有那些？

语义化标签，及优点；
```
  header,nav,footer ,aside, article, section
  增加了代码可读性，有利于搜索引擎识别
```
新标签canvas及基本使用拖拽drag drop audio radio webstorage

CSS3 新特性:

1、颜色: 新增RGBA, HSLA模式

2、文字阴影(text-shadow)

3、边框: 圆角(border-radius) 边框阴影 : box-shadow

4、盒子模型: box-sizing

5、背景:background-size background-origin background-clip

6、渐变: linear-gradient, radial-gradient

7、过渡: transition可实现动画

8、自定义动画 animate @keyfrom

9、媒体查询多栏布局 @media screen and (width:800px) {…} 10、border-image

11、2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

12、3D转换

13、字体图标font-face

14、弹性布局flex

css动画傻傻分不清楚

css 过渡 transion: property duration timing-function delay;

css转换： transform

原生事件，按下键盘是什么？onKeydown
事件冒泡和事件捕获都是指什么：事件委托基于事件冒泡机制，可以让父元素代理多个子元素事件，对于新添加的元素事件不用重复添加事件

webpack性能优化
- 开发过程中做过哪些性能优化的点？
- 做完之后有哪些不足可以继续优化
ES6 promise 和event-loop结合，看执行顺序
事件循环，宏任务、微任务

1. 执行顺序
    setTimeout(function () {
      console.log('three');
    }, 0);

    Promise.resolve().then(function () {
      console.log('two');
    });

    console.log('one');

    // one
    // two
    // three
    `setTimeout(fn, 0)`在下一轮“事件循环”开始时执行，
    `Promise.resolve()`在本轮“事件循环”结束时执行，
    `console.log('one')`则是立即执行
2. 每间隔1s输出一次

function sleep(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  })
}

// 用法
async function one2FiveInAsync() {
  for(let i = 1; i <= 5; i++) {
    console.log(i);
    await sleep(1000);
  }
}

one2FiveInAsync();

nginx 配置 nginx部署前端配置
什么是浏览器同源策略
跨域相关，有几种配置跨域的方式，开发中这三种就够用了
- 通过webpack配置反向代理
- CORS
- JSONP

url 解析，经典问题，浏览器地址栏摁下回车发生了什么
1. dns解析
2. http缓存
3. tcp链接

BFC是什么
Flex布局:
- flex:11 1 0；
- flex: auto ;1 1 auto
- flex:none; 0 0 auto

for in 和for of 区别
闭包

深拷贝，手写代码
vue和react区别
- 父子组件数据交互(props+自定义事件 vs props+回调)
class组件和函数组件的比较：无生命周期函数，不需要访问this，代码更简洁

vue和react区别

贴两个必读的面试题帖子 juejin.cn/post/706158…