JavaScript 클로저 - 블록 범위 및 개인 변수

블록 수준 범위

블록 수준 범위는 중괄호로 묶인 코드 블록 내의 범위를 나타냅니다. JavaScript에는 블록 범위가 없습니다. 이 개념을 이해하려면 다음 예를 살펴보십시오.

for(var i = 0;i < 10; i++){
  ......
}
alert(i); //结果会输出10

위 코드에서는 C++ 및 Java와 같은 프로그래밍 언어에서 변수 i를 for 루프 뒤에 정의합니다. 루프 실행이 종료되고 for 루프에서 i 변수는 즉시 가비지 수집됩니다. 그러나 JavaScript에서는 루프 또는 일부 판단이 사용되는지 여부에 관계없이 변수가 항상 존재합니다. 인쇄 결과를 보면 for 루프가 끝난 후 인쇄된 값이 10임을 알 수 있습니다.

루핑이나 판단을 위해 전역 환경에서 변수를 사용하는 경우, 이 변수가 함수 내의 변수에 영향을 미칠 수 있으므로 특별한 경우 외에는 전역 변수를 사용하지 말고, 전역 변수는 스코프 체인에 있습니다. 최상위 레이어의 액세스 속도가 가장 느립니다.

블록 범위에 대한 해결책은 익명 함수를 사용하는 것입니다. 아래 코드를 살펴보겠습니다.

(function(){
  for(var i = 0; i < 10; i++){
    ......
  }
})();
 
// 直接打印i值会报错：i没有定义
alert(i);
 
// i is not defined
function fn(){
  alert(i);
}
fn();

위 코드에서는 코드 블록을 익명 함수에 넣은 후 즉시 익명 함수를 호출했습니다. 익명 함수에 대한 호출을 나타내는 익명 함수 뒤의 괄호 쌍을 확인하세요. 많은 JavaScript 프로그램에서 이러한 스타일의 작성을 볼 수 있습니다. 이때 익명함수에 포함된 변수는 사용 후 재활용되며, 익명함수 외부에서는 해당 변수에 접근할 수 없습니다.

팀 개발을 하다 보면 전역 변수를 같은 이름으로 정의해야 할 경우가 있기 때문에 개발 중에 다음과 같은 습관을 들여야 합니다. 전역 변수의 코드를 익명 함수에 넣고 즉시 익명 함수를 호출하면 전역 변수의 코드도 실행할 수 있지만 이러한 변수는 우리가 제어하려는 범위 내에서 제어됩니다.

개인 변수

앞서 객체를 정의할 때 객체의 속성을 설정하기 위해 this 키워드를 사용했습니다. 이런 방식으로 설정된 속성을 공용 속성이라고 하며 객체를 통해 이러한 속성에 직접 액세스할 수 있습니다.

C++, Java 등의 프로그래밍 언어에서는 프라이빗 키워드를 사용하여 개체의 프라이빗 속성을 정의합니다. 프라이빗 속성은 개체에서 직접 접근할 수 없습니다. 그렇다면 JavaScript에서 개인 속성(개인 변수)을 어떻게 정의합니까? 사실, 객체에 대해 한 쌍의 set 및 get 메소드만 제공하면 됩니다. 예를 들어, 다음 코드는 다음과 같습니다.

function Person(name){
  //此时就没有方法直接访问name这个属性，因为没有this.name
  //要访问name只能通过this.getName和this.setName来访问
  this.setName = function(value){
    name = value;
  }
  this.getName = function(){
    return name;
  }
}
 
var p = new Person("Leon");
alert(p.getName());

this.setName() 메소드를 사용하여 객체의 이름 속성을 설정하고, this.getName 메소드를 사용하여 객체의 이름 속성을 가져옵니다. 이렇게 하면 this.name 속성이 없기 때문에 객체의 name 속성에 직접 접근할 수 없습니다.

위 방법을 사용하여 개인 변수를 생성할 때의 문제점은 각 개체가 많은 수의 함수를 저장하므로 많은 메모리를 소비한다는 것입니다. 이 문제에 대한 해결책은 정적 개인 변수를 사용하는 것입니다. 코드는 다음과 같습니다.

var name = "";
var Person= function(value){
  name = value;
}
Person.prototype.setName = function(value){
  name = value;
}
Person.prototype.getName = function(){
  return name;
}
 
var p1 = new Person("Leon");
alert(p1.getName());
p1.setName("Ada");
alert(p1.getName());

setName() 및 getName() 메소드를 객체의 프로토타입 체인에 삽입하면 메소드가 여러 개 복사되는 문제를 해결할 수 있습니다. 그러나 위의 코드에는 앞서 언급한 블록 수준 범위 문제인 몇 가지 보안 위험이 있습니다. 마찬가지로 이 문제를 해결하기 위해 이 코드를 익명 함수에 넣을 수 있습니다.

(function(){
  //name在函数结束之后就被回收，在外面是没有方法接收的
  var name = "";
  Person= function(value){
    name = value;
  }
  Person.prototype.setName = function(value){
    name = value;
  }
  Person.prototype.getName = function(){
    return name;
  }
})();
 
var p1 = new Person("Leon");
alert(p1.getName());
p1.setName("Ada");
alert(p1.getName());

Person 클래스의 정의를 익명 함수에 넣은 후 즉시 익명 함수를 실행합니다. 이렇게 하면 객체를 사용하여 속성에 직접 액세스할 수 없을 뿐만 아니라 각 객체가 동일한 메서드 복사본을 공유하게 됩니다.

위 내용은 자바스크립트 클로저 블록 수준 범위와 프라이빗 변수에 대한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!