学习记录1.13

闭包：

可以访问外部函数的变量，在内层函数中访问到外层函数的作用域. 她可以创建私有变量，延长变量的生命周期。

 function father()

{

Var name = “baiyun”;

 function son()

{

Console.log(name,”name”);

}

son()

}

father();

柯里化函数的应用：目的在于避免频繁调用具有相同参数函数的同时，又能够轻松的重用

// 假设我们有一个求长方形面积的函数

function getArea(width, height) {

    return width * height

}

// 如果我们碰到的长方形的宽老是10

const area1 = getArea(10, 20)

const area2 = getArea(10, 30)

const area3 = getArea(10, 40)

// 我们可以使用闭包柯里化这个计算面积的函数

function getArea(width) {

    return height => {

        return width * height

    }

}

const getTenWidthArea = getArea(10)

// 之后碰到宽度为10的长方形就可以这样计算面积

const area1 = getTenWidthArea(20)

// 而且如果遇到宽度偶尔变化也可以轻松复用

const getTwentyWidthArea = getArea(20)

应用：

1. 数据封装： 闭包允许创建私有变量，通过函数的返回值暴露有限的访问方式，实现数据封装。
2. 模块化开发： 闭包可以用于实现模块化的代码结构，将一些功能封装在闭包中，只暴露必要的接口。
3. 回调函数： 闭包常常用于实现回调函数，尤其是在异步编程中，通过闭包可以保持对外部作用域的引用。
4. 定时器和事件处理： 在定时器和事件处理中，闭包可以用于保存状态信息，以便在定时器或事件触发时使用。

优点：

1. 数据封装： 闭包允许将数据封装在函数内，避免全局变量的污染，提高代码的可维护性。
2. 保持状态： 闭包可以捕获外部函数的状态，使得函数在后续调用中能够记住之前的状态，有助于实现某些功能。
3. 模块化： 闭包支持模块化开发，可以将功能划分为更小的单元，提高代码的复用性和可读性。

缺点：

1. 内存消耗： 闭包中保留了外部作用域的引用，可能导致内存消耗较大，特别是在闭包函数体内包含大量变量或对象时。

nexttick：

因为vue更新dom是异步执行的。当修改数据的时候 vue会开启一个异步队列  视图不会第一时间就进行更新 而是等所有异步队列数据都变化完毕 才会进行统一更新 

如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

 更改数据后当你想立即使用js操作新的视图的时候需要使用它。 比如说 数据改变后重新获取焦点

现在有一个场景就是有一个div 使用v-if来判断它是否出现 点击一个按钮 v-if的值会改变 变成true的时候 div出现 并获取input框中的值， 如果v-if的值是 false，直接去获取div内容是获取不到的，因为此时div还没有被创建出来，那么应该在点击按钮后，改变v-if的值为 true，div才会被创建，此时再去获取，

可以使用这个函数

因为获取值的时候想要实现的效果就是 输入框一出现就自动获取焦点 并拿到里面的值。this.$refs.inputTitle.focus()不在外面嵌套$nextTick，就会出错， 因为vue是在执行完函数时候判断数据是否改变 在进行重新获取焦点 也就是说函数执行完之后input框才可见 然后获取焦点是在函数内执行的。

所以就要使用nexttick函数。因为nexttick方法是在渲染完页面之后这才执行的 就可以正常获取焦点了

————————

应用的场景是：

在created生命周期钩子里，因为这个时候未挂载DOM，若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。

nextTick方法主要是使用了宏任务和微任务，定义一个异步方法，多次调用nextTick会将方法存在队列中，通过这个异步方法清空当前队列。所以这个nextTick方法就是异步方法

  

其实用方法一般为 this.$nextTick( ()=>{} ), 为了不影响this指向，一般为箭头函数。

    methods: {

      getedit(){

          this.isDisabled = false

          this.$nextTick(function(){

  this.$refs.inputTitle.focus() //获取焦点

})

      }

    }

20.浏览器的垃圾回收机制

1.标记清除

这个算法，分标记清楚两个阶段，标记就是为所有的活动对象做一个标记，清除阶段就是把没有标记（非活动对象）销毁

首先对所有的内存进行标记，然后从根对象遍历，还是被上下文变量使用就清除标记，然后清理所有带有标牌的变量，销毁并且回收他们所占用的空间，最后垃圾回收程序做一次内存清除。d

