本文深入探讨JavaScript中的闭包概念，包括其定义、特点、用途及潜在的内存消耗问题。同时，文章提供了闭包的实际应用案例，并讲解了如何通过闭包在函数外部访问和修改函数内部的变量。此外，还涉及了JavaScript的原始数据类型、移动端布局策略、Web本地存储机制、事件处理机制等内容，最后讨论了性能优化策略，如图片优化、HTTP请求减少、节流阀技术等。
1.什么是闭包？
闭包就是能够读取其他函数内部变量的函数，由于在 js语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成 “定义在一个函数内部的函数”。
1.小结：
- 一个作用域访问了其他作用域的数据，除开全局作用域。
- 闭包发生在函数身上（因为在es6之前，js没有块级作用域的概念）。
- 产生特点：作用域的生命周期被延长。
2.注意：
- 函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
- Javascript语言特有的"链式作用域"结构，函数可以访问父级作用域的变量。
- 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
- 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值。
3.闭包的用途：
- 可以在函数外部读取函数内部成员。
- 让函数内成员始终存活在内存中，直到被调用。
4.小案例：
- 在父函数外部改变父函数内部变量的值
var fun2;
var fun3;
function fun1() {
var a = 2;
fun2 = function() {
var b = a;
a = 3;
console.log(a, b);
};
console.log(a);
fun3 = function() {
var c;
c = a;
console.log(c);
};
};
fun1(); //2
fun2(); //3 2
fun3(); //3
2. 闭包进阶？（尝试在心里运行一下）
function fun(n, o) {
console.log(o)
return {
fun: function(m) {
return fun(m, n);
}
};
}
var a = fun(0);
console.log('--------');
a.fun(1);
console.log('--------');
a.fun(2);
console.log('--------');
a.fun(3);
console.log('--------');
var b = fun(0).fun(1).fun(2).fun(3); //undefined,?,?,?
console.log('--------');
var c = fun(0).fun(1);
console.log('--------');
c.fun(2);
c.fun(3);
2.简述同步和异步的区别？
1.同步任务：
在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务（单线程）。
2.异步任务：
不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行（多线程 ）。
3.执行机制：
-
先执行执行栈中的同步任务。
-
异步任务（回调函数）放入任务列队中。（异步进程处理）
-
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务列队中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
图解：
3.移动端常见布局？
1.流式布局（百分百布局、非固定像素布局）：
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
2.Flex布局（弹性盒子布局）：
基本概念：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
3.less+rem+媒体查询（响应式布局）
rem：一个相对单位，类似于em，不同的是rem的基准是相对于html元素的字体大小。
Less：
- 介绍：LeanerStyle Sheets是一门css扩展语言，也称为css预处理器。
- 特性：在css的语法基础上，引入了变量、运算以及函数等功能简化了csss的编写、让我们用更少的代码做很多的事，降低了css的维护成本。
媒体查询（Media Query）：
1.什么是媒体查询：css3的新语法——使用@media查询，可以针对不同的媒体类型定义不同的样式，当你重置浏览器大小的过程中，页面也
会根据浏览器的宽度和高度重新渲染页面。
2.媒体查询的语法规范：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
Mediatype->查询类型
and|not|only ->关键字
media feature->媒体特性
CSS-Code->当前状态下的css样式
例：
@media screen and (min-width: 1280px) {}
4.栅格布局（如：bootstrap、mui等）：
bootstrap文档官网：https://www.bootcss.com/
mui文档官网：http://dev.dcloud.net.cn/mui/
4.js中有哪些原始数据类型？
1.简单数据类型：
1.数字类型 number
2.字符串 string
3.布尔值 boolean
4.未定义 underfined
5.空值 null
2.复杂数据类型：
- 对象Object
- 数组Array
- Function
5.讲讲输入完网址按下回车，到看到网页这个过程中发生了什么？
1.浏览器通过DNS服务器获取即将访问的网址IP地址。
2.浏览器发起一个对这个IP地址的请求。
3.服务端监听指定的端口的服务器软件接收到这个请求，进行相应处理。
4.服务端将处理完的结果返回给客户端浏览器。
5.浏览器将服务端返回的结果呈现到界面上。
第二天： - Web本地存储的几种存储方式以及特性
1.本地存储特性：
1.数据存储在用户的浏览器中
2.设置、读取方便、甚至页面刷新不丢失数据
3.容量较大，sessionStorage约5M、localStorage约20M
4.只能存储字符串，可以将对象JSON.stringify() 编码后存储
2.(window.)sessionStorage：
1.生命周期为关闭浏览器窗口
2.在同一个窗口(页面)下数据可以共享
3.以键值对的形式存储使用
3.(window.)sessionStorage对应API：
1.存储数据：sessionStorage.setItem(key, value);
2.获取数据：sessionStorage.getItem(key);
3.删除数据：sessionStorage.removeItem(key);
4.清空数据（清除所有）：sessionStorage.clear();
4.(window.)localStorage:
1.声明周期永久生效，除非手动删除 否则关闭页面也会存在
2.可以多窗口（页面）共享（同一浏览器可以共享）
3.以键值对的形式存储使用
5.(window.)localStorage对应API：
1.存储数据：localStorage.setItem(key, value);
2.获取数据：localStorage.getItem(key);
3.删除数据：localStorage.removeItem(key);
4.清空数据（清除所有）：localStorage.clear();
6.Cookie:
1.区别于Storage系列，他是为了更大容量存储设计的。
2.Cookie作用是与服务器进行交互，Storage系列仅仅是为了本地存储数据而生。
3.使用方法不同，操作cookie使用setCookie，getCookie分别进行设置和获取。
2.实现响应式布局的原理
1.媒体查询：
通过设置媒体类型的定义，让我们针对不同的媒体类型给元素不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
2. 流式布局：
通过给元素的宽度设置成百分比，让元素随着浏览器宽度的变化来变化，从而实现响应式的效果。
3. rem布局：
首先在HTML中设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值。Js会获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新设定，这样就能实现响应式的效果了。
3.浏览器有哪些js的兼容性（例举）
1、Ajax请求：
IE：new ActiveXObject()
FF（火狐）、Chrome：new XMLHttpRequest()
2、集合类对象的()与[]的问题：
IE下，可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象。
3、document.all问题：
IE有，其他浏览器没有
4.this的理解以及改变this指向的几种方法
首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。
1.关于this指向的几种情况：（我所了解的有以下几种）
情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window。
例：
function a() {
var user = "morke";
console.log(this.user); //undefined
console.log(this); //Window
}
a();
情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
例：
var o = {
user: "morke",
fn: function() {
console.log(this.user); //morke
console.log(this); //{user: "morke", fn: ƒ} 即对象o
}
}
o.fn();
情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。
例1：
var o = {
user: "morke",
fn: function() {
console.log(this.user); //morke
console.log(this); //{user: "morke", fn: ƒ} 即对象o
}
};
window.o.fn();
例2：
var o = {
a: 10,
b: {
a: 12,
fn: function() {
console.log(this.a); //12
console.log(this); //{a: 12, fn: ƒ} 即对象b
}
}
}
o.b.fn();
情况4：
在构造函数中this指向实例化对象，参考第四天第五题new关键字执行后都做了哪些事情。
5.Get和post请求的区别
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制，安全性较高。
6.jsonp 跨域的原理
jsonp的核心则是通过HTTP来动态添加
第三天：
- H5、C3
H5：一些新标签（例如：音频、视频、网页模块）
C3：选择器（如伪类选择器）、圆角（border-radius）、阴影（box-shadow）
、文字加特效（text-shadow）、线性渐变（gradient）、3d转换（transform系列）、
@Font-face特性（用来加载字体样式）、过渡、动画等。
2.性能优化
1.优化图片。
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）。
3.优化css、js文件（压缩合并）。
4.减少http请求（合并文件、图片合并制作成精灵图）。
5.使用节流阀，减少不必要的内存消耗。
3.var、let、const的区别
1.let、const声明的变量不存在预解析。
2.let、const声明的变量只在所处块级作用域有效 { }。
3.同一个作用内，let、const 不可以声明重名的变量。
4.let、const 在代码块内部，不可以在声明变量之前使用。
5.const声明的变量不可以重新赋值，必须在声明的时候进行初始化，
除了这条规则，别的特性和let一致。
4.原型链
图片网络地址：https://www.processon.com/view/link/5d0629cde4b0f1ac03762056
原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链
第四天：
1.事件三要素
1.事件源：要触发的对象
2.事件：事件源要执行的事件类型
3.事件处理程序：具体要执行的事件
2.你对浏览器内核的理解
1.内核的组成及介绍：
1.浏览器内核可以分成两部分：渲染引擎和JS引擎。
2.浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
2.渲染引擎：
渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。
3.JS引擎：
JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。
4.主流浏览器内核：
常见的浏览器内核可以分为四种：Trident、Gecko、Webkit、Chromium/Bink。
对应的浏览器：IE、Mozilla FireFox、Safari、Chrome 。
3.什么是封装，继承，多态
1.封装：
什么是封装：从字面上来理解就是包装的意思——信息隐藏。是指利用抽象数据类型（如function）将数据和基于数据的操作封装在一起，使其构成一个不可分割的独立实体，数据被保护在抽象数据类型的内部，尽可能地隐藏内部的细节，只保留一些对外接口使之与外部发生联系。
封装的好处：
1.良好的封装能减少耦合。
2.其内部的结构可以自由修改。
3.可以对成员进行更精确的控制。
4.隐藏信息和实现细节。
2.继承：
1.子类可以继承父类的一些属性和方法（除私有属性、方法）。
2.子类可以拥有自己的属性和方法，即子类可以对父类进行扩展。
3.子类可以用自己的方式实现父类的方法。
3.多态：
多态就是指一个引用类型在不同情况下的多种状态（同一事物的在不同场景的多种表现形式）。
4.什么是事件委托
事件委托：通俗来讲，就是把一个元素响应事件的函数委托到另一个元素上。
一般来说，会把一个或者一组元素的事件 委托到它的父亲或者更外层的元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后再外层元素上去执行函数。（addEventListener 事件模型分为三个阶段，分别为：事件捕获阶段。目标阶段、事件冒泡阶段。）
5.new关键字执行后都做了哪些事情
1.在内存中创建了一个空对象
2.把this指向当前的对象
3.执行构造函数里面的代码
4.把当前对象返回
第五天：
-
节流阀
1.触发的事件以周期的形式去执行，而非实时。如滴水的水龙头。
2.不管事件触发有多频繁，都会保证在满足条件的状态下，必须执行一次真正的事件处理函数。
3.因为只有当条件满足的状态才会触发事件处理函数，所有可以避免不必要的内存消耗。 -
逻辑中断
1.逻辑中断：
&&运行流程是，从左至右，依次判断表达式的值，如果是true，那么继续往右执行，直到碰到false，那么就会把当前的表达式的值进行返回。
||运行流程是，从左至右，依次判断表达式的值，如果是false，那么继续往右执行，直到碰到true，就会把当前的表达式的值进行返回。
2.原由：
&&：并且的意思 操作符两边必须都是true，返回的才是true，如果是false，那么直接返回false。
||：或者的意思 操作符两边必须都是false，那么才返回false，如果一边是true，那么就直接返回true。 -
es6中有哪些作用域，及其特点
-
全局作用域：
最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的。
其中声明的变量为全局变量，它的生命周期同于整个页面 -
局部作用域：
局部作用域一般只在固定的代码片段内可以访问到，而对应函数外部是无法访问的。
其中声明的变量为局部变量，他的生命周期伴随函数的调用而结束。 -
块级作用域：
块级作用域为es6中新增，表现为{}所包裹的作用域，其中用let声明的变量只有在所处的块级作用域内有效，该变量具有暂时性死区。
暂时性死区：let/const命令会使区块形成封闭的作用域（块级作用域）。若在声明之前使用后面用let声明的变量（常量用const），就会报错。
------在代码块内，使用let命令声明变量之前，该变量都是不可用的。 -
线程与进程的区别
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
Cookie 就是存在客户端的一小段文本
Cokie 是一门客户端技术 因为cookie就是存储在客户端浏览器中的
Cookie的作用是为了实现客户端与服务器之间的状态保持
Cookie技术不安全 不要使用 cookie保存敏感信息
扫一扫
46万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
