JavaScript面试自我补充

最新推荐文章于 2024-04-21 15:54:32 发布
最新推荐文章于 2024-04-21 15:54:32 发布
阅读量239 收藏 1
点赞数
分类专栏： 收藏+总结整理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42952262/article/details/106282020
版权

知识点大纲：

  1. 数据类型
  2. 形参传值与传址
  3. 预解析、作用域和作用域链
  4. Object.freeze()冻结对象属性变量
  5. 严格模式
  6. IIFE
  7. 闭包（这个弄详细点！）
  8. 事件流
  9. this，以及call、apply、bind作用和场景
  10. 面向对象编程之三种简单的设计模式
  11. 浅拷贝、深拷贝
  12. Event Loop（事件循环系统）
  13. 模块化规范

本文是根据自己的情况，总结/补充的易于“入坑”面试考点，部分较新颖。对大家来说，可能内容介绍不是很全面，请见谅！

1.数值类型

NaN

（注意：这个不是数据类型！）
NaN和任何值都不相等，即使本身也不相等！

NaN==NaN
<false
10=='10'
<true

所以
ES5
检测NaN，用不等于！=检测
ES6
检测NaN，用isNaN检测

Symbol（独一无二的简单数据类型）

Symbol是ES6新增的一个基本数据类型，表示独一无二的值。
使用场景：

  1. 对象的属性名，确保对象中不会出现相同的属性名；
  2. 防止不小心被修改或覆盖
//独一无二
let a = Symbol('name');
let b = Symbol('name');
console.log(a==b);		//false

//解决相同属性名问题（ES6之前属性名设置name1、name2、name3......）
let a = Symbol('name');
let b = Symbol('name');
let obj = {
  name: '张三',
  name: '李四',
  name: '王五'
}
console.log(obj);       //{name: "王五"}
console.log(obj.name);  //王五

let a = Symbol('name');
let b = Symbol('name');
let obj = {
  [a]: '张三',
  [b]: '李四',
  [Symbol('name')]: '王五'
}
console.log(obj);       //{Symbol(name): "张三", Symbol(name): "李四", Symbol(name): "王五"}
console.log(obj[a]);  //张三

还有几个需要了解的方法：

  • Symbol.for
    • 根据描述获取Symbol，如果不存在则新建一个Symbol(在全局被登记)
  • Symbol.keyFor
    • 根据使用Symbol.for登记的Symbol返回描述，如果找不到返回undefined 。
let a= Symbol.for("name");
let b= Symbol.for("name");
console.log(a== b); //true
console.log(Symbol.keyFor(a));	//name

2.形参传值与传址

变量在参数传递方式上，有所不同（理解栈和堆）：
       函数的参数如果是简单类型，会将一个值类型的数值副本传到函数内部，函数内部不影响函数外部传递的参数变量

       如果是一个参数是引用类型，会将引用类型的地址值复制给传入函数的参数，函数内部修改会影响传递参数的引用对象。
1.形参传值的误区：
变量和形参
在这里插入图片描述

// 引用类型
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a) // {x: 100, y: 200}
console.log(b) // {x: 100, y: 200}

3.作用域、作用域链

作用域

全局作用域：

window.a = 'hello';

//非严格模式下
b = 10;		//容易造成全局污染(影响其他文件的值)

函数级作用域:
var（函数级作用域，在函数中，只有当前函数内部访问；在块中，父级和块内都可以访问到）
let（块级作用域）-----没有预解析(推荐)
const(常量-块级作用域)-----没有预解析

for(var i = 0; i < 5; i++) {
    var num = 10;
}
console.log(num);		//10

for(var j = 0; j < 5; j++) {
    let num2 = 100;
}
console.log(num2);		//<VM232 helloword.js:18 Uncaught ReferenceError: num2 is not defined

function show(){
    var a = "hello";
}
show(); 	//调用执行完成，show被释放（出栈）
console.log(a); //helloword.js:5 Uncaught ReferenceError: a is not defined

