Hướng dẫn javascript access global variable from callback - javascript truy cập biến toàn cầu từ gọi lại

Đối với đăng ký người dùng của tôi, tôi có

const express = require ('express');
const userRouter = express.Router ();

userRouter.get ('/', function getUserList (req, res) {
    let User = require ('../models').User;
    User.find ({}, function (err, list) {
        res.json (list);
    });
});

userRouter.post ('/', function createUser (req, res) {
    let User = require ('../models').User;
    if (req.body.username && req.body.password)
        User.create (req.body, function (err, user) {
            res.json (user);
        });
});

... 3 more functions with the same `let User` ...

module.exports = userRouter;

Ở đây, tôi phải require các mô hình mô -đun hai lần. Tôi đã thử đặt biến người dùng thành biến toàn cầu ở đầu chương trình, như

const express = ..., userRouter = ...
var User = ...

Tuy nhiên, biến người dùng này vẫn không thể truy cập được bên trong các chức năng gọi lại của tôi.

Là yêu cầu mô -đun người dùng nhiều lần cách chính xác để làm điều này hay tôi đang thiếu một cái gì đó?

Chỉnh sửa: Bên trong các chức năng gọi lại, biến người dùng không được xác định.

Giới thiệu

Nếu bạn đã từng trải qua vấn đề JavaScript này, bạn không đơn độc - nó sẽ đưa ra nhiều người và có thể khó khăn, lúc đầu, để hiểu chính xác làm thế nào để sửa chữa nó. Hãy xem xét ví dụ này:

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

JavaScript

Mặc dù mã này trông hoàn toàn tốt, nhưng nó cho thấy sự hiểu lầm của một khái niệm JavaScript rất cơ bản. Bây giờ, nếu bạn thành thạo JavaScript, lỗi này sẽ đủ dễ dàng để phát hiện. Nhưng đối với hầu hết mọi người, điều này không phải là trường hợp - một số người thực sự có thể dành hàng giờ để cố gắng tìm ra lý do tại sao mã của họ không hoạt động.

Giải trình

Hãy nhớ những hướng dẫn đầu tiên của JavaScript bạn đã đọc, nơi nó nói rằng JavaScript không đồng bộ? Điều này có nghĩa là trong một số trường hợp mã có thể không được thực thi theo tuần tự. Đây thường là trường hợp khi sử dụng API nội bộ phụ thuộc vào một sự kiện bên ngoài. Ví dụ: xử lý phản hồi sau khi yêu cầu HTTP được hoàn thành hoặc sau khi một số xử lý khác được thực hiện.

Vì vậy, những gì xảy ra sau đó, là doSthWithCallbacks (biểu thức chung cho tất cả các hàm JavaScript sử dụng một cuộc gọi lại) lên lịch chức năng gọi lại sẽ được thực thi ở giai đoạn sau. Nhưng vòng lặp

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

Thông thường, các cuộc gọi lại không được thực thi cho đến khi vòng lặp

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

const express = ..., userRouter = ...
var User = ...

Làm thế nào để làm việc xung quanh nó

Tôi sẽ trình bày cho bạn hai giải pháp về cách đi xung quanh vấn đề. Cả hai đều rất hiệu quả về mặt hiệu suất và các kết quả bộ nhớ. Phương pháp đầu tiên dễ hiểu hơn, nhưng yêu cầu định nghĩa về hàm trong phạm vi trên, điều này làm cho mã không dễ đọc hơn vì bạn phải tra cứu hàm. Giải pháp thứ hai là sở thích cá nhân của tôi nhưng khó hiểu hơn, đặc biệt là khi bạn nhìn thấy các cấu trúc như vậy lần đầu tiên. Có những giải pháp khác, nhưng những điều này tại thời điểm này là nhanh nhất và được hỗ trợ trong tất cả các trình duyệt chính và phiên dịch JavaScript.

