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日

相关文章

  • js统计页面的来访次数实现代码

    要实现 js 统计页面来访次数,需要用到以下步骤: 创建一个用来记录访问次数的变量 首先,我们需要创建一个变量来储存网页的访问次数。这个计数器可以使用本地存储(localStorage)来保存,保证每次刷新页面访问次数不会被重置。 // 初始化访问次数为0 var pageViewCount = 0; // 在本地存储中查找是否有访问次数 if (local…

    JavaScript 2023年6月11日
    00
  • jquery自定义表单验证插件

    请允许我详细讲解一下如何创建一个使用jQuery自定义表单验证插件的过程。 什么是jQuery自定义表单验证插件? jQuery自定义表单验证插件是用于验证表单数据的插件,它使用jQuery作为基础,并可以很容易地自定义来验证不同类型的表单数据。通过使用这个插件,可以将验证逻辑简洁明了地编写在你的前端代码上,可以有效地减少后端代码的数量并极大地提高表单数据的…

    JavaScript 2023年6月10日
    00
  • 被遗忘的javascript的slice() 方法

    下面我为大家讲解一下”被遗忘的JavaScript的slice() 方法”。 什么是slice()方法? slice()方法是JavaScript数组中的一个方法,用于返回一个从指定开始下标到结束下标(不包括结束下标)的子数组,并不会影响到原数组。 slice()方法的语法 array.slice(start, end) 其中start和end都是可选参数,…

    JavaScript 2023年5月27日
    00
  • JS生成一维码(条形码)功能示例

    下面是关于“JS生成一维码(条形码)功能示例”的完整攻略: 步骤一:导包 在JS中,我们可以使用第三方库JSBarcode来生成一维码(条形码)。因此,在使用该功能之前,首先要导入JSBarcode库。 <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarc…

    JavaScript 2023年5月19日
    00
  • javascript中replace( )方法的使用

    下面是关于 JavaScript 中 replace() 方法的完整攻略。 replace() 方法简介 replace() 方法是 JavaScript 中一个非常常用的字符串方法,它用于查找和替换字符串中的某些字符或者子字符串。replace() 方法的语法如下: str.replace(regexp|substr, newSubStr|function…

    JavaScript 2023年5月27日
    00
  • javascript 中对象的继承〔转贴〕

    以下是javascript中对象的继承攻略: 1. 继承的概念 在Javascript中,可以通过继承的方式来实现代码的复用性。继承是一种以已有类(或对象)为基础,创建新类(或对象)的技术,新创建的类或对象具有已有类(或对象)的属性和行为。 2. 原型链继承 原型链继承是Javascript中最基础的继承方式,它的原理就是通过让一个构造函数的原型指向另一个构…

    JavaScript 2023年5月27日
    00
  • JavaScript操作Cookie详解

    当我们开发Web应用程序时,经常会使用cookie来存储和维护用户的数据,在JavaScript中,对cookie的操作可以使用document.cookie属性来完成。本篇攻略将详细介绍JavaScript中对cookie的操作。 创建与修改Cookie JavaScript中创建和修改cookie的方法都是通过设置document.cookie属性实现。…

    JavaScript 2023年6月11日
    00
  • JavaScript的removeChild()函数用法详解

    JavaScript的removeChild()函数用法详解 什么是removeChild()函数? 在JavaScript中,使用removeChild()函数可以删除指定的子节点。 removeChild()函数的用法 要使用removeChild()函数,需要先找到要删除的节点,然后将其作为参数传递给removeChild()函数。例如: var el…

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