js 클로저 및 프로토타입의 애플리케이션 코드에 대한 자세한 설명

1. 클로저 퍼블릭 패키지 구조 또는 공간) 1 클로저로 해결해야 할 문제

# 🎜🎜#함수 내부의 데이터는 함수 외부에서 접근할 수 없습니다# 🎜🎜#

• 2. 기본 구조

 function outer(){
        var data = "数据";        return function(){
            return data;
        }
    }

로그인 후 복사

 function outer(){
    var data = "数据";     return {
         getData:function(){
             return data;
         },
         setData:function(value){
             data = value;             return data;
         }
     }
 }

로그인 후 복사
• 3. 클로저 적용
  1) 타이머 문제 해결

由于js是单线程执行的，会先执行主任务，然后执行次要任务(包括setTimeOut和setInterval中的回调函数中的代码)

로그인 후 복사

for(var i = 0 ; i < 10; i++){
    setTimeout(function(){
         console.log(i);
     },0);
 }

로그인 후 복사

 for(var i = 0; i< 3; i++){   function foo(j){
        return function(){
            console.log(j);
        };
    }    var f = foo(i);
    setTimeout(f, 0);
}

이것은 1 2 3으로 출력됩니다

2) 환경을 보호하기 위한 클로저

클로저는 동일한 함수 정의를 공유하지만 다른 어휘 환경을 저장합니다

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}var size12 = makeSizer(12);var size14 = makeSizer(14);var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

클릭하면 텍스트가 변경됩니다 12, 14, 16

글씨를 바꾸면:

function makeSizer(size) {
    document.body.style.fontSize = size + 'px';
}

로그인 후 복사

예를 들어 다음과 같이 작성할 수 있습니다.

function MyObject(name, message) {
  this.name = name.toString();  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};