let a = 10;
function show(){
    console.log(a);        //10
}
show();

let a = 10;
function show(){
    console.log(a);        //Uncaught ReferenceError: Cannot access 'a' before initialization(初始化之前不能访问‘a’)
    let a = 100;
}
show();
案例
var a = 666;
function show() {
    var a = 12;
    show2();
}
function show2(){
    console.log(a);
}
show();				//666

var a = 666
function show3() {
    var a = 12;
    function show4(){
    	console.log(a);
	}
	show4();
}
show3();		//12

4.Object.freeze()冻结对象属性变量

const stu = {
  "id": 'st02023',
  "name": '王磊'
};
stu.name = '张三';
console.log(stu);   //{id: "st02023", name: "张三"}

const stu = {
  "id": 'st02023',
  "name": '王磊'
};
Object.freeze(stu);
stu.name = '张三';
console.log(stu);   //{id: "st02023", name: "王磊"}

5.严格模式-“use strict”——避免全局污染（作用之一）

"use strict"
var a = 15;
b = 25;     //helloword.js:3 Uncaught ReferenceError: b is not defined

6.IIFE（普通话口语“亦菲~”）——自调用函数

作用：

  1. 防止全局变量污染
  2. 函数和变量，在执行完都被释放
var a = 100;
var a = 200;
console.log(a);     //200

(function(){
    var a = 100;  
    console.log(a);     //100  
})();

(function(){
    var a = 200;    
    console.log(a);     //200
})();

console.log(a);     //helloword.js:9 Uncaught ReferenceError: a is not defined

7.闭包

//案例1
function show() {
  let a = 100;
  return function() {
    return a;
  }
}

let show2 = show();
console.log(show());    //ƒ () { return a; }	//show返回的匿名函数
console.log(show2());   //100
show2 = null;

闭包官方定义：闭包就是能够读取其他函数内部变量的函数。（包括其他语言）
在JavaScript中，
闭包定义：函数内部的子函数就是闭包（比如：上面代码的匿名函数）
闭包本质：是连接函数内部和函数外部的桥梁（比如：上面匿名函数是连接show和show2的桥梁）
闭包现象：能够读取其他函数内部变量（比如：show2访问show的变量a）
最大特点：闭包记住了闭包函数诞生的生产环境，可以直接使用生产环境的变量（比如：上面代码的匿名函数可以访问show的所有变量，甚至是show的父环境的变量）
闭包作用：函数可以访问其他函数内部变量
满足闭包的三个条件：

  • 函数嵌套（函数内部有子函数（闭包函数））
  • 闭包访问所在的作用域
  • 所在的作用域被调用

闭包使用场景：框架、（我在迭代事件添加监听使用过沙箱式闭包）,具体十种场景，后面案例介绍！

理解闭包的缓存和手动释放闭包占用资源

//案例2
//用闭包实现点赞
function click_like() {
  let num = 0;
  return function() {
    return ++num;
  }
}

let show2 = click_like();
console.log(show2());    //1
console.log(show2());    //2
console.log(show2());    //3
console.log(show2());    //4
console.log(click_like());   //ƒ () { return num++; }
console.log(click_like());   //ƒ () { return num++; }
console.log(click_like());   //ƒ () { return num++; }
console.log(click_like());  //ƒ () { return num++; }
console.log(typeof click_like());	//function
console.log(click_like()());//1
console.log(click_like()());//1
console.log(click_like()());//1
show2 = null;

根据代码来帮助理解缓存没有被释放（个人理解）：因为全局引用变量show2依赖函数click_like（我们知道全局变量是不会自动释放的），show2不能被回收，那被占用的函数click_like也不能回收，接着就是被占用的function匿名函数（闭包）的占用的参数都不能回收。
再换个对象讨论
let show2 = click_like(); 调用click_like（返回的是匿名函数ƒ () { return num++; }），click_like调用完成就被释放掉，所以结果总是console.log(click_like()());//1；
这就理解了闭包的另一个作用了吧！——缓存数据
回收设置：直接将全局引用变量赋为null。
注意：闭包最后一定要手动回收，避免网页加载缓慢（可能造成网页崩溃）

