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

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

其实这个点在红皮书——《 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

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

两种方式的对比

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

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

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

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

前端面试题——方法的惰性载入_第1张图片
扫码关注公众号

你可能感兴趣的:(前端面试题——方法的惰性载入)