gpt4 book ai didi

javascript - new 关键字如何影响 JavaScript 代码

转载 作者:行者123 更新时间:2023-11-30 09:57:15 24 4
gpt4 key购买 nike

<!DOCTYPE html>
<html>
<body>
<p>Counting with a local variable.</p>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo"></p>
<script>
function Add(x) {
this.counter = x;
return function () {return this.counter += 1;}
};
var add = Add(0);

当我将 "var add = Add(0);" 替换为 "var add = new Add(0)" 时,输出显示为“NaN”。为什么?这实际上是如何工作的?

function myFunction(){
document.getElementById("demo").innerHTML = add();
for each click 1, 2, 3 ....

}
</script>
</body>
</html>

最佳答案

new 用于根据现有定义(您存储在 Add 中)创建新实例。您返回的不是一个实例,而是一个函数,因此它没有按您预期的那样运行。

这种形式应该有效:

function Add(x) {
this.counter = x;

this.addOne = function() {
return this.counter += 1;
}
}

var add = new Add(0);

function myFunction() {
document.getElementById("demo").innerHTML = add.addOne();
}

关于为什么您的代码返回 NaN 的问题,让我们看看您在做什么:

function Add(x) {
this.counter = x;
return function () {return this.counter += 1;}
};
var add = new Add(0);
function myFunction(){
document.getElementById("demo").innerHTML = add();
}

在这里您声明了一个变量 add 并使用 new Add(0) 对其进行了初始化。首先,Add 函数在其自己的作用域中声明了一个名为 counter 的属性,并为其分配通过名为 x 的参数传入的值(0,在这种情况下)。然后,它返回一个函数。然后它退出,不再需要,并被垃圾收集。分配给 counter 属性的值被丢弃,因为它所附加的 this 已超出范围。

您现在将 add 作为指向函数的指针。它没有名为 counter 的属性。当您调用 add() 函数时,它会尝试将 1 添加到 this.counter。由于未定义 this.counter,因此它自动具有值 undefined

如果您尝试将一个数字添加到undefined,您将得到NaN。由于这发生在 return 语句中,因此返回 NaN

关于javascript - new 关键字如何影响 JavaScript 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33458945/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com