到那时他有一个缺点就是会存在很多内存碎片。需要通过标记整理策略进行解决。

标记清除算法的优点是：对比引用计数算法，标记清除算法最大的优点是能够回收循环引用的对象，它也是v8引擎使用最多的算法。

2.引用计数

当对象被引用的次数是0，那就进行回收，但是循环引用的时候，两个对象都至少被引用了一次，因此导致内存泄漏

（不再用到的内存，没有及时释放，就叫做内存泄漏。因为不用的内存用改被垃圾回收机制回收，但是某种原因，他没有被回收，就叫做内存泄漏）

引用计数算法缺点：

• 无法回收循环引用的对象；
• 空间开销比较大；

7.内存泄漏

内存泄漏是指不再用到的内存，没有及时释放。既不能使用，又不能回收。

导致内存泄漏的几种常见情况：

• 1.意外形成全局变量
  解决方法：加上 ‘use strict’ 启用严格模式来避免这类问题, 严格模式会阻止你创建意外的全局变量.
• 2.闭包
  解决方法：在函数外部定义事件处理函数，解除闭包。或在闭包中，删除没用的属性以减少对内存的消耗。或在外部函数中删除对DOM的引用。
• 3.清除页面dom元素时，dom元素绑定的事件未解绑
  解决办法：手工移除事件。
• 4.循环引用

function fn() {

 var a = {};

 var b = {};

 a.pro = b;

 b.pro = a;

} 

fn();

解决办法：手工解除循环引用。

• 5.未清除的计时器或延时器
  解决办法：clearTimeout()，clearInterval()。

宏任务和微任务  &   同步任务和异步任务

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕才能执行下一个任务，是由js执行栈决定的；

异步任务：不进入主线程，而是进入任务了队列的任务，当主线程中的任务运行完成了，才会从任务队列中取出异步任务，放入主线程中执行

微任务和宏任务都是异步任务，它们都属于一个队列

宏任务：script、setTimeout、setInterval、postMessage、MessageChannel、及Node.js 环境中的setImmediate.

微任务：Promise.then、Object.observe、MutationObserver、及Node.js 环境中的process.nextTick.

• Promise.then( )/catch( ) 。注意，Promise本身同步，只是它里面的then/catch的回调函数是异步的微任务

执行顺序就为： 同步任务 ---> 微任务 ---> 宏任务

堆和栈

堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针

基本类型 保存在栈中 引用类型保存在堆中

cookie session

Js如何实现继承

==和===

• 两个都为简单类型，字符串和布尔值都会转换成数值，再比较
• 简单类型与引用类型比较，对象转化成其原始类型的值，再比较
• 两个都为引用类型，则比较它们是否指向同一个对象
• null 和 undefined 相等
• 存在 NaN 则返回 false

#

两个操作数在不转换的前提下相等才返回 true。即类型相同，值也需相同

Js类型转换机制

显示转换和隐式转换

自动转换为布尔值

在需要布尔值的地方，就会将非布尔值的参数自动转为布尔值，系统内部会调用Boolean函数

可以得出个小结：

• undefined
• null
• false
• +0
• -0
• NaN
• ""

除了上面几种会被转化成false，其他都换被转化成数值

自动转化成字符串     +

除了+ 会把运算转化成字符串 其他运算符会转化成数值

浅拷贝：就是基本类型拷贝值，引用类型拷贝内存地址，只拷贝最外面一层，不会递归的去拷贝；

可以使用object.assign array.prototype.concat() 和 object.prototype.slice() 扩展运算符

这样的操作通常用于对象的浅拷贝，即创建了一个新对象，该对象与原始对象共享相同的属性值，但是它们在内存中是两个独立的对象。

深拷贝：

Js方面的所有题背完

多文本省略：overflow：hidden text； overflow：ellipsis ； white-space：nowarp；

多行文本：display：-webkit-box 伸缩盒子 -webkit-line-clamp：2； 2行 -webkit-orient：vertical； overflow：hidden； text-overflow：ellipsis

New操作符做了什么： 创连绑this

1. 先创建了一个新的对象newObj
2. 将新对象newObj与构造函数通过原型链进行连接
3. 将构造函数的this绑定到新对象newObj
4. 根据构建函数返回类型作判断，如果是值类型，返回newObj。如果是引用类型，就返回这个引用类型的对象