前端面试题——方法的惰性载入

其实作者在被问到这个问题的时候也是一脸懵逼的，因为实际项目中并没有用到过【方法惰性载入】，所以就很老实地说了不了解

其实这个点在红皮书——《 js 高程 》里面是有过介绍的，那么下面就由作者带着小伙伴们一起探究一下，究竟什么是【方法的惰性载入】

什么是方法的惰性载入

说到 ”惰性“ ，第一个想到的应该是图片的懒加载，因为”惰“和”懒“是近义词，所以是不是就是说，惰性载入的方法和图片懒加载一样，都是到需要使用的时候才被加载的？其实并不是的

这里的惰性载入指的是，当这个方法中有多个 分支，如多个 if 分支时，只在第一次的时候进行条件判断，之后再次使用时就不进行判断

是不是有点蒙？既然是判断，难道不应该每次都进行判断么？为什么会有这种奇怪的需求？

其实并不难理解，我们平时写的判断因为判断条件可能会被改变，所以需要每次都进行判断；但是当我们判断的对象是一个在当前页面不会再次被改变的对象时，惰性载入的作用就显示出来了

举个栗子，一个视频播放的方法需要对不同的浏览器采取不同的对策，在 IE 中采用 flash ，而其他浏览器中不使用。由于除非换浏览器，否则是否是 IE 这个条件的值不会被改变，这样采用惰性载入，就可以在多次调用时有明显的优势

惰性载入的两种实现方式

还是以视频播放为例，假设一个变量表示当前浏览器是否为 IE

var isIE = true //当前为 非IE 浏览器

第一种 —— 方法调用时处理

function showVedio() {
    console.log('第一次调用 showVedio')

    if (isIE) {
        showVedio = function () {
            console.log('在 IE 中调用 showVedio')
        }
    } else {
        showVedio = function () {
            console.log('在 非IE 中国调用 showVedio')
        }
    }

    showVedio();
}

showVedio();
// 第一次调用 showVedio
// 在 非IE 中国调用 showVedio

showVedio();
// 在 非IE 中国调用 showVedio

showVedio();
// 在 非IE 中国调用 showVedio

上面的 showVedio方法在第一次调用时，进入了不是 IE 的判断，并重新为showVedio方法定义了一个函数，将原来的函数覆盖，这样之后再次调用时，showVedio会直接执行新的函数，而不会进入 if

第二种 —— 声明时即处理

var showVedio = function () {
    console.log('第一次调用 showVedio')

    if (isIE) {
        return function () {
            console.log('在 IE 中调用 showVedio')
        }
    } else {
        return function () {
            console.log('在 非IE 中国调用 showVedio')
        }
    }
}()
// 第一次调用 showVedio

showVedio();
// 在 非IE 中国调用 showVedio

showVedio();
// 在 非IE 中国调用 showVedio

showVedio();
// 在 非IE 中国调用 showVedio

通过立即执行函数，使函数在被声明时就执行，进入判断后返回一个新的函数，使其在被声明时就决定适当的函数

两种方式的对比

上文两种方式的基本原理是一样的，都是在第一次执行时，根据条件覆盖或返回一个新的函数，从而避免之后调用再次进行判断，提高了代码运行的效率

但是两种方式也存在一定的区别，很容易就能发现，第一种在加载时性能会更好，而第一次调用时会略微损耗性能；而第二种由于在加载时就已经执行，所以第一次调用的性能会更好，而加载时会稍差

惰性载入与普通多分支方法的区别

惰性载入能提高性能和效率，但并不是万能的，我们要知道他的使用情况比较单一：当前页面判断条件必须始终不变。如果条件会频繁改变的话，则必须使用普通多分支方法

扫码关注公众号