每天10个前端小知识 <Day 8>

2024-01-21

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

函数缓存,就是将函数运算过的结果进行缓存。本质上就是用空间(缓存存储)换时间(计算过程), 常用于缓存数据计算结果和缓存对象。缓存只是一个临时的数据存储,它保存数据,以便将来对该数据的请求能够更快地得到处理。

实现函数缓存 主要依靠闭包、柯里化、高阶函数,这里再简单复习下:

闭包
闭包可以理解成,函数 + 函数体内可访问的变量总和

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

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

柯里化
把接受多个参数的函数转换成接受一个单一参数的函数

// 非函数柯里化
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

将一个二元函数拆分成两个一元函数

高阶函数
通过接收其他函数作为参数或返回其他函数的函数

function foo(){
  var a = 2;

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

函数 foo 如何返回另一个函数 bar baz 现在持有对 foo 中定义的 bar 函数的引用。由于闭包特性, a 的值能够得到。
下面再看看如何实现函数缓存,实现原理也很简单,把参数和对应的结果数据存在一个对象中,调用时判断参数对应的数据是否存在,存在就返回对应的结果数据,否则就返回计算结果

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 。区别如下:
img 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变量传递到定时器中
for(var i = 1;i <= 5;i++){
  (function(j){
    setTimeout(function timer(){
    	console.log(j)
    }, 0)
  })(i)
}
  • 给定时器传入第三个参数, 作为timer函数的第一个函数参数
for(var i=1;i<=5;i++){
  setTimeout(function timer(j){
  	console.log(j)
  }, 0, i)
}
  • 使用ES6中的let
for(let i = 1; i <= 5; i++){
  setTimeout(function timer(){
 	 console.log(i)
  },0)
}

(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
for(let i = 1; i <= 5; i++){
  setTimeout(function timer(){
 	 console.log(i)
  },0)
}

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

每天10个前端小知识 <Day 8> 的相关文章

  • ir41_qc.dll文件丢失导致程序无法运行问题

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个ir41 qc
  • inetcomm.dll文件丢失导致程序无法运行问题

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个inetcom
  • iPhone应用商店即将开放,最晚3月7日前!

    iPhone的 侧载 功能马上就要来了 据彭博社马克 古尔曼 Mark Gurman 在最新一期的 Power On 中报道 为了应对欧盟即将实施的 数字市场法案 DMA 苹果正准备在未来几周内将应用商店 一分为二 在欧洲区域开放应用侧载功
  • 关于整型提升与截断的一道题目

    关于整型提升与截断 可以看我的博客 C语言 整型提升 c语言整形提升 CSDN博客 C语言 截断 整型提升 算数转换练习 c语言unsigned CSDN博客 一 题目 二 题解 char a 101截断 由于101是整型数据 需要32比特

随机推荐

  • 『C++成长记』内存管理

    博客主页 小王又困了 系列专栏 C 人之为学 不日近则日退 感谢大家点赞 收藏 评论 目录 一 C C 内存分布 二 内存管理方式 2 1C语言内存管理方式 2 2C 内存管理方式 2 2 1new delete操作内置类型 2 2 1ne
  • 线程安全(中)--彻底搞懂synchronized(从偏向锁到重量级锁)

    接触过线程安全的同学想必都使用过synchronized这个关键字 在java同步代码快中 synchronized的使用方式无非有两个 通过对一个对象进行加锁来实现同步 如下面代码 synchronized lockObject 代码 对
  • 前端必备的 web 安全知识手记

    前言 安全这种东西就是不发生则已 一发生则惊人 作为前端 平时对这方面的知识没啥研究 最近了解了下 特此沉淀 文章内容包括以下几个典型的 web 安全知识点 XSS CSRF 点击劫持 SQL 注入和上传问题等 下文以小王代指攻击者 话不多
  • WEB前端常见受攻击方式及解决办法总结

    一个网址建立后 如果不注意安全问题 就很容易被人攻击 下面讨论一下集中漏洞情况和放置攻击的方法 一 SQL注入 所谓的SQL注入 就是通过把SQL命令插入到web表单提交或输入域名或页面请求的查询字符串 最终达到欺骗服务器执行恶意的SQL命
  • Linux终端常见用法总结

    熟悉Linux终端的基础用法和常见技巧可以极大提高运维及开发人员的工作效率 笔者结合自身学习实践 总结以下终端用法供同行交流学习 常 见 用 法 1 快捷键 1 1 Alt 在光标位置插入上一次执行命令的最后一个参数 1 2 Ctrl R
  • Locust负载测试工具实操

    本中介绍如何使用Locust为开发的服务 网站执行负载测试 Locust 是一个开源负载测试工具 可以通过 Python 代码构造来定义用户行为 避免混乱的 UI 和臃肿的 XML 配置 步骤 设置Locust 在简单的 HTTP 服务上模
  • 【VUE毕业设计】基于SSM的农业商品信息管理权限后台子网站(含源码+论文)

    文章目录 1 项目简介 2 实现效果 2 1 界面展示 3 设计方案 3 1 概述 3 2 系统流程 3 3 系统结构设计 4 项目获取
  • 【VUE毕业设计】基于SSM的停车位短租网站(含源码+论文)

    文章目录 1 项目简介 2 实现效果 2 1 界面展示 3 设计方案 3 1 概述 3 2 系统业务流程 3 3 系统结构设计 4 项目获取
  • 每天10个前端小知识 <Day 7>

    前端面试基础知识题 1 什么是尾调用优化和尾递归 尾调用的概念非常简单 一句话就能说清楚 就是指某个函数的最后一步是调用另一个函数 function f x return g x 上面代码中 函数f的最后一步是调用函数g 这就叫尾调用 尾调
  • J2EE常见面试题(一)

    StringBuilder和StringBuffer的区别 String 字符串常量 不可变 使用字符串拼接时是不同的2个空间 StringBuffer 字符串变量 可变 线程安全 字符串拼接直接在字符串后追加 StringBuilder
  • 苹果要在iPhone上运行AI大模型?

    近两年 人工智能 AI 技术已经成为各大科技公司的重点研究领域 苹果公司自然也不甘落后 最新消息称 苹果甚至打算在iPhone上直接运行AI大模型 据苹果AI研究人员表示 他们 发明了一种创新的闪存利用技术 这是一项重要的技术突破 可以在i
  • input.dll文件丢失导致程序无法运行问题

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个input d
  • python基础语法看一篇就够了,全网最全python语法笔记汇总

    前言 Python 是一种代表简单思想的语言 其语法相对简单 很容易上手 不过 如果就此小视 Python 语法的精妙和深邃 那就大错特错了 如能在实战中融会贯通 灵活使用 必将使代码更为精炼 高效 同时也会极大提升代码B格 使之看上去更老
  • Python简介-Python入门到精通

    Python的创始人为荷兰人吉多 范罗苏姆 Guido van Rossum 1989年圣诞节期间 在阿姆斯特丹 Guido为了打发圣诞节的无趣 决心开发一个新的脚本解释程序 作为ABC语言的一种继承 之所以选中Python 大蟒蛇的意思
  • ir41_qcx.dll文件丢失导致程序无法运行问题

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个ir41 qc
  • iPhone是国内最畅销的智能手机

    据调研机构BCI发布最新数据显示 去年中国一共卖出2 7亿部智能手机 其中 苹果的iPhone系列是国内最畅销的机型 其中 苹果以17 1 的市场份额占据了第一 而vivo手机和OPPO则以16 7 和16 紧随其后 接着是荣耀 小米 华为
  • 【基于MPC飞行器最佳控制】针对固定翼飞行器的最短时间航迹的最佳控制策略,考虑航路点约束研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现
  • ipsmsnap.dll文件丢失导致程序无法运行问题

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个ipsmsna
  • iologmsg.dll文件丢失导致程序无法运行问题

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个iologms
  • 每天10个前端小知识 <Day 8>

    1 Javascript中如何实现函数缓存 函数缓存有哪些应用场景 函数缓存 就是将函数运算过的结果进行缓存 本质上就是用空间 缓存存储 换时间 计算过程 常用于缓存数据计算结果和缓存对象 缓存只是一个临时的数据存储 它保存数据 以便将来对