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

前端面试基础知识题

1. Javascript中如何实现函数缓存？函数缓存有哪些应用场景？

函数缓存，就是将函数运算过的结果进行缓存。本质上就是用空间（缓存存储）换时间（计算过程），常用于缓存数据计算结果和缓存对象。缓存只是一个临时的数据存储，它保存数据，以便将来对该数据的请求能够更快地得到处理。实现函数缓存主要依靠闭包、柯里化、高阶函数，这里再简单复习下：

闭包

闭包可以理解成，函数函数体内可访问的变量总和。 add 函数本身，以及其内部可访问的变量，即 a = 1 ，这两个组合在⼀起就形成了闭包。

代码语言：javascript复制

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

柯里化

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

代码语言：javascript复制

// 非函数柯里化
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的值能够得到。

代码语言：javascript复制

function foo(){
  var a = 2;

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

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

代码语言：javascript复制

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]
  }
}

调用方式也很简单

代码语言：javascript复制

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最常用的垃圾收回机制

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

代码语言：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，垃圾回收机制无法释放这块内存，从而导致内存泄漏。

代码语言：javascript复制

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

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

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

代码语言：javascript复制

1arr = null

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

小结

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

常见内存泄露情况

意外的全局变量

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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也不会被释放。包括我们之前所说的闭包，维持函数内局部变量，使其得不到释放。

代码语言：javascript复制

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

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

代码语言：javascript复制

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。区别如下：

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需要布尔值地方
算术运算（、-、*、/、%）

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

7. ES6中新增的Set、Map两种数据结构怎么理解?

如果要用一句来描述，我们可以说

Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构。

什么是集合？什么又是字典？

集合是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合
字典是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同

区别

共同点：集合、字典都可以存储不重复的值。不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储。

8. 如何确保你的构造函数只能被new调用，而不能被普通调用？

JavaScript 中的函数一般有两种使用方式:

当作构造函数使用: new Func()
当作普通函数使用: Func()

但 JavaScript 内部并没有区分两者的方式，我们人为规定构造函数名首字母要大写作为区分。也就是说，构造函数被当成普通函数调用不会有报错提示。

三种方法限制构造函数只能被 new 调用的方案

借助 instanceof 和 new 绑定的原理，适用于低版本浏览器
借助 new.target 属性，可与 class 配合定义抽象类
面向对象编程使用 ES6 class——最佳方案

9. forEach中return有效果吗？如何中断forEach循环？

在forEach中用return不会返回，函数会继续执行。中断方法：使用try监视代码块，在需要中断的地方抛出异常。官方推荐方法（替换方法）：用every和some替代forEach函数。 every在碰到return false的时候，中止循环。 some在碰到return true的时候，中止循环。

10. 改造下面的代码，让它输出1，2，3，4，5]

利用IIFE(立即执行函数表达式)当每次for循环时，把此时的i变量传递到定时器中

代码语言：javascript复制

for(var i = 1;i <= 5;i  ){
  (function(j){
    setTimeout(function timer(){
    	console.log(j)
    }, 0)
  })(i)
}

给定时器传入第三个参数, 作为timer函数的第一个函数参数

代码语言：javascript复制

for(var i=1;i<=5;i  ){
  setTimeout(function timer(j){
  	console.log(j)
  }, 0, i)
}

使用ES6中的let

代码语言：javascript复制

for(let i = 1; i <= 5; i  ){
  setTimeout(function timer(){
 	 console.log(i)
  },0)
}

let使JS发生革命性的变化，让JS有函数作用域变为了块级作用域，用let后作用域链不复存在。

函数内存前端作用域变量

0 人点赞

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

前端面试基础知识题

1. Javascript中如何实现函数缓存？函数缓存有哪些应用场景？

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

垃圾回收机制

标记清除

引用计数

小结

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

4. 谈谈对 this 对象的理解

5. 什么是作用域链？

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

7. ES6中新增的Set、Map两种数据结构怎么理解?

8. 如何确保你的构造函数只能被new调用，而不能被普通调用？

9. forEach中return有效果吗？如何中断forEach循环？

10. 改造下面的代码，让它输出1，2，3，4，5]

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