[JavaScript知识库][JavaScript] JavaScript标识符重名问题-形参与变量同名问题详解

形参和变量同名时

预处理阶段会处理形参，变量声明提前、函数声明提前。主要是一个预处理的顺序。后处理的可能会覆盖先处理的结果。

根据测试案例得出处理顺序时：变量声明提前、形参赋值、函数声明提前。

所以如果同时有函数和形参同名的化，标识符指的是函数声明。

感觉这样理解挺好的。

function fn(a){
    alert(a); // hello
    var a;
    alert(a); // hello
}
fn('hello');

// 从变量提升来分析

function fn(a){
    /* 预处理阶段 */
    var a; // 变量声明提前
    var a = 'hello' // 形参赋值
    /* 执行阶段 */
    alert(a); // hello
    alert(a); // hello
}
fn('hello');

function fn(a){
    alert(a);
    var a = 'hi';
    alert(a);
}
fn('hello'); // --> 依次弹出hello和hi

// 上面的代码可以这样理解
function fn(a){
    /* 预处理阶段 */
    var a; // 变量声明提前
    var a = 'hello'; // 形参赋值
    /* 执行阶段 */
    alert(a); // 弹出hello
    a = 'hi';
    alert(a); // 弹出hi
}
fn('hello');

function fn(a){
    alert(a);
    let a = 'hi'; // 报错 Uncaught SyntaxError: Identifier 'a' has already been declared
    alert(a);
}
fn('hello');
// let是不允许声明重复的变量的 所以什么都不会弹出，形参变量名和函数局部变量重名了

function fn(a, b){
    console.log(a, b);
    var b = 'zhang'
    function a() {}
    console.log(a, b);
}
fn('hello', 'chen');

function fn(a){
    /* 预处理阶段 */
    var b; // 变量声明提前
    var a= 'hello' // 形参赋值
    var b = 'chen' // 形参赋值
    function a () {} // 函数声明提前
    /* 执行阶段 */
    console.log(a, b); // 打印function a(){} chen
    b = 'zhang'
    console.log(a); // 打印function a(){} chen
}
fn('hello');

function fn(a, b){
    console.log(a, b);
    var b = 'zhang'
    function a() {}
    console.log(a, b);
}
fn('hello', function c() {alert(1)});

function fn(a){
    /* 预处理阶段 */
    var b; // 变量声明提前
    var a= 'hello' // 形参赋值
    var b = function c() {alert(1)} // 形参赋值
    function a () {} // 函数声明提前
    /* 执行阶段 */
    console.log(a, b); // 打印function a(){} function c() {alert(1)}
    b = 'zhang'
    console.log(a); // 打印function a(){} zhang
}
fn('hello');

function fn(a='你好'){
    alert(a);
    var a = 'hi';
    alert(a);
}
fn(); // --> 依次弹出hello和hi

// 笔试题
var foo = {n:1};
(function (foo) {
    var foo;
    console.log(foo.n); // 1
    foo.n = 3;
    foo = {n:2}; 
    console.log(foo.n) // 2
})(foo)

形参和函数名时

function fn(fn){
    alert(fn);
}
fn('hello'); // --> 弹出"hello"

形参和arguments同名时

function fn(arguments){
    alert(arguments);
}
fn('hello'); // --> 弹出"hello" 而不是[object Object]

参考

《JavaScript中同名标识符优先级》

《js中关于同名的情况(同名变量，同名函数，同名形参)》