理解了原理，咱们再写一个使用IIFE的闭包（沙箱式闭包）…看看是不是跟容易懂了！

//案例3
//使用包含IIFE的闭包实现点赞
let show2 = (function() {
  let num = 0;
  return function() {
    return ++num;
  }
})();
console.log(show2()); //1
console.log(show2()); //2
console.log(show2()); //3
console.log(show2()); //4
show2 = null;

看一个稍微复杂的闭包：

//案例4
function show() {
  let arr = [];
  for(var i = 0; i < 10; i++) {
    arr[i] = function() {
      return i;
    }
  }
  return arr;
}

let show2 = show();   //调用show，返回函数数组：arr[0]=f(){...}, arr[1]=f(){...}, arr[3]=f(){...} .........
console.log(show2[0]()); //10   //for循环执行完成，返回函数还没被执行，i的值最终为10
console.log(show2[0]()); //10
console.log(show2[1]()); //10
console.log(show2[1]()); //10
show2 = null;

结果都是10，怎么改进呢？（沙箱式闭包）

//案例5
function show() {
  let arr = [];
  for(var i = 0; i < 10; i++) {
    arr[i] = (function(x) {
      return x;
    })(i);
  }
  return arr;
}

let show2 = show();   //调用show，IIFE执行，调用完成返回arr=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(show2); //(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
show2 = null;

第二种改进方式：（直接将循环迭代的声明变量i设置为块作用域）

//案例6
function show() {
  let arr = [];
  for(let i = 0; i < 10; i++) {
    arr[i] = function() {
      return i;
    }
  }
  return arr;
}

let show2 = show();   
console.log(show2[0]()); //0
console.log(show2[0]()); //0
console.log(show2[1]()); //1
console.log(show2[2]()); //2
console.log(show2[3]()); //3
console.log(show2[4]()); //4
show2 = null;

闭包十种场景：

  1. 返回值（最常见）——前面案例1、2
  2. 函数赋值——前面案例3
  3. 函数参数——将闭包函数当做参数
  4. IIFE——前面案例3、5
  5. 循环赋值——前面案例4、5
  6. getter和setter——设置getter和setter的闭包函数
  7. 迭代器——前面的“点赞”
  8. 区分首次
let show = (function() {
  let arr = [];
  return function(id) {
    if(arr.indexOf(id) >= 0) {
      return false;
    }
    else {
      arr.push(id);
      return true;
    }
  }
})();

console.log(show(10));  //true
console.log(show(10));  //true
  1. 缓存机制
  2. image图片对象上报

8.事件流

事件流包括三个阶段：
事件捕获阶段、处于目标阶段、冒泡阶段
下图是W3C的事件执行顺序的一个标准：
事件流
不同浏览器对事件流支持不同：
1）、所有现代浏览器都支持事件冒泡，但在具体实现中略有差别：
IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)。
IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。
2）、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。
3）、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。
总结一下：
浏览器默认使用冒泡（由内到外触发事件，就像“冒泡”一样）
IE9、Firefox、Chrome、和Safari等新的或高版本浏览器支持整个事件流，但起止都是window对象（IE除外，起止于document）。
IE老版本的仅支持冒泡。
使用捕获，在事件绑定第三个参数设置为true（一般不用）

9.this

this指代只能是对象
this包含该对象的全部属性和方法
对象的上下文环境不变，this指向也不会变
详细参考：javascript this详解

10.面向对象的三种简单设计模式

单体模式——（就是我们常用的“字面量对象”的使用）