Về cơ bản, cả hai phương pháp đều làm cùng một nhiệm vụ nhưng theo những cách khác nhau. Những gì họ làm là tạo ra một chức năng gọi lại riêng với bản sao giá trị của chính họ trong một phạm vi chỉ có sẵn cho họ.

const express = ..., userRouter = ...
var User = ...

Đóng trong một chức năng

Phương pháp này tương đối dễ hiểu và đó là lý do tại sao tôi sẽ không bao gồm nó một cách chi tiết. Đây không phải là trường hợp đóng cửa nội tuyến, vì vậy tôi sẽ đề cập đến độ sâu đó. Hàm

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

const express = ..., userRouter = ...
var User = ...

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

const express = ..., userRouter = ...
var User = ...

1var array = [ ... ]; // An array with some objects
2
3function callbackClosure(i, callback) {
4  return function() {
5    return callback(i);
6  }
7}
8
9for( var i = 0; i < array.length; ++i )
10{
11  API.doSthWithCallbacks( callbackClosure( i, function(i) {
12    array[i].something = 42;
13  }) );
14}

JavaScript

Vì mỗi hàm tuyên bố phạm vi riêng của nó và

const express = ..., userRouter = ...
var User = ...

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

const express = ..., userRouter = ...
var User = ...

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

Đóng cửa nội tuyến

Điều này đưa chúng ta đến hack JavaScript yêu thích nhất của tôi. Điều này được thực hiện bằng cách tuyên bố một chức năng tự ẩn danh, thường trông như thế này:

1(function() {
2  // Something declared here will only be available to the function below.
3  // Code here is executed only once upon the creation of the inner function
4  return function(callbackArguments) {
5    // Actual callback here
6  };
7})(); // The last brackets execute the outer function

JavaScript

Vì mỗi hàm tuyên bố phạm vi riêng của nó và

const express = ..., userRouter = ...
var User = ...

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  API.doSthWithCallbacks( (function() {
5    var j = i; // j is a copy of i only available to the scope of the inner function
6    return function() {
7      array[j].something = 42;
8    }
9  })() );
10}

JavaScript

Vì mỗi hàm tuyên bố phạm vi riêng của nó và

const express = ..., userRouter = ...
var User = ...

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2var count = 0, length = array.length;
3for( var i = 0; i < array.length; ++i )
4{
5  API.doSthWithCallbacks( (function() {
6    var j = i; // A copy of i only available to the scope of the inner function
7    return function() {
8      array[j].something = 42;
9
10      ++count;
11      if( count == length ) {
12        // Code executed only after all the processing tasks have been completed
13      }
14    }
15  })() );
16}

JavaScript

Vì mỗi hàm tuyên bố phạm vi riêng của nó và

const express = ..., userRouter = ...
var User = ...

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

Đóng cửa nội tuyến

ES6

