理解 JavaScript 中的函数引用。

huangapple go评论73阅读模式
英文:

Understanding function referencing in javascript

问题

[3] When c = a; is executed, it assigns the function stored in the variable a to the variable c. So now, both a and c point to the winner function. That's why you see c is: function() { console.log("WINNER!") } in the console log.

[4] Here's where the confusion might come in. When c = a; is executed again, it reassigns the loser function (which is in variable b) to c. This overwrites the previous assignment of a, and now c points to the loser function. So, c is now a reference to the loser function, which is why you see c is: function() { console.log("LOSER!") } in the console log.

The key point to understand is that when you use the = operator to assign a variable to another variable, you are not copying the function or its value. You are simply making both variables point to the same function. Reassigning one of them does not affect the other variables that were pointing to it previously.

英文:

I have been learning JavaScript for sometime now via the HeadFirst JavaScript book.

On page 440 of the book, the below code is called. I have provided everything on this page here.

var winner = function() { console.log("WINNER!") };
var loser = function() { console.log("LOSER!") };
// let's test as a warm up
winner();
// let's assign to other variables for practice
var a = winner;
var b = loser;
var c = loser;
a();
b();
// now let's try your luck with a shell game
c = a;                    //[1]
console.log("c is: " + c);// winner
a = b;                    //[2]
console.log("a is: " + a);// loser
b = c;                    //[3]
console.log("b is: " + b);// loser
c = a;                    //[4]
console.log("c is: " + c);// winner
a = c;                    //[5]
console.log("a is: " + a);// loser
a = b;                    //[6]
console.log("a is: " + a);// loser
b = c;                    //[7]
console.log("b is: " + b);// loser
a(); 

My issue is, I know that the = operator assigns, so my expected answers are those commented out with //. I am confused with some of the results since they overide my previous knowledge of the = operator function.

For example c=a in [1] should bring 'WINNER' because in my understanding the c variable has been assigned to a variable which is 'winner' and thus the end result should be 'WINNER'. This understanding worked [2] which resulted in 'LOSER' but from then on it was all south. Take [4] for example, I thought c=a would return 'WINNER' but it instead returned 'LOSER'. I though c variable being assigned to a would turn to 'winner' since the latter is a = winner but instead returned LOSER. I am kind of confused what's happening here. See the results below, the words after '//' were my expected answers but this is what the console returned.

WINNER!
WINNER!
LOSER!
--------from here ----------------
c is: function() { console.log("WINNER!") }
a is: function() { console.log("LOSER!") }
b is: function() { console.log("WINNER!") }
c is: function() { console.log("LOSER!") }
a is: function() { console.log("LOSER!") }
a is: function() { console.log("WINNER!") }
b is: function() { console.log("LOSER!") }
WINNER!

I would appreciate if you would explain to me the logic behind the answers from [3] downwards.

答案1

得分: 1

以下是翻译好的部分:

可能更容易使用表格跟踪这些值:

a b c
Before [1] 赢家 输家 输家
After [1] (c=a) 赢家 输家 赢家
After [2] (a=b) 输家 输家 赢家
After [3] (b=c) 输家 赢家 赢家
After [4] (c=a) 输家 赢家 输家
After [5] (a=c) 输家 赢家 输家
After [6] (a=b) 赢家 赢家 输家
After [7] (b=c) 赢家 输家 输家

因此,最终 a() 打印出 赢家!

至于与您的期望的差异:

以 [3] 为例。如您在您的帖子中的 // 后所指出的,您期望 b 变为 输家,但实际上它在这里变为了 赢家
这是因为 b = c 使用了那一刻的 c 的值。请注意,c 在 [1] 中之前被重新分配为 赢家,在那一刻它仍然是 赢家。因此,在 [3] 之后,b 也指的是 赢家

其他结果可以以类似的方式解释。

英文:

It may be easier to keep track of the values using a table:

a b c
Before [1] winner loser loser
After [1] (c=a) winner loser winner
After [2] (a=b) loser loser winner
After [3] (b=c) loser winner winner
After [4] (c=a) loser winner loser
After [5] (a=c) loser winner loser
After [6] (a=b) winner winner loser
After [7] (b=c) winner loser loser

