2024前端面试准备2-JS基础知识回顾

变量类型和计算

1.值类型和引用类型的区别

常见值类型:undefined(定义undefined只能用let,不能用const)、字符串、bool、number、 Symbol;

常见引用类型: 对象, 数组、null(特殊引用类型,指针指向为空地址) 、function(特殊引用类型);

值类型的值直接存储在栈中;引用类型值存储在堆中,栈中存储的是内存地址;

2.typeof能判断哪些类型

所有的值类型、函数、识别引用类型(不能在细分只能识别到是不是object)

3. 深拷贝&浅拷贝

浅拷贝: 赋值给一个新对象,如果是基本数据类型,赋予的直接是值,如是引用类型数据,赋予的则是内存地址, 引用对象=赋值不是浅拷贝,因为没有产生新的对象,只是新增了指向同一内存地址的指针。常用浅拷贝方法:object.assign()、...展开语法、Array.prototype.concat()拷贝数组、Array.prototype.slice()拷贝数组

深拷贝: 赋值给一个新对象,会在堆内存当中为新对象建立空间,跟原对象不共享内存,完全分离。 22年3月起有原生深拷贝方法了 structuredClone 此方法可能无法在较旧的设备或浏览器中工作。

手写简易深拷贝

注意判断值类型和引用类型

注意判断是数组还是对象

递归遍历

function deepClone(obj={}){
  if(typeof obj !=='object' || obj == null){
     return obj; // 不是对象和数组 直接返回
  }
  let res = obj instanceof Array ? [] : {};
  for(let key in obj){
  	if(obj.hasOwnProperty(key)){
  		// 保证key 不是原型的属性
  		res[key] = deepClone(obj[key])
  	}
  }
  return res;
}

4.何时使用=== 何时使用==

==会尝试做类型转换使两边相等, 所以除了 == null 之外, 其他一律用 ===


原型和原型链

1. 如何准确判断一个变量是不是数组?

使用instanceof 判断是不是在数组的原型链上
2.手写一个简易的jQuery,考虑插件和扩展性

js 复制代码
	class jQuery{
		constructor(selector){
			const res = document.querySelectorAll(selector)
			const length = res.length;
			for(let i = 0; i < length; i++){
				this[i] = res[i]
			}
			this.length = length;
			this.selector = selector;
		}
		get(index){
		  return this[index];
		}
		each(fn){
			for(let i = 0; i<this.length; i++){
				const elem = this[i];
				fn(elem);
			}
		}
		on(type,fn){
			return this.each(elem =>{
				elem.addEventListener(type, fn, false);
			})
		}
	}

3. class 的原型本质,怎么理解?

class本质就是function的一个语法糖,因为JS中没有类(Class)这个概念,所以JS的设计者使用了构造函数来实现继承机制。
4. 原型链

原型链:

JS的每个函数在创建的时候,都会生成一个属性prototype,这个属性指向一个对象,这个对象就是此函数的原型对象。该原型对象中有个属性为constructor,指向该函数。每个通过该构造函数创建出来的实例对象都有隐式原型__proto__;实例的__proto__指向对应函数的prototype;获取实例的属性时,先在自身属性中寻找,如果找不到就通过__proto__ 寻找对应构造函数的prototype,如果还未找到就会去该构造函数的prototype的__proto__,这样一层一层向上查找就会形成一个链式结构,这就是原型链。


作用域和闭包

1.this的不同应用场景,如何取值?
所有的自由变量的查找,是在函数定义的地方,向上级作用域查找,而不是在函数执行的地方
this取什么样的值是在函数执行的地方确定的,不是函数定义的地方

  • 当作普通函数调用 返回 window
  • 使用call apply bind 传入什么绑定什么
  • 作为对象方法调用,就返回对象本身
  • 在calss的方法中调用时,是实例本身
  • 在箭头函数中,永远会找上级作用域中的this确定
    2.手写bind函数?
js 复制代码
 Function.prototype.bind1 = function(){
 			// 将参数拆解为数组
 			const args = Array.prototype.slice.call(arguments)
 			// 获取this 数组第一项
 			const t = args.shift();
 			// fn1.bind(...) 中的fn1
 			const self = this;
 			// 返回一个函数
 			return function(){
 					return self.apply(t, args);
 			}
 }

3.实际开发中闭包的应用场景,举例说明

闭包让你可以在一个内层函数中访问到其外层函数的作用域。因为使用闭包会包含其他函数的作用域,会比其他函数占据更多的内存空间,不会在调用结束之后被垃圾回收机制回收,多度使用闭包会过度占用内存,造成内存泄漏。

  1. retur一个内部函数,读取内部函数的变量;

      function f1(){
      	 let n = 999;
      	 function f2(){
      			 console.log(n)
      	 }
      	 return f2;
      }
      let res = f1();
      res(); // 999
    
  2. 函数作为参数

js 复制代码
 	let n = 999;
  function f1(){
    let n = 1000;
    function f2(){
      console.log(n);
    }
    return f2
  }
  function f3(p){
    let n = 1001;
    p();
  }
  f3(f1());//1000
  1. 自执行函数、使用回调函数就是在使用闭包
js 复制代码
 let n = 100;
(function f1(){
  console.log(n);
})() //100
  1. 使用回调函数就是在使用闭包
js 复制代码
   	window.p = 999;
    setTimeout(function f1(){
      console.log(window.p);
    },1000)
  1. 封装对象的私有对象和私有方法;
js 复制代码
let counter = (function(){
   let privteCount = 0;
   function change(val){
     privteCount += val;
   }
   return {
     add:function(){
       change(1);
     },
     remove:function(){
       change(-1);
     },
     value:function(){
       return privteCount;
      }
   }
 })();

console.log(counter.value());//0
counter.add();
counter.add();
console.log(counter.value());//2
counter.remove();
console.log(counter.value());//1
异步和单线程

1.同步和异步的区别是什么

JS是单线程语言,只能同时做一件事儿; 浏览器和nodejs已支持js启动进程,如web worker;js和DOM渲染共用一个线程,因为JS可修改DOM结构。

基于JS是单线程语言,异步不会阻塞代码执行,同步会阻塞代码执行。
2. 前端使用异步的场景有哪些?

  • 网络请求, 如ajax图片加载
  • 定时任务, 如setTimeout
相关推荐
罗_三金几秒前
微信小程序打印生产环境日志
javascript·微信小程序·小程序·bug
shuishen4915 分钟前
Web Bluetooth API 开发记录
javascript·web·js
前端熊猫20 分钟前
Element Plus 日期时间选择器大于当天时间置灰
前端·javascript·vue.js
重生之Java开发工程师26 分钟前
JVM 主要组成部分与内存区域
java·jvm·面试
傻小胖28 分钟前
React 组件通信完整指南 以及 自定义事件发布订阅系统
前端·javascript·react.js
万亿少女的梦16834 分钟前
高校网络安全存在的问题与对策研究
java·开发语言·前端·网络·数据库·python
Python私教1 小时前
Vue3中的`ref`与`reactive`:定义、区别、适用场景及总结
前端·javascript·vue.js
CQU_JIAKE1 小时前
12.12【java exp4】react table全局搜索tailwindcss 布局 (Layout) css美化 3. (rowId: number
前端·javascript·react.js
有机会一起睡觉2 小时前
前端:最新 react 原理 对比 面试题!!! 2025
react.js·面试
m0_748236582 小时前
Django 后端数据传给前端
前端·数据库·django