javascript- Uncaught SyntaxError: Identifier * has already been declared

javascript- Uncaught SyntaxError: Identifier * has already been declared

console.log(a) //output:ƒ a(){}
var a = 1;
function a(){};
var a = 10;
console.log(a) //output:10

====================

var a = 1;
if(true){
  function a(){};
  var a = 10;
}
console.log(a) // this code throws Uncaught SyntaxError: Identifier 'a' has already been declared

上面的代码片段是相同的,除了 if block.why 后者在 javascript 允许的情况下会抛出错误,以便在相同的范围内使用 var 两次删除相同的变量,如下所示

 function a(){};
 var a = 10; //no error

还有一个稍微不同的场景,在上面的代码中从 `var a = 10 中删除 var 之后,它工作正常但输出令人惊讶

 var a = 1;
 if(true) {
   function a(){};
   a = 10;
 }
 console.log(a) //output:ƒ a(){}

我很惊讶地看到这个输出,因为我期待 10 ..因为在 if 块内声明的两个变量引用上面声明的同一个变量 javascript var 不尊重块作用域而是功能作用域.. .那么为什么上面的输出不应该是 10? 当用函数表达式替换函数定义时,下面的代码输出 10 正如我预期的那样。

  var a = 1;
  if(true) {
    var a = function(){ console.log() }
    a = 10;
  }
  console.log(a) //output:10

This is surprising as javascript var doesn't respect block scope but functional scope...

当然可以,但是您没有使用 var 作为块作用域中 a 的声明。你使用了一个函数声明, (otherwise it would be completely invalid code,就像在 ES5 严格模式中一样。

It's permissible in javascript to declare same variable twice in the same scope with var as below

同样适用于此。块中的 function 声明使用 ES6 声明语义(如 letconst),不允许重新声明。

案例一

console.log(a) //output:ƒ a(){}
var a = 1;
function a(){};
var a = 10;
console.log(a) //output:10

将呈现为

var a;
a = function(){}; // now a holds the value as a function
console.log(a); // output : f a(){}
a = 1; // a is a var that holds value 1
a = 10; // a is a var that holds value 10
console.log(a); // output : 10

案例二

var a = 1;
if(true){
   function a(){};
   var a = 10;
}
console.log(a)

将呈现为

var a;
a = 1;
if(true) {
    a = function() {};
    let a; // The function declaration in the block uses ES6 declaration semantics (like let or const), which does not allow re-declarations.
    var a; // throws Uncaught SyntaxError: Identifier 'a' has already been declared
    a = 10;
}
console.log(a);

案例三

var a = 1;
if(true){
    function a(){};
    a = 10;
 }
console.log(a)

将呈现为

var a;
a = 1;
if(true) {
    a = function() {};
    let a;
    a = 10;
}
console.log(a); // output : f a(){}

案例4

var a = 1;
if(true){
    var a= function(){console.log()}
    a = 10;
}
console.log(a)

将呈现为

var a;
a = 1;
if(true) {
    a = function(){console.log()}
    a = 10;
}
console.log(a) // output:10

案例5

var a = 1;
if(true){
    function a(){};
    a = 10;
    console.log(a) 
}
console.log(a) 

将呈现为

var a;
a = 1;
if(true){
    a = function() {};
    let a;
    a = 10;
    console.log(a); // output:10
}
console.log(a); // output : f a(){}

解决这个问题的简单方法是使用 IIFE

(function() {
var sahil = {
  checkThis: function() {
    console.log(this);

    function checkOther() {
      console.log(this);
    }
    checkOther(); // checkThis() function called in "global context", will
                  // return "this" as "window"
  }
};
var moo = sahil.checkThis;
moo(); // moo() function called in "global context", will return "this" as "window" })();