js 함수 closure_javascript 기술의 메모리 누수 문제를 해결하는 방법

이 글에서는 js 함수 클로저 메모리 누수 문제를 얕은 것부터 깊은 것까지 예제를 통해 해결하는 방법을 설명하고 참고할 수 있도록 모든 사람과 공유합니다

원본 코드:

function Cars(){
  this.name = "Benz";
  this.color = ["white","black"];
}
Cars.prototype.sayColor = function(){
  var outer = this;
  return function(){
    return outer.color
  };
};

var instance = new Cars();
console.log(instance.sayColor()())

최적화된 코드:

function Cars(){
  this.name = "Benz";
  this.color = ["white","black"];
}
Cars.prototype.sayColor = function(){
  var outerColor = this.color; //保存一个副本到变量中
  return function(){
    return outerColor; //应用这个副本
  };
  outColor = null; //释放内存
};

var instance = new Cars();
console.log(instance.sayColor()())

약간 더 복잡한 예:

function inheritPrototype(subType,superType){
  var prototype = Object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

function Cars(){
  this.name = "Benz";
  this.color = ["white","black"];
}
Cars.prototype.sayColor = function(){
  var outer = this;
  return function(){
    return outer.color;
  };
};

function Car(){
  Cars.call(this);
  this.number = [321,32];
}
inheritPrototype(Car,Cars);
Car.prototype.sayNumber = function(){
  var outer = this;
  return function(){
    return function(){
      return outer.number[outer.number.length - 1];
    }
  };
};

var instance = new Car();
console.log(instance.sayNumber()()());

우선 이 예제에서는 생성자 패턴과 프로토타입 패턴의 조합을 사용하여 Cars 객체를 생성하고, 기생 결합 상속 패턴을 사용하여 Car 객체를 생성하고 Cars 객체로부터 속성 및 메서드 상속을 얻습니다. ;

두 번째로, 인스턴스라는 이름의 Car 개체 인스턴스를 만듭니다. 이 인스턴스에는 sayColor 및 sayNumber라는 두 가지 메서드가 포함되어 있습니다.

마지막으로 두 가지 방법 중 전자는 하나의 클로저를 사용하고 후자는 두 개의 클로저를 사용하여 this.color 및 this.number에 액세스할 수 있도록 this를 수정합니다.

여기서 메모리 누수 문제가 발생했습니다. 최적화된 코드는 다음과 같습니다.

function inheritPrototype(subType,superType){
  var prototype = Object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

function Cars(){
  this.name = "Benz";
  this.color = ["white","black"];
}
Cars.prototype.sayColor = function(){
  var outerColor = this.color; //这里
  return function(){
    return outerColor; //这里
  };
  this = null; //这里
};

function Car(){
  Cars.call(this);
  this.number = [321,32];
}
inheritPrototype(Car,Cars);
Car.prototype.sayNumber = function(){
  var outerNumber = this.number; //这里
  return function(){
    return function(){
      return outerNumber[outerNumber.length - 1]; //这里
    }
  };
  this = null; //这里
};

var instance = new Car();
console.log(instance.sayNumber()()());

위 내용은 모든 사람에게 공유된 솔루션이므로 모든 사람의 학습에 도움이 되기를 바랍니다.