전역 변수 수치와 즉시 실행 함수

2643 단어

전역 변수가 수치스럽다

HTML에서 두 개의 서로 다른 id 이름의div분석을 비교해 봅시다.

    

    



    console.log(x) //<div id=x></div>
    console.log(parent)  //Window

发现：

为什么第二个div名字为 parent 打印出来的结果是 window ，因为局部变量div的parent被全局变量parent 所覆盖。即局部变量和全局变量名字冲突。

另一种情况，在 ？


    

    
    
        var parent = document.querySelector("#x")
        console.log(parent) //<div id="x"></div>
    

 
 
发现：
 
 
使用全局变量var 声明,全局属性window.parent被覆盖了，输出结果只有 
 
 
同理，其他全局变量名字如 alert ,close,confirm ,find 等也有这样的情况。
 
 
总结：全局变量可耻，不可用，根本原因是使用关键字 var 进行声明所导致的变量提升！
 
 
那么，在局部作用域中使用会怎样呢？
 
 
代码如下：
 
 





function x(){
  var parent = document.querySelector("#x")
  console.log(parent)   
}
x.call()    //<div id=x></div>
console.log(parent)     //window


 
 
这里涉及到一个概念： 立即执行函数，
 
 
지금 실행 함수
 
 
即为了使用一个函数以内的局部变量，声明函数后立即调用它，即可避免局部变量和全局变量的冲突问题。
 
 
同时，调用函数也可以直接是匿名的函数，并且立即调用它，代码为
 
 
 function (){
  var parent = document.querySelector("#x")
  console.log(parent)       
}.call()  //     ，       

  
익명 함수를 직접 선언하고 즉시 호출할 때 브라우저가 인식할 수 없기 때문에 오류가 발생합니다. 해결 방법은 다음과 같습니다.
  •  전체 함수와 호출을 괄호로 둘러싸기
    //   ：       
(function (){
  var parent = document.querySelector("#x")
  console.log(parent)     
}.call() )

  •  익명 함수에 괄호로 싸기
    //   ：            
(function (){
  var parent = document.querySelector("#x")
  console.log(parent)     
}).call() 

  •  익명 함수의 첫머리에 연산자를 표시로 사용한다(실제로는 계산이지만 우리는 익명 함수를 사용하기 위해 어떠한 계산과 반환도 하지 않는다)
    //   ：   “-”   “+”   “~”（    ） “!”
-function (){
  var parent = document.querySelector("#x")
  console.log(parent)     
}.call() 

+function (){
  var parent = document.querySelector("#x")
  console.log(parent)     
}.call() 

~function (){
  var parent = document.querySelector("#x")
  console.log(parent)     
}.call() 

!function (){
  var parent = document.querySelector("#x")
  console.log(parent)     
}.call() 

    • 참조 링크:
    방응항
    
                
    
                    
        
    
    
    
    
    
                
    
                

                

                
                
                
    
                    
    
                        
                    
    


                
    

                
                


            
    


            
    
                
    
                    
                        
                            
                            
                        

                        Terraform으로 RDS를 만들 때의 비밀번호는 도대체 어떻게 처리해야 합니까?
                
    
                
    
                    Angular 및 Vue3의 구성 요소 속성 바인딩
                        
                            
                            
                        


                    
                
    
            
            
    
                
    

                    
    
                        
    좋은 웹페이지 즐겨찾기
    

                        
                        
    
                            
                            
    
                                
    
                                    
    개발자 우수 사이트 수집
    
                                    
                                        
                                            
                                            
                                        
                                        개발자가 알아야 할 필수 사이트 100선 추천
                                    우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
                                
    
                                best100-homepage