Điều này đưa chúng ta đến hack JavaScript yêu thích nhất của tôi. Điều này được thực hiện bằng cách tuyên bố một chức năng tự ẩn danh, thường trông như thế này:

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2for( let i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

Lưu ý rằng hàm bên ngoài chỉ được sử dụng để đóng gói hàm bên trong và tạo phạm vi biến riêng cho hàm bên trong. Ngoài ra, hàm bên ngoài trả về giá trị của loại

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

Ví dụ, nếu bạn phải thực hiện một số xử lý không đồng bộ, và cần có một số mã tổng hợp chỉ nên được chạy sau khi tất cả các cuộc gọi lại đã được hoàn thành trong số đó đã được hoàn thành. Nếu

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

1var array = [ ... ]; // An array with some objects
2for( var i = 0; i < array.length; ++i )
3{
4  $.doSthWithCallbacks( function() {
5    array[i].something = 42;
6  });
7}

Bây giờ, tại thời điểm này, thật dễ dàng để bị nhầm lẫn. Là hoạt động 1var array = [ ... ]; // An array with some objects 2for( var i = 0; i < array.length; ++i ) 3{ 4 $.doSthWithCallbacks( function() { 5 array[i].something = 42; 6 }); 7}7 nguyên tử? Một điều kiện cuộc đua có thể xảy ra và mã có thể được thực thi nhiều lần hoặc tệ hơn, hoàn toàn không được thực thi. Một số người coi một cái gì đó như một mutex hoặc semaphore. Nhưng điều này không đúng.

Mặc dù JavaScript không đồng bộ, nhưng nó không được đa luồng. Trên thực tế, mặc dù không thể dự đoán khi nào một cuộc gọi lại sẽ được thực thi, nhưng có thể đảm bảo rằng một điều kiện cuộc đua sẽ không xảy ra vì JavaScript chỉ chạy trong một luồng. .

ECMAScript 6 giới thiệu từ khóa 1var array = [ ... ]; // An array with some objects 2for( var i = 0; i < array.length; ++i ) 3{ 4 $.doSthWithCallbacks( function() { 5 array[i].something = 42; 6 }); 7}8 cho phép bạn khai báo một biến được phân chia đến khối kèm theo gần nhất và không toàn cầu như 1var array = [ ... ]; // An array with some objects 2for( var i = 0; i < array.length; ++i ) 3{ 4 $.doSthWithCallbacks( function() { 5 array[i].something = 42; 6 }); 7}9. Do đó, vấn đề đóng có thể được giải quyết chỉ bằng cách thay thế 1var array = [ ... ]; // An array with some objects 2for( var i = 0; i < array.length; ++i ) 3{ 4 $.doSthWithCallbacks( function() { 5 array[i].something = 42; 6 }); 7}9 bằng 1var array = [ ... ]; // An array with some objects 2for( var i = 0; i < array.length; ++i ) 3{ 4 $.doSthWithCallbacks( function() { 5 array[i].something = 42; 6 }); 7}8:

JS

Gọn gàng, phải không? Nếu bạn có thể sử dụng ES6, mã của bạn có thể được thực hiện để trông tốt hơn rất nhiều mà không cần phải đánh giá cao nó ngay lập tức được gọi chức năng nội tuyến ẩn danh chỉ để tạo ra một phạm vi mới.

1var array = [ ... ]; // An array with some objects
2
3function callbackClosure(i, callback) {
4  return function() {
5    return callback(i);
6  }
7}
8
9for( var i = 0; i < array.length; ++i )
10{
11  API.doSthWithCallbacks( callbackClosure( i, function(i) {
12    array[i].something = 42;
13  }) );
14}

1var array = [ ... ]; // An array with some objects
2
3function callbackClosure(i, callback) {
4  return function() {
5    return callback(i);
6  }
7}
8
9for( var i = 0; i < array.length; ++i )
10{
11  API.doSthWithCallbacks( callbackClosure( i, function(i) {
12    array[i].something = 42;
13  }) );
14}

1var array = [ ... ]; // An array with some objects
2
3function callbackClosure(i, callback) {
4  return function() {
5    return callback(i);
6  }
7}
8
9for( var i = 0; i < array.length; ++i )
10{
11  API.doSthWithCallbacks( callbackClosure( i, function(i) {
12    array[i].something = 42;
13  }) );
14}

1var array = [ ... ]; // An array with some objects
2
3function callbackClosure(i, callback) {
4  return function() {
5    return callback(i);
6  }
7}
8
9for( var i = 0; i < array.length; ++i )
10{
11  API.doSthWithCallbacks( callbackClosure( i, function(i) {
12    array[i].something = 42;
13  }) );
14}

1var array = [ ... ]; // An array with some objects
2
3function callbackClosure(i, callback) {
4  return function() {
5    return callback(i);
6  }
7}
8
9for( var i = 0; i < array.length; ++i )
10{
11  API.doSthWithCallbacks( callbackClosure( i, function(i) {
12    array[i].something = 42;
13  }) );
14}

Chức năng gọi lại có thể truy cập biến toàn cầu không?

Chức năng JavaScript có thể truy cập các biến toàn cầu không?