So, in the end a() prints WINNER!


As for the differences with your expectations:

Take [3] as an example. As noted after // in your post, you expected b to become loser, but here it actually becomes winner.
That's because b = c uses the value of c at that moment. Note that c was previously re-assigned in to winner in [1], and at that moment it's still winner. <br>So, after [3], b also refers to winner.

The other results can be explained in a similar way.

答案2

得分: 0

I think thanks to @programandoconro and @qrsngky, I should go with what a variable, in this case a, b, or c was last assigned (think of reassignment). For example, if c became winner in step [1], it retains the value WINNER! all through out until it turns to loser when it is assigned to a in step [4] where it turns to loser. I guess I should have in mind that the code is being read from top to bottom, and any changes conducted along the way remain so and affect other variables occuring below it.

我认为多亏了 @programandoconro 和 @qrsngky,我应该按照变量,比如 abc 最后一次分配的值去执行(考虑重新分配)。例如,如果在步骤 [1] 中 c 成为赢家,它会一直保持值 WINNER!,直到在步骤 [4] 中分配给 a 并变成输家。我想我应该记住代码是按顺序从上到下阅读的,沿途进行的任何更改都会保留下来并影响后面出现的其他变量。

I did a rerun of the same exercise and this time, without looking, I guessed the answers as depicted by the comment ///. From the answers, turns out like I sort of got the concept (hopefully).

我重新运行了相同的练习,这次不看的情况下,我根据注释 /// 中描述的答案猜测了答案。从答案中,看起来我对概念有了一定的了解(希望如此)。

Here were my answers. It seems they corroborated well with my above comments.

以下是我的答案。看起来它们与我上面的评论相吻合。

c is: function() { console.log(&quot;WINNER!&quot;) }
a is: function() { console.log(&quot;LOSER!&quot;) }
b is: function() { console.log(&quot;WINNER!&quot;) }
c is: function() { console.log(&quot;LOSER!&quot;) }
a is: function() { console.log(&quot;LOSER!&quot;) }
a is: function() { console.log(&quot;WINNER!&quot;) }
b is: function() { console.log(&quot;LOSER!&quot;) }
WINNER!
英文:

I think thanks to @programandoconro and @qrsngky, I should go with what a variable, in this case a, b, or c was last assigned (think of reassignment). For example, if c became winner in step [1], it retains the value WINNER! all through out until it turns to loser when it is assigned to a in step [4] where it turns to loser. I guess I should have in mind that the code is being read from top to bottom, and any changes conducted along the way remain so and affect other variables occuring below it.

I did a rerun of the same exercise and this time, without looking, I guessed the answers as depicted by the comment ///. From the answers, turns out like I sort of got the concept (hopefully).

// now let&#39;s try your luck with a shell game
c = a; 
console.log(&quot;c is: &quot; + c); /// c is winner
a = b; 
console.log(&quot;a is: &quot; + a); /// a is loser
b = c; 
console.log(&quot;b is: &quot; + b); /// b is winner
c = a; 
console.log(&quot;c is: &quot; + c); /// c is loser
a = c; 
console.log(&quot;a is: &quot; + a); /// a is loser
a = b; 
console.log(&quot;a is: &quot; + a); /// a is winner
b = c; 
console.log(&quot;b is: &quot; + b); /// b is loser
a();    /// WINNER!

Here were my answers. It seems they corroborated well with my above comments.

c is: function() { console.log(&quot;WINNER!&quot;) }
a is: function() { console.log(&quot;LOSER!&quot;) }
b is: function() { console.log(&quot;WINNER!&quot;) }
c is: function() { console.log(&quot;LOSER!&quot;) }
a is: function() { console.log(&quot;LOSER!&quot;) }
a is: function() { console.log(&quot;WINNER!&quot;) }
b is: function() { console.log(&quot;LOSER!&quot;) }
WINNER!

huangapple
  • 本文由 发表于 2023年3月9日 14:42:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/75681214.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定