JavaScript 弱引用强引用底层示例详解

JavaScript 弱引用和强引用底层示例详解

什么是引用

在 JavaScript 中,引用是指对内存中存储的对象的指针。当创建一个对象时,JavaScript 会为其在内存中分配一块区域,并返回一个引用,用于在程序执行时访问该对象。在 JavaScript 中,所有变量都是通过引用来存储和访问的,因此引用是非常重要的概念。

弱引用和强引用

在 JavaScript 中,为了确保内存不会被无限占用,需要自动清理不再使用的对象。这就需要对引用的类型进行区分,通常可以分为弱引用和强引用。

弱引用

弱引用是指当对象所持有的所有强引用都被释放后,该对象就会被自动回收。所以弱引用通常用于缓存、垃圾回收和对象绑定等场景。

在 JavaScript 中,可以通过以下两种方式来创建弱引用:

WeakMap

WeakMap 是 JavaScript 中的一个特殊对象,用于存储键值对。WeakMap 和 Map 类似,当键值对的键被释放时,值也会被自动删除。

以下是使用 WeakMap 创建弱引用的示例:

const wm = new WeakMap()
const obj1 = {}
const obj2 = {}
wm.set(obj1, 'hello')
wm.set(obj2, 'world')
console.log(wm.get(obj1)) // 'hello'
console.log(wm.get(obj2)) // 'world'
obj1 = null
console.log(wm.get(obj1)) // undefined

WeakSet

WeakSet 是 JavaScript 中用于存储一组值的集合,它们可以是任意类型的值。当一个值被释放时,它会被自动从集合中删除。

以下是使用 WeakSet 创建弱引用的示例:

const ws = new WeakSet()
const obj1 = {}
const obj2 = {}
ws.add(obj1)
ws.add(obj2)
console.log(ws.has(obj1)) // true
console.log(ws.has(obj2)) // true
obj1 = null
console.log(ws.has(obj1)) // false

强引用

强引用是指当对象被一个或多个强引用所引用时,该对象会一直存在于内存中,不会被自动回收。

在 JavaScript 中,常用的为强引用的场景是:对象作为一个方法的参数或返回值传递时,或者对象绑定到了全局变量上。

以下是使用常规方式创建强引用的示例:

const obj1 = {}
const obj2 = {}
const obj3 = obj1
console.log(obj1 === obj3) // true
obj3 = obj2
console.log(obj1 === obj3) // false

示例

以下为2个示例分别使用了弱引用和强引用:

示例1:WeakMap 实现缓存

WeakMap 可以非常方便地实现缓存功能,当缓存中的对象不再被引用时,就会自动清理。

class Cache {
  constructor() {
    this._cache = new WeakMap()
  }

  getItem(key) {
    return this._cache.get(key)
  }

  setItem(key, value) {
    this._cache.set(key, value)
  }

  deleteItem(key) {
    this._cache.delete(key)
  }
}

const cache = new Cache()
const obj = {}
cache.setItem(obj, 'hello')
console.log(cache.getItem(obj)) // 'hello'
obj = null
console.log(cache.getItem(obj)) // undefined

示例2:强引用绑定全局变量

强引用通常用于保持对象的生命周期和可访问性。

// 将对象绑定到全局变量上
const obj = {}
window.obj = obj

// 从全局变量中删除对象
delete window.obj

// 观察对象是否被回收
let count = 0
const interval = setInterval(() => {
  if (count > 10) {
    clearInterval(interval)
    console.log('清理完成')
  } else {
    console.log('对象已释放' + (window.obj === undefined))
    count++
  }
}, 500)

在以上示例中,我们将一个对象绑定到了全局变量 window 上,并通过 delete 运算符删除该对象。然后,通过 setInterval 方法,在短时间内进行多次判断,以观察该对象的生命周期。

总结

