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
相关推荐
以对_13 分钟前
uview表单校验不生效问题
前端·uni-app
Zheng1131 小时前
【可视化大屏】将柱状图引入到html页面中
javascript·ajax·html
程序猿小D1 小时前
第二百六十七节 JPA教程 - JPA查询AND条件示例
java·开发语言·前端·数据库·windows·python·jpa
john_hjy1 小时前
【无标题】
javascript
奔跑吧邓邓子2 小时前
npm包管理深度探索:从基础到进阶全面教程!
前端·npm·node.js
软件开发技术深度爱好者2 小时前
用HTML5+CSS+JavaScript庆祝国庆
javascript·css·html5
前端李易安2 小时前
ajax的原理,使用场景以及如何实现
前端·ajax·okhttp
杰哥在此2 小时前
Python知识点:如何使用Multiprocessing进行并行任务管理
linux·开发语言·python·面试·编程
汪子熙2 小时前
Angular 服务器端应用 ng-state tag 的作用介绍
前端·javascript·angular.js
Envyᥫᩣ3 小时前
《ASP.NET Web Forms 实现视频点赞功能的完整示例》
前端·asp.net·音视频·视频点赞