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);
 }

은 예상대로 1~10을 인쇄하지 않지만 for 루프가 실행된 후 setTimeout 콜백 함수가 실행되므로 10~10을 인쇄합니다. 시간이 다되면 실행됩니다

Solution: # 🎜🎜#

 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';
}

이렇게 쓰면 첫 번째 이후에는 동일한 어휘 환경을 공유하기 때문에 텍스트 크기가 모두 12가 됩니다. 하나가 실행되면 다음과 이전 것들은 동일한 어휘 환경을 공유합니다

3) 객체 생성 또는 새로운 객체나 클래스를 생성할 때 메소드는 일반적으로 정의되기보다는 객체의 프로토타입과 연관되어야 합니다. 객체의 생성자에서. 그 이유는 생성자가 호출될 때마다(즉, 모든 객체가 생성될 때마다) 메서드가 다시 할당되기 때문입니다.

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

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;
};

2. 프로토타입

# 🎜🎜#

관련 권장사항:

js 클로저 사용법-js 튜토리얼에 대한 자세한 설명

#🎜🎜 #Javascript에 대한 자세한 소개 클로저 및 코드 구현 방법에 대한 심층 분석

위 내용은 js 클로저 및 프로토타입의 애플리케이션 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!