每天10个前端小知识 【Day 8】_4

function add() {
    const b = 2
    let sum = b + a
    console.log(sum); // 3
}
add()

})()

**柯里化**


把接受多个参数的函数转换成接受一个单一参数的函数，将一个二元函数拆分成两个一元函数。

// 非函数柯里化
var add = function (x,y) {
return x+y;
}
add(3,4) //7

// 函数柯里化
var add2 = function (x) {
//**返回函数**
return function (y) {
return x+y;
}
}
add2(3)(4) //7

**高阶函数**


通过接收其他函数作为参数或返回其他函数的函数。  
 函数 foo 如何返回另一个函数 bar，baz 现在持有对 foo 中定义的bar 函数的引用。由于闭包特性，a的值能够得到。

function foo(){
var a = 2;

function bar() {
console.log(a);
}
return bar;
}
var baz = foo();
baz();//2

下面再看看如何实现函数缓存，实现原理也很简单，把参数和对应的结果数据存在一个对象中，调用时判断参数对应的数据是否存在，存在就返回对应的结果数据，否则就返回计算结果。

const memoize = function (func, content) {
let cache = Object.create(null)
content = content || this
return (…key) => {
if (!cache[key]) {
cache[key] = func.apply(content, key)
}
return cache[key]
}
}

调用方式也很简单

const calc = memoize(add);
const num1 = calc(100,200)
const num2 = calc(100,200) // 缓存得到的结果

过程分析：


* 在当前函数作用域定义了一个空对象，用于缓存运行结果。
* 运用柯里化返回一个函数，返回的函数由于闭包特性，可以访问到cache。
* 然后判断输入参数是不是在cache的中。如果已经存在，直接返回cache的内容，如果没有存在，使用 函数func对输入参数求值，然后把结果存储在cache中。


**应用场景**


虽然使用缓存效率是非常高的，但并不是所有场景都适用，因此千万不要极端的将所有函数都添加缓存


以下几种情况下，适合使用缓存：


* 对于昂贵的函数调用，执行复杂计算的函数
* 对于具有有限且高度重复输入范围的函数
* 对于具有重复输入值的递归函数
* 对于纯函数，即每次使用特定输入调用时返回相同输出的函数


## 2. 说说 JavaScript 中内存泄漏有哪几种情况？


内存泄漏（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存。并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存。对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。


#### 垃圾回收机制


Javascript 具有自动垃圾回收机制（GC：Garbage Collecation），也就是说，执行环境会负责管理代码执行过程中使用的内存。原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存


通常情况下有两种实现方式：


标记清除  
 引用计数


#### 标记清除


JavaScript最常用的垃圾收回机制


当变量进入执行环境是，就标记这个变量为“进入环境“。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“。垃圾回收程序运行的时候，会标记内存中存储的所有变量。然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉。在此之后再被加上标记的变量就是待删除的了，原因是任何在上下文中的变量都访问不到它们了。随后垃圾回收程序做一次内存清理，销毁带标记的所有值并收回它们的内存。举个例子：

var m = 0,n = 19 // 把 m,n,add() 标记为进入环境。
add(m, n) // 把 a, b, c标记为进入环境。
console.log(n) // a,b,c标记为离开环境，等待垃圾回收。
function add(a, b) {
a++
var c = a + b
return c
}

#### 引用计数


语言引擎有一张"引用表"，保存了内存里面所有的资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。如果一个值不再需要了，引用数却不为0，垃圾回收机制无法释放这块内存，从而导致内存泄漏。

const arr = [1, 2, 3, 4];
console.log(‘hello world’);

上面代码中，数组[1, 2, 3, 4]是一个值，会占用内存。变量arr是仅有的对这个值的引用，因此引用次数为1。尽管后面的代码没有用到arr，它还是会持续占用内存


如果需要这块内存被垃圾回收机制释放，只需要设置如下：

1arr = null

通过设置arr为null，就解除了对数组[1,2,3,4]的引用，引用次数变为 0，就被垃圾回收了


#### 小结


有了垃圾回收机制，不代表不用关注内存泄露。那些很占空间的值，一旦不再用到，需要检查是否还存在对它们的引用。如果是的话，就必须手动解除引用。


**常见内存泄露情况**


意外的全局变量

function foo(arg) {
bar = “this is a hidden global variable”;
}

另一种意外的全局变量可能由 this 创建：

function foo() {
this.variable = “potential accidental global”;
}
// foo 调用自己，this 指向了全局对象（window）
foo();

上述使用严格模式，可以避免意外的全局变量。  
 定时器也常会造成内存泄露

var someResource = getData();
setInterval(function() {
var node = document.getElementById(‘Node’);
if(node) {
// 处理 node 和 someResource
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);

如果id为Node的元素从DOM中移除，该定时器仍会存在，同时，因为回调函数中包含对someResource的引用，定时器外面的someResource也不会被释放。包括我们之前所说的闭包，维持函数内局部变量，使其得不到释放。

function bindEvent() {
var obj = document.createElement(‘XXX’);
var unused = function () {
console.log(obj, ‘闭包内引用obj obj不会被释放’);
};
obj = null; // 解决方法
}

没有清理对DOM元素的引用同样造成内存泄露

const refA = document.getElementById(‘refA’);
document.body.removeChild(refA); // dom删除了
console.log(refA, ‘refA’); // 但是还存在引用能console出整个div 没有被回收
refA = null;
console.log(refA, ‘refA’); // 解除引用

包括使用事件监听addEventListener监听的时候，在不监听的情况下使用removeEventListener取消对事件监听。


### 3. 说说你对BOM的理解，以及常见的BOM对象有哪些？


BOM (Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象。


其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。


浏览器的全部内容可以看成DOM，整个浏览器可以看成BOM。区别如下：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/577075155e9240f3ac53447803ad6cda.png)


BOM的核心对象是window，它表示浏览器的一个实例。


在浏览器中，window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象。


因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。


### 4. 谈谈对 this 对象的理解


函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象。


* 绑定规则  
 根据不同的使用场合，this有不同的值，主要分为下面几种情况：默认绑定，隐式绑定，new绑定，显示绑定。
* 箭头函数  
 在 ES6 的语法中还提供了箭头函语法，让我们在代码书写时就能确定 this 的指向（编译时绑定）
* 优先级  
 new绑定优先级 > 显示绑定优先级 > 隐式绑定优先级 > 默认绑定优先级


### 5. 什么是作用域链？


作用域，即变量（变量作用域又称上下文）和函数生效（能被访问）的区域或集合。换句话说，作用域决定了代码区块中变量和其他资源的可见性。我们一般将作用域分成：


* 全局作用域  
 任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问。
* 函数作用域  
 函数作用域也叫局部作用域，如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问，不能在函数以外去访问。
* 块级作用域  
 ES6引入了let和const关键字,和var关键字不同，在大括号中使用let和const声明的变量存在于块级作用域中。在大括号之外不能访问这些变量。


### 6. 谈谈 Javascript 中的类型转换机制


常见的类型转换有：


* 强制转换（显示转换）
* 自动转换（隐式转换）


**显示转换**


显示转换，即我们很清楚可以看到这里发生了类型的转变，常见的方法有：


* Number()
* parseInt()
* String()
* Boolean()


**隐式转换**


在隐式转换中，我们可能最大的疑惑是 ：何时发生隐式转换？


我们这里可以归纳为两种情况发生隐式转换的场景：


* 比较运算（==、!=、>、<）、if、while需要布尔值地方
* 算术运算（+、-、\*、/、%）


除了上面的场景，还要求运算符两边的操作数不是同一类型。