Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm thế nào việc đóng lại có thể gây ra rò rỉ bộ nhớ và làm thế nào để ngăn chặn nó?

Đóng cửa

Một trong những điểm mạnh của javascript là bao đóng. Javascript cho phép các hàm lồng nhau, một hàm bên trong một hàm, truy cập các biến của các hàm cha. Quá trình truy cập biến của hàm bên ngoài bởi một hàm bên trong được gọi là quá trình đóng. Rò rỉ bộ nhớ xảy ra khi một biến đã khai báo tự động có sẵn cho hàm lồng trong và nằm trong bộ nhớ mặc dù biến đó không được tham chiếu trong hàm lồng trong.

Trong ví dụ sau, 'childFunction' là hàm bên trong được định nghĩa trong hàm bên ngoài 'parentFunction'. Khi một lệnh gọi được thực hiện tới 'parentFunction' với một tham số là "external val", biến bên ngoài a được gán giá trị là "external val". biến 'val'.

Biến cục bộ a của hàm ngoài sẽ vẫn tồn tại ngay cả khi hàm bên ngoài đã trả về. Trong javascript, khi gọi hàm parentFunction, một đối tượng phạm vi có thuộc tính 'a' sẽ được tạo. Thuộc tính này chứa giá trị của arg1, còn được gọi là "giá trị ngoài". Tương tự khi hàm cha mẹ trả về, hàm này sẽ trả về hàm bên trong (hàm con), được chứa trong biến val.

Vì hàm bên trong giữ một tham chiếu đến các biến của hàm bên ngoài, nên đối tượng phạm vi có thuộc tính 'a' sẽ không được thu gom.

Ví dụ

<html>
<body>
<script>
   window.onload= function parentFunction(arg1) {
      var a = arg1;
      return function childFunction (arg2)
   {
      alert( a +" "+ arg2);
   };
   };
   var val = parentFunction("outer val");
   val("inner val");
</script>
</body>
</html>

Tránh rò rỉ bộ nhớ

Thêm một chức năng nữa

Bằng cách thêm một chức năng khác, sẽ có hai chức năng bên trong. Vì có hai hàm bên trong, không hàm nào có thể tham chiếu đến biến của hàm bên ngoài ở đó bằng cách tạm dừng hoàn toàn việc đóng.

Khi không đóng cửa, khả năng rò rỉ bộ nhớ sẽ ít hơn.

Ví dụ

<html>
<body>
<script>
   window.onload=function parentFunction(){
      var Obj1 = function childFunction1()
      {
         document.write("the leak is avoided");
      };
   (function childFunction2(){
      var obj2 = document.getElementById("closure");
      obj2.onclick=Obj1
      })();
   };
</script>
<input type = "button" id="closure" value ="Click Here">
</body>
</html>

Sau khi mã được thực thi, một nút sẽ được hiển thị như sau

Làm thế nào việc đóng lại có thể gây ra rò rỉ bộ nhớ và làm thế nào để ngăn chặn nó?

Sau khi nhấn nút, chúng ta sẽ nhận được kết quả như sau

Đầu ra

the leak is avoided