JavaScript变量是引用、值还是指针

Question

搜索并没有得到我想要的答案。

我很好奇将变量设置为查询选择器是引用、指针还是值。

示例1:

// lets assume there is only one ".class"
var element = document.queryselector(".class");
element.classList.remove("effect1");
element.classList.add("effect2");

示例2:

document.queryselector(".class").classList.remove("effect1");
document.queryselector(".class").classList.add("effect2");

这些是完全一样的东西吗？或者通过将变量设置为选择器，您是否节省了开销？

我的想法是，如果变量是一个值，那么查询选择器在使用变量时不会搜索DOM。

希望这是有道理的。

Answer 1

在Javascript中，对象总是通过引用传递的，因此两个示例具有相同的效果，因为document.querySelector返回一个DOM元素(它是一个对象(。

仅供参考：

• 基元类型总是通过值传递
• 数组也通过引用传递

您的第一个示例要高效得多，因为您只需要搜索DOM一次，它们的效果绝对没有区别。

Answer 2

Javascript总是按值传递，但当变量引用对象(包括数组(时；值"；是对对象的引用。

var element = document.queryselector(".class"); // element is an object

所以这两个例子完全一样。幕后只是访问元素对象的classList属性。

是的，第一个代码片段是有效的，因为我们节省了一个周期来再次获取DOM节点。如果我们只访问几次dom元素节点，比如10-100(通常在中大型项目中(，那么性能不会受到太大影响。我的意思是你可以忽略这一点。这不会是一个剧烈的影响。但是，是的，如果我们访问dom节点一百万次，那么这种影响是显而易见的。让我们检查100万次，只是为了访问DOM元素节点。

first = performance.now();
new Array(1000000).fill(1).forEach(() => {
div = document.querySelector('div');
})
second = performance.now();
console.log(`${second - first} milliseconds`);   //337.2850000159815 milliseconds
// Result can alter from machine to machine

希望现在一切都清楚了。