Trung tâm cá nhân
sách gpt4 ăn đã đi

Phân tích ví dụ sử dụng đóng Javascript

In lại Tác giả: qq735679552 Thời gian cập nhật: 28-09-2022 22:32:09 34 4
mua khóa gpt4 giày nike

CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết blog CFSDN này phân tích ví dụ sử dụng đóng cửa Javascript được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.

Bài viết này phân tích khái niệm và cách sử dụng các bao đóng Javascript bằng các ví dụ. Chia sẻ cho mọi người tham khảo nhé. Các chi tiết như sau:

Khi nói đến việc đóng cửa, chắc hẳn mọi người đều đã nghe nói về chúng. Thành thật mà nói, không có nhiều tình huống trong đó các bao đóng thực sự được viết thủ công trong công việc hàng ngày, nhưng các khung và thành phần của bên thứ ba được sử dụng trong dự án ít nhiều sử dụng các bao đóng. Vì vậy, việc hiểu rõ về sự đóng cửa là rất cần thiết. hehe....

1. Đóng cửa là gì.

Tóm lại nó là hàm có thể đọc được các biến nội bộ của hàm khác. Do đặc điểm của phạm vi biến JS, các biến bên trong không thể được truy cập từ bên ngoài, nhưng các biến bên ngoài có thể được truy cập từ bên trong.

2. Tình huống sử dụng.

1. Thực hiện thành viên tư nhân. 2. Bảo vệ không gian tên và tránh làm ô nhiễm các biến toàn cục. 3. Biến bộ đệm.

Trước tiên chúng ta hãy xem một ví dụ về đóng gói:

Sao chép mã Mã này như sau:

var people = function () { // Phạm vi biến nằm bên trong hàm và không thể truy cập từ bên ngoài var name = "default",

  。

    trả về { getName: hàm () { trả về tên; }, setName: hàm (newName) { tên = newName; } } }(),

console.log(person.name); // Truy cập trực tiếp, kết quả là: unfined console.log(person.getName()); // Kết quả là: mặc định console.log(person.setName("langjt")) ; console .log(person.getName()); // Kết quả là: langjt.

  。

Hãy xem xét các bao đóng thường được sử dụng trong vòng lặp để giải quyết vấn đề tham chiếu các biến ngoài:

Sao chép mã Mã này như sau:
var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i
   aLi[i].onclick = hàm() {
     cảnh báo (i); // Bất kể phần tử
  • nào được nhấp vào, giá trị bật lên là len, cho biết giá trị của i ở đây giống với giá trị của i được in sau for.
       };
    }

    • Sau khi sử dụng bao đóng:

    Sao chép mã Mã này như sau:
    var aLi = document.getElementsByTagName('li');
    for (var i=0, len=aLi.length; i
      aLi[i].onclick = (hàm(i) {
        hàm trả về() {
          Alert(i); // Nhấp vào phần tử
  • tại thời điểm này và chỉ số dưới tương ứng sẽ bật lên.
        }
      })(Tôi);
    }

    •   。

    3. Những điều cần lưu ý.

    1. Rò rỉ bộ nhớ.

    Vì các bao đóng sẽ khiến các biến trong hàm được lưu trong bộ nhớ, tiêu tốn nhiều bộ nhớ nên các bao đóng không thể bị lạm dụng, nếu không sẽ gây ra các vấn đề về hiệu suất trên trang web. Ví dụ:

    Sao chép mã Mã này như sau:
    hàm foo() {
       var oDiv = document.getElementById('J_DIV');
       var id = oDiv.id;
       oDiv.onclick = function() {
         // cảnh báo (oDiv.id); Có một tham chiếu vòng tròn ở đây và oDiv vẫn còn trong bộ nhớ sau khi đóng trang phiên bản IE thấp. Vì vậy, hãy lưu trữ các kiểu nguyên thủy thay vì các đối tượng bất cứ khi nào có thể.
         cảnh báo(id);
       };
       oDiv = null;
    }

      。

    2. Đặt tên biến.

    Nếu tên biến của hàm bên trong và tên biến của hàm bên ngoài giống nhau thì hàm bên trong không thể trỏ đến biến có cùng tên của hàm bên ngoài nữa. Ví dụ:

    Sao chép mã Mã này như sau:
    hàm foo(số) {
      hàm trả về(số) {
        console.log(số);
      }
    }
    var f = new foo(9);
    f(); // không xác định

      。

    Trong thực tế, cách sử dụng ở trên, thuật ngữ chuyên môn được gọi là function Currying, là chuyển đổi một hàm nhận nhiều tham số thành một hàm nhận một tham số duy nhất (tham số đầu tiên của hàm gốc), đồng thời trả về các tham số còn lại và trả về The tạo ra công nghệ chức năng mới. Về cơ bản, nó cũng tận dụng tính năng có thể lưu trong bộ nhớ đệm của các bao đóng, chẳng hạn như:

    Sao chép mã Mã này như sau:

    var adder = function(num) { return function(y) { return num+y; }; },

      。

    var inc = adder(1); var dec = adder(-1); //inc, dec hiện là hai hàm mới, chức năng của chúng là chuyển đổi giá trị tham số đã truyền (+/-)1 notification(inc(99) ) ;//100 cảnh báo(dec(101));//100 cảnh báo(cộng(100)(2));//102 cảnh báo(cộng(2)(100));//102 .

      。

    Một ví dụ khác là mã nguồn seaJS của Ali Yubo:

    Sao chép mã Mã này như sau:

    /** * util-lang.js - Cải tiến ngôn ngữ tối thiểu */ function isType(type) { return function(obj) { return {}.toString.call(obj) == "[object " + type + "]" } } 。

      。

    var isObject = isType("Đối tượng"); var isString = isType("Chuỗi"),

      。

    Tôi hy vọng bài viết này sẽ hữu ích cho việc thiết kế lập trình JavaScript của mọi người.

    Cuối cùng, bài viết phân tích các ví dụ về cách sử dụng bao đóng Javascript kết thúc tại đây. Nếu bạn muốn biết thêm về phân tích các ví dụ về cách sử dụng bao đóng Javascript, vui lòng tìm kiếm bài viết CFSDN hoặc tiếp tục duyệt các bài viết liên quan. trong tương lai! .

    34 4 0
    Đề xuất bài viết: Sử dụng định tuyến và vị trí $ để chuyển đổi chế độ xem theo góc
    Đề xuất bài viết: Các phương thức triển khai lớp và cá thể trong JavaScript
    Đề xuất bài viết: Phương thức của ứng dụng WeChat gọi thông báo và xác minh không đồng bộ của SDK để xử lý đơn hàng sau khi thanh toán
    Đề xuất bài viết: phương pháp công khai thinkphp5 để tải lên hình ảnh và tạo hình thu nhỏ (chia sẻ)
    qq735679552
    Hồ sơ

    Tôi là một lập trình viên xuất sắc, rất giỏi!

    Nhận phiếu giảm giá taxi Didi miễn phí
    Phiếu giảm giá taxi Didi
    Các bài viết phổ biến trên toàn bộ trang web
    Chứng chỉ ICP Bắc Kinh số 000000
    Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
    Xem sitemap của VNExpress