块级作用域冲突

现在有两个js文件，1.js文件和2.s文件

//1.js
function fun(){
    console.log('1.js')
}
//2.js
function fun(){
    console.log('2.js')
}

在html文件中引入这两个文件

  <script src="./1.js"></script>
  <script src="./2.js"></script>
  <script>
    fun()
  </script>

打印一下fun函数可以看到输出了2.js文件

 

 原因那就是因为2.js文件把1.js文件覆盖了

旧方法的解决方式，将2.js文件中的内容放到一个立即执行函数里面，这样再次输出的时候就会显示1.js文件中的内容

(function(){
    function fun(){
        console.log('2.js')
    }
})()

 

 如果此时想要输出2.js文件怎么做？传入一个window参数，定义一个名字，在使用即可

(function(window){
    function fun(){
        console.log('2.js')
    }
    window.fn={fun}
})(window)

 

 同样的1.js文件也这样做，就不会出现覆盖了

//1.js
(function(window){
    function fun(){
        console.log('1.js')
    }
    window.fn1={fun}
})(window)

//2.js
(function(window){
    function fun(){
        console.log('2.js')
    }
    window.fn2={fun}
})(window)

在html文件中这样使用就不会覆盖了

fn1.fun()
fn2.fun()

第二种方法就是将方法放在一个块作用里面

//1.js
{
    function fun(){
        console.log('1.js')
    }
    window.fn1={fun}
}

//2.js
{
    function fun(){
        console.log('2.js')
    }
    window.fn2={fun}
}

　　

 

 还是同样的方法输出即可