var teacher = {
    name: '张三',
    age: 23,
    show: function() {
        console.log(this.name + '老师今年' + this.age + '岁！')
    }
}

teacher.show();		//张三老师今年23岁！

原型模式

function Teacher(name, age) {
    this.name = name;
    this.age = age;
}

Teacher.prototype.show = function() {
    console.log(this.name + '老师今年' + this.age + '岁！');
}

var teacher_one = new Teacher('张三', 23);
teacher_one.show();		//张三老师今年23岁！

伪类模式

class Teacher {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    show() {
        console.log(this.name + '老师今年' + this.age + '岁！');
    }
}

var teacher_one = new Teacher('张三', 23);
teacher_one.show();		//张三老师今年23岁！

11.浅拷贝、深拷贝

参考：javascript面试汇总
强烈推荐：浅拷贝、深拷贝

12.Event Loop

通过事件循环机制，理解JavaScript多线程、异步的实现原理。

宏任务：script（整体代码）、setTimeout、setInterval、setImmediate、I/O、UI rendering
微任务：promise、Object.observe、MutationObserver

要点：微任务总跟着当前宏任务后面执行（微任务放到微任务队列），遇到新的宏任务时，新的宏任务的上下文消息放到消息队列，等待当前宏任务执行完成。

一个完整的 Event Loop 过程，可以概括为以下阶段：
事件循环机制流程图

理解事件循环机制
两分钟了解事件循环机制传送门：视频

13.模块化

几种常见模块化规范的简介

CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案

AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅。

CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在Node.js中运行。不过，依赖SPM 打包，模块的加载逻辑偏重

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案

