Closures (In JavaScript and Beyond)

0 phút đọc

Closures in JavaScript

A closure is a function that accesses a variable "outside" itself. For example:

const message = 'The British are coming.';
function sayMessage() {
  alert(message); // Here we have access to message,
  // even though it's declared outside this function!
}

We'd say that message is "closed over" by sayMessage().

One useful thing to do with a closure is to create something like an "instance variable" that can change over time and can affect the behavior of a function.

Example: Unique ID Generator

Consider a function for getting the id of a DOM element, giving it a new, unique id if it doesn't have an id yet:

const getUniqueId = (() => {
  let nextGeneratedId = 0;
  return element => {
    if (!element.id) {
      element.id = `generated-uid-${nextGeneratedId}`;
      nextGeneratedId++;
    }
    return element.id;
  };
})();

Why did we put nextGeneratedId in an immediately-executed anonymous function? It makes nextGeneratedId private, which prevents accidental changes from the outside world:

let nextGeneratedId = 0;
const getUniqueId = element => {
  if (!element.id) {
    element.id = `generated-uid-${nextGeneratedId}`;
    nextGeneratedId++;
  }
  return element.id;
};

// Somewhere else in the codebase...

// WHOOPS--FORGOT I WAS ALREADY USING THIS FOR SOMETHING
nextGeneratedId = 0;

By encapsulating nextGeneratedId within the closure, we avoid such accidental overwrites.

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào

Avatar TechMely Team
Được viết bởi

TechMely Team

Thế giới bạn không bước vào được thì đừng cố chen vào, làm khó người khác, lỡ dở mình, hà tất chứ?
Khoá học javascript từ cơ bản đến chuyên sâuYoutube Techmely