看下面这份ts代码

实现的效果也很简单,就是将一份文本,复制到剪切板上,未了兼容更多的浏览器(没错说的就是你=>ie !),做了一个兼容性判断,
当浏览器支持navigator.clipboard这个api时,就直接调用这个api将文本复制到剪切板中,
如果不支持这个api的话,就执行else里面的代码,这段代码会创建一个input输入框,然后将需要复制到剪切板的文本放到这个input框里面,然后将input放入body标签,再然后选中这个输入框,再执行复制命令,最后销毁这个input框,

这样写这份代码,功能性上肯定是没什么问题,但是这份代码是有缺陷的,比如当我第一吃执行完这个代码的时候,我们就已经知道了,我们用的是什么浏览器了,浏览器支不支持这个api,在第一次调用的时候就已经可以确定了,但是我们这份代码却需要`在每一次调用的时候,都重新去判段浏览器支不支持这个api,这显然是浪费性能的,所以我们就需要对这份代码进行改造,希望第一次运行时,确定了是要执行那一份代码的时候,后面再执行,就不再做判断了

这时候就需要将它改成惰性函数了,如下
…它还不允许,稍等,我改下

如下,copyText 函数第一次运行时,函数判断浏览器支不支持navigator.clipboard这个api,如果浏览器支持这个api就会将这个函数改成第一种格式,如果不支持,就改成第二种模式,这样的话,下次再执行copText函数的话,就不会在次去判断浏览器支不支持这个api了

当然,就这样改还不行,因为现在第一次调用这个函数的时候,只是将函数更改了,所以还需要再调用一次这个改过的函数

tips: 一不小心加上了注释
这样改完之后,就算是解决了那个问题,就剩检验了,将上面的ts代码转换成js代码然后运行
得到如下js代码

var copyText = function (text) {
  if (navigator.clipboard) {
    copyText = function (text) { navigator.clipboard.writeText; };
    copyText(text);
  }
  else {
    copyText = function (text) {
      var input = document.createElement('input');
      input.setAttribute('value', text);
      document.body.appendChild(input);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
    };
    copyText(text);
  }
};

丢浏览器内运行

可以看到copy还未运行时是这样的,我们运行一次copyText然后再查看

如上图,可以看到,当我们执行了一次copyText函数后,函数就变成了

copyText = function (text) { navigator.clipboard.writeText; };

也就是说下次再次执行copyText函数时,将不会再做浏览器判断

总结

这种技术被称为“惰性函数”或“延迟执行”。它的核心思想是在函数首次调用时，根据不同的输入参数，函数的行为会被修改并确定下来，以避免在后续调用中再次执行完整的计算流程。这样可以提高程序的执行效率，并使代码更加简洁。