C-A-L-D
关注
专栏目录
JS面试题之用js代码简单的介绍下自己
qq_45021462的博客
11-01 670
用js代码简单的介绍下自己 <script> function Person(name,jingli,jineng) { this.name=name; this.jingli=jingli; this.jineng=jineng; } Person.prototype.show=function(){ console.log("我是"+this.name+"；我有如下经历:"+this.jingli+"；我会如下技能："+
JavaScript面试题汇总
狡辉两门的博客
07-01 526
JavaScript 面试题汇总
JavaScript 面试题汇总
筱的博客
05-08 2010
JavaScript 面试题汇总
JavaScript经典面试笔试知识点集合_javascript笔试知识
2201_75604341的博客
04-21 410
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
JavaScript 面试题通关一：类型
甜心森的博客
11-29 288
JavaScript 面试通关：JavaScript 类型，类型转换
【前端领域高频笔试面试】—— JavaScript相关（一，2024年最新3个月学会前端开发
m0_61068496的博客
04-18 798
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
【转载】JavaScript 之 call和apply，bind 的模拟实现，字节跳动前端开发面试
2401_84139624的博客
04-18 761
也许有人想到用 ES6 的方法，不过 call 是 ES3 的方法，我们为了模拟实现一个 ES3 的方法，要用到ES6的方法，好像……当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。接下来看第二点，可以传入参数？函数需要传 name 和 age 两个参数，竟然还可以在 bind 的时候，只传一个 name，在执行返回的函数的时候，再传另一个参数 age。指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？
前端面试整理JavaScript
weixin_42246997的博客
09-12 810
1.eval是做什么的？ 它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 null，undefined 的区别？ 目前，null和undefined基本是同义的，只有一些细微的差别。null表示"没有对象"，即该处不应该有值。典型用法是：（1） 作为函数的参数，表示该函数的参数不是对象。（2） 作为对象原型链的...
20210514面试题自我分类及总结（一）
weixin_45439379的博客
08-12 2042
20210514面试题自我分类及总结 文章目录20210514面试题自我分类及总结前言一、html1.页面导入样式时，使用link和@import有什么区别？二、css1.双飞燕布2.标准盒模型和怪异盒模型3.Sass和Less是什么？有什么区别？大家为什么要使用他们？三、javascript1.return 、break和continue的区别和作用2.从输入URL到页面展示的详细过程3.TCP四次挥手4. reflow(回流)和repain(重绘)5.节流和防抖6.脱离文档流有哪些7.事件循环8.垃圾回
互联网用面试自我介绍.pdf
08-28
在准备互联网行业的面试自我介绍时，重要的是要突出个人的专业技能、实践经验以及对行业的理解和热情。以下是一个详细的自我介绍框架，可以根据自身情况进行调整： 首先，可以从个人的基本信息和教育背景开始，强调...
JAVA工程师浅蓝色个人面试求职模板.7z
05-07
7. **面试后续**：面试后及时发送感谢信，对面试过程中的问题进行反思，若有遗漏或想补充的地方，也可借此机会表达。 总的来说，这个模板旨在帮助Java工程师打造一份专业且具有吸引力的求职材料，全面展示自己的...
juejin小册前端面试11总结与补充说明
VAN
01-19 79
本小册主要带领大家从准备简历开始，逐步梳理技术面试知识点和非技术面试常考问题，最后介绍了一些谈 offer 之类的面试技巧。下面带领大家根据准备、技术面试、非技术面试和 HR 面试四部分，回顾一下每部分的要点。
「快手-效率工程」秋招面试复盘总结
超逸の学习技术博客
09-10 2744
快手-效率工程面经 介绍 8月25日（周二）投递，在9月8日上午收到 HR 电话，告知简历通过了，约9月10日上午11点面试，整个面试时间1个小时左右。 一面 面经 1、自我介绍 2、你刚刚提到了项目中防抖 debounce ，你知道实现原理是什么吗？说一说 这个问题是项目中用到过，然后自我介绍提了一下，就说了一下原理，面试官居然不要我手撕… 3、你家乡在哪？面试岗位在北京，有没有城市要求吗？ 回答：反正在湖南，去哪都是很远… 4、实现一个函数，以字符串形式（要求字母小写）返回参数类型 // nul
基于 python 实现的ios混淆脚本工具
10-01
【作品名称】：基于 python 实现的ios混淆脚本工具 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： . addNative.py 生成oc垃圾代码工具 此脚本会扫描指定目录，给OC文件添加垃圾函数，同时创建垃圾文件到/trash目录。 参数说明 --oc_folder OC_FOLDER OC_FOLDER为OC代码所在目录 --replace替换OC_FOLDER下的原文件，同时原代码会备份到脚本目录下的backup_ios目录。不指定此项垃圾代码只会放到脚本目录下的target_ios/ addNative.py里还有一些配置可以看需求手动修改，如生成垃圾文件的数量，垃圾函数的数量，忽略文件列表等，具体请查看代码顶部相关注释 renameNative.py 修改类名前缀工具 类名是引用可能较为复杂 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。
基于SOM算法对IRIS数据集分类_Learning-Som_IrisClassification.zip
10-01
基于SOM算法对IRIS数据集分类_Learning-Som_IrisClassification
06_摄影展示小程序.zip
最新发布
10-01
我们的小程序源码功能多样，涵盖社交、电商等领域。高度定制化，轻松打造专属风格。用户体验佳，界面美观操作便捷。安全可靠，保障数据与运行稳定。适合创业者、企业和开发者。提供技术支持与文档说明。快来下载，开启精彩之旅！
大学生创业计划书××信息技术公司商业计划书
10-01
大学生创业计划书××信息技术公司商业计划书
朴素贝叶斯分类Iris数据集_Iris-Bayes.zip
10-01
朴素贝叶斯分类Iris数据集_Iris-Bayes
JavaScript面试常见问题与解答
"这篇资料包含了JavaScript面试中常见的问题和答案，涵盖了基础语法、DOM操作、事件处理、...这些面试题和答案涵盖了JavaScript的基础知识，对理解和掌握JavaScript语言非常有帮助，适合准备面试或自我提升的人士学习。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值