语法错误:无效的赋值左侧
JavaScript 异常 "无效的赋值左侧" 发生在某个地方有意外的赋值时。当使用了一个单一的 `=` 而不是 `==` 或 `===` 时,可能会触发它。
信息
SyntaxError: Invalid left-hand side in assignment (V8-based) SyntaxError: invalid assignment left-hand side (Firefox) SyntaxError: Left side of assignment is not a reference. (Safari) ReferenceError: Invalid left-hand side in assignment (V8-based) ReferenceError: cannot assign to function call (Firefox) ReferenceError: Left side of assignment is not a reference. (Safari)
错误类型
根据语法,可能是 SyntaxError
或 ReferenceError
。
哪里出错了?
示例
典型的无效赋值
js
if (Math.PI + 1 = 3 || Math.PI + 1 = 4) {
console.log("no way!");
}
// SyntaxError: invalid assignment left-hand side
const str = "Hello, "
+= "is it me "
+= "you're looking for?";
// SyntaxError: invalid assignment left-hand side
在 `if` 语句中,你想使用相等运算符 ( `===` ),而对于字符串连接,则需要加号 ( `+` ) 运算符。
js
if (Math.PI + 1 === 3 || Math.PI + 1 === 4) {
console.log("no way!");
}
const str = "Hello, "
+ "from the "
+ "other side!";
产生 ReferenceError 的赋值
无效的赋值并不总是产生语法错误。有时语法几乎是正确的,但在运行时,左侧表达式求值为一个 _值_ 而不是一个 _引用_,因此赋值仍然无效。此类错误发生在执行的后期,当语句实际执行时。
js
function foo() {
return { a: 1 };
}
foo() = 1; // ReferenceError: invalid assignment left-hand side
函数调用、new
调用、super()
和 this
都是值而不是引用。如果想在左侧使用它们,赋值目标需要是它们产生的值的属性。
js
function foo() {
return { a: 1 };
}
foo().a = 1;
注意: 在 Firefox 和 Safari 中,第一个示例在非严格模式下产生 ReferenceError
,在 严格模式 下产生 SyntaxError
。Chrome 在严格和非严格模式下都会抛出运行时 ReferenceError
。
使用可选链作为赋值目标
可选链 不是有效的赋值目标。
js
obj?.foo = 1; // SyntaxError: invalid assignment left-hand side
相反,你必须先保护空值情况。
js
if (obj) {
obj.foo = 1;
}