弱引用和强引用都是 JavaScript 中的重要概念,它们可以帮助我们更好地控制内存的使用和回收。在实际编程中,需要根据具体情况灵活选择不同类型的引用,以适应不同的需求和场景。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript 弱引用强引用底层示例详解 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 动态调用CSS文件的JS代码

    动态调用 CSS 文件的 JS 代码是一种在页面加载时引入 CSS 文件的方式,这种方式可以使页面的开发更加灵活,可以根据不同的需求加载不同的 CSS 文件。下面是实现动态调用 CSS 文件的 JS 代码的完整攻略: 创建一个空的 link 元素 在页面中创建一个空的 link 元素,它的 href 属性指向 CSS 文件的路径,rel 属性为 styles…

    JavaScript 2023年6月11日
    00
  • 基于Two.js实现星球环绕动画效果的示例

    以下是 “基于Two.js实现星球环绕动画效果的示例”的完整攻略: 1. Two.js简介 Two.js是一款轻量级的渲染工具库,可以轻松使用它来创建2d图形和动画。 2. 创建场景和画布 这个示例的第一步是使用Two.js创建一个场景和画布。 // 创建画布 var two = new Two({ fullscreen: true, autostart: …

    JavaScript 2023年6月11日
    00
  • js实现数据双向绑定(访问器监听)

    数据双向绑定是前端开发中常用的技术,可以实现数据和页面UI的同步更新。其中一种常用的实现方式是使用访问器监听。以下是实现数据双向绑定的完整攻略: 步骤一:创建数据对象 首先,需要在Javascript中创建一个数据对象,该对象的属性可以通过访问器方法来监控对象属性的读取和修改。 let data = {} // 创建一个数据对象 Object.defineP…

    JavaScript 2023年6月10日
    00
  • 了解一下XSS

    XSS,即跨站脚本攻击(Cross-Site Scripting),是一种常见的网络安全漏洞,攻击者通过在网页中注入恶意脚本代码,使得浏览器执行这些脚本,从而控制网页上的内容或者获取用户的敏感信息。XSS 攻击一般分为反射型、存储型和 DOM 型三种类型。 1. 反射型 XSS 攻击 反射型 XSS 攻击是指攻击者通过向目标网站提交带有恶意脚本代码的请求,使…

    JavaScript 2023年4月25日
    00
  • JavaScript中Dom操作实例详解

    JavaScript中Dom操作实例详解 什么是Dom Dom,即Document Object Model,指的是文档对象模型。 它是一个用于HTML和XML文档的编程接口,可以改变或者操作文档的内容、结构和样式。 通过Dom,我们可以像操作HTML页面一样,动态地修改页面上的内容和样式,实现网页的交互和动态效果。 Dom元素的选取 通过Dom元素的选取,…

    JavaScript 2023年6月10日
    00
  • JavaScript实现的前端AES加密解密功能【基于CryptoJS】

    标题: JavaScript实现的前端AES加密解密功能【基于CryptoJS】 正文: JavaScript实现的前端AES加密解密功能主要解决的问题是数据在前端页面上进行加密和传输,保证数据的安全性。基于CryptoJS实现前端AES加密解密功能的攻略如下: 1. 引入CryptoJS库 在HTML文件中引入CryptoJS库文件,可以通过CDN方式引入…

    JavaScript 2023年5月20日
    00
  • HTML5 History API 实现无刷新跳转

    HTML5 History API 是HTML5新增的一个API,通过该API可以更好地管理浏览器的历史记录和URL,实现无刷新跳转。 下面是HTML5 History API 实现无刷新跳转的具体步骤: 步骤一:改变URL,更新浏览器历史记录 使用HTML5 History API,可以通过调用window.history.pushState()方法来改变…

    JavaScript 2023年6月11日
    00
  • javascript格式化指定日期对象的方法

    要格式化指定日期对象,我们可以使用JavaScript的内置Date对象中的方法。 1、使用toLocaleString()方法 Date对象内置方法toLocaleString()能够格式化日、月、年、小时、分钟、秒和时间格式。例如: const date = new Date(); const formattedDate = date.toLocaleS…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部