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 オブジェクトからプロパティとメソッドの継承を取得します。 ;

次に、instance という名前の Car オブジェクトのインスタンスを作成します。このインスタンスには、sayColor とsayNumber という 2 つのメソッドが含まれています。

最後に、2 つのメソッドのうち、前者は 1 つのクロージャを使用し、後者は 2 つのクロージャを使用し、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()()());

上記は全員に共有された解決策であり、皆さんの学習に役立つことを願っています。