JavaScript의 블록 수준 범위, 개인 변수 및 모듈 모드에 대한 심층적인 이해(그래픽 튜토리얼)

이 글에서는 자바스크립트의 블록레벨 스코프, 프라이빗 변수, 모듈 모드 등을 자세하게 소개하고 있어 자바스크립트 학습에 많은 도움이 됩니다.

이 글에서는 JavaScript의 블록 수준 범위, 개인 변수 및 모듈 모드를 자세히 소개합니다. 자세한 내용은 다음과 같습니다.

1. , 종종 전역 범위에서 범위는 함수 외부에서 사용되므로 전역 범위에 너무 많은 변수와 함수를 추가하는 것을 제한합니다.

(function(count){ 
  for(var i=0;i<count;i++){ 
    console.log(i);//=>0、1、2、3、4 
  } 
  console.log(i);//=>5 
})(5);

(function(){ 
  var now=new Date(); 
  if(now.getMonth()==0 && now.getDate()==1){ 
    console.log("新年快乐"); 
  }else{ 
    console.log("尽情期待"); 
  } 
})();

2. 비공개 변수: 함수에 정의된 모든 변수는 비공개 변수로 간주될 수 있습니다. 이러한 변수는 함수 외부에서 액세스할 수 없기 때문입니다.

특권 메서드: 전용 변수 및 전용 함수에 액세스할 수 있는 공용 메서드를 특권 메서드라고 합니다.

2.1) 생성자에서 권한 있는 메서드 정의:

 function Person(name){ 
  this.getName=function(){ 
    return name; 
  }; 
  this.setName=function(value){ 
    name=value; 
  }; 
} 
var person1=new Person("Jason"); 
console.log(person1.getName());//=>Jason 
person1.setName("gray"); 
console.log(person1.getName());//=>gray 
var person2=new Person("Michael"); 
console.log(person1.getName());//=>gray 
console.log(person2.getName());//=>Michael 
person2.setName('Alex'); 
console.log(person1.getName());//=>gray 
console.log(person2.getName());//=>Alex

생성자 패턴의 단점은 각 인스턴스에 대해 동일한 새 메서드 집합이 생성된다는 것입니다.

2.2) 권한 있는 메서드를 구현하기 위한 정적 개인 변수

개인 범위에서는 먼저 개인 변수와 개인 함수를 정의한 다음 생성자와 해당 공용 메서드를 정의합니다.

 (function(){ 
  //私有变量和函数 
  var name=""; 
  Person=function(value){ 
    name=value; 
  }; 
  //特权方法 
  Person.prototype.getName=function(){ 
    return name; 
  }; 
  Person.prototype.setName=function(value){ 
    name=value; 
  } 
})(); 
var person1=new Person("Jason"); 
console.log(person1.getName());//=>Jason 
person1.setName("gray"); 
console.log(person1.getName());//=>gray 
var person2=new Person("Michael"); 
console.log(person1.getName());//=>Michael 
console.log(person2.getName());//=>Michael 
person2.setName('Alex'); 
console.log(person1.getName());//=>Alex 
console.log(person2.getName());//=>Alex

3. 모듈 패턴: 개인 변수와 권한 있는 메서드를 추가하여 싱글톤을 향상할 수 있습니다.

객체를 생성하고 일부 데이터로 초기화해야 하는 동시에 이 개인 데이터에 액세스할 수 있는 일부 메서드를 노출해야 하는 경우 모듈 패턴을 사용할 수 있습니다.

var application=function(){ 
  //私有变量和函数 
  var components=[]; 
  //初始化 
  components.push(new BaseComponent()); 
  //公共接口 
  return { 
    getComponentCount:function(){ 
      return components.length; 
    }, 
    registerComponent:function(){ 
      if(typeof component=="object"){ 
        components.push(component); 
      } 
    } 
  } 
}();

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련글 :

js코드가 일정시간 지연된 후 함수 실행의 예

JS 해시를 사용하여 단일 페이지 웹 애플리케이션을 만드는 방법에 대한 자세한 설명

JS로 간단하게 플로팅 창 구현

위 내용은 JavaScript의 블록 수준 범위, 개인 변수 및 모듈 모드에 대한 심층적인 이해(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!