Question

handleClick = () =>{
    this.setState({selectedTab :'tab1'})
}


<li onClick={this.handleClick}>Tab 1</li>

您能否解释为什么第一个示例返回var foo = {n: 1}; foo.x = foo = {a: 2}; console.log(foo.x); // Output -- undefined var a = 1; c = b = a; console.log(a,b,c); // Output -- 1, 1, 1，其中第二个返回undefined？

Answer 1

这是因为javascript中的表达式是从左到右计算的。

所以在这个表达式中：

foo.x=foo={a:2}

首先取消引用foo，并将属性x设置为右操作数foo={a:2}结果的目标。

然后，在评估右操作数时，重新分配foo值，因此对该对象的前一个实例的引用将丢失。

为了演示它，我们可以简单地创建另一个变量来保持它：

var foo = {n:1};
var bar = foo;
foo.x=foo={a:2};
console.log(foo, bar);

Answer 2

那是因为{a：2}对象实际上被分配给{n:1}.x属性！不是{a:2}。没有＆＃34; x＆＃34;它的财产。

我们在这里有：

var foo = {n:1};
foo.x = foo = {a:2}; // equals:...
{n:1}.x = {a:2};
/* note that foo.x is actually referring to {n:1} object! */
foo = {a:2}; // ==>
/* while foo is being pointed to a different object
   which is now the {a:2} object!
   wherefore ...*/
{a:2}.x   // is normally undefined i.e.: never set!

然而：

{n:1}.x // has been successfully assigned with:
>> {a:2} object.

但是因为你丢失了对象{n：1}的引用，没有其他方法可以检查它。为了验证并证明它是{n：1}实际收到属性＆＃34; x＆＃34;，我们必须在覆盖foo变量之前给它一个备份引用，以便能够归还它。

var foo = {n:1};
var bak = foo;
foo.x=foo={a:2};

console.log(foo.x); 
console.log(bak.x);

>> undefined
>> {a:2}.

Answer 3

foo.x = foo = {a: 2};

确定foo.x引用x对象的属性{n: 1}，将{n: 2}分配给foo，并指定新值foo - { n：2} - 到{n：1}对象的属性x。

重要的是foo引用的foo.x是在foo更改之前确定的。

分配操作员关联right to left，因此您得到：

foo.x = (foo = {n: 2})

左侧在右侧之前进行评估，因此评估为undefined

JavaScript中的变量初始化

3 个答案: