Cấu trúc (function () {}) () trong JavaScript là gì?

827
Exitos 2011-11-23 04:19.

Tôi đã từng biết điều này có nghĩa là gì, nhưng bây giờ tôi đang đấu tranh ...

Về cơ bản đây là câu nói document.onload?

(function () {

})();

25 answers

886
gion_13 2011-11-23 04:21.

Đó là một biểu thức hàm được gọi ngay lập tức , gọi tắt là IIFE . Nó thực thi ngay sau khi được tạo.

Nó không liên quan đến bất kỳ trình xử lý sự kiện nào cho bất kỳ sự kiện nào (chẳng hạn như document.onload).
Hãy xem xét phần trong cặp dấu ngoặc đơn đầu tiên: .... nó là một biểu thức hàm thông thường. Sau đó nhìn vào cặp cuối cùng , cặp này thường được thêm vào một biểu thức để gọi một hàm; trong trường hợp này, biểu hiện trước của chúng tôi.(function(){})();(function(){})();

Mẫu này thường được sử dụng khi cố gắng tránh làm ô nhiễm không gian tên chung, vì tất cả các biến được sử dụng bên trong IIFE (giống như trong bất kỳ hàm thông thường nào khác ) đều không hiển thị bên ngoài phạm vi của nó.
Đây là lý do tại sao, có thể, bạn nhầm lẫn cấu trúc này với một trình xử lý sự kiện window.onload, bởi vì nó thường được sử dụng như sau:

(function(){
  // all your code here
  var foo = function() {};
  window.onload = foo;
  // ...
})();
// foo is unreachable here (it’s undefined)

Chỉnh sửa do Guffa đề xuất :

Hàm được thực thi ngay sau khi nó được tạo, không phải sau khi nó được phân tích cú pháp. Toàn bộ khối tập lệnh được phân tích cú pháp trước khi bất kỳ mã nào trong đó được thực thi. Ngoài ra, mã phân tích cú pháp không tự động có nghĩa là nó được thực thi, nếu ví dụ như IIFE nằm bên trong một hàm thì nó sẽ không được thực thi cho đến khi hàm được gọi.

Cập nhật Vì đây là một chủ đề khá phổ biến, nên điều đáng nói là IIFE cũng có thể được viết bằng chức năng mũi tên của ES6 (như Gajus đã chỉ ra trong một bình luận ):

((foo) => {
 // do something with foo here foo
})('foo value')
114
Guffa 2011-11-23 04:25.

Nó chỉ là một chức năng ẩn danh được thực thi ngay sau khi nó được tạo.

Nó giống như thể bạn gán nó cho một biến và sử dụng nó ngay sau đó, chỉ khi không có biến:

var f = function () {
};
f();

Trong jQuery, có một cấu trúc tương tự mà bạn có thể nghĩ đến:

$(function(){
});

Đó là hình thức ngắn của ràng buộc readysự kiện:

$(document).ready(function(){
});

Nhưng hai cấu trúc trên không phải là IIFE s.

59
令狐葱 2014-05-29 17:09.

Một biểu thức hàm được gọi ngay lập tức (IIFE) ngay lập tức gọi một hàm. Điều này đơn giản có nghĩa là hàm được thực thi ngay sau khi hoàn thành định nghĩa.

Ba từ phổ biến khác:

// Crockford's preference - parens on the inside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
}());

//The OPs example, parentheses on the outside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

//Using the exclamation mark operator
//https://stackoverflow.com/a/5654929/1175496
!function() {
  console.log('Welcome to the Internet. Please follow me.');
}();

Nếu không có yêu cầu đặc biệt nào cho giá trị trả về của nó, thì chúng ta có thể viết:

!function(){}();  // => true
~function(){}(); // => -1
+function(){}(); // => NaN
-function(){}();  // => NaN

Ngoài ra, nó có thể là:

~(function(){})();
void function(){}();
true && function(){ /* code */ }();
15.0, function(){ /* code */ }();

Bạn thậm chí có thể viết:

new function(){ /* code */ }
31.new function(){ /* code */ }() //If no parameters, the last () is not required
32
solendil 2011-11-23 04:21.

Nó khai báo một hàm ẩn danh, sau đó gọi nó:

(function (local_arg) {
   // anonymous function
   console.log(local_arg);
})(arg);
32
Naftali aka Neal 2011-11-23 04:21.

Đó là nói thực thi ngay lập tức.

vì vậy nếu tôi làm:

var val = (function(){
     var a = 0;  // in the scope of this function
     return function(x){
         a += x;
         return a;
     };
})();

alert(val(10)); //10
alert(val(11)); //21

Vĩ cầm: http://jsfiddle.net/maniator/LqvpQ/


Ví dụ thứ hai:

var val = (function(){
     return 13 + 5;
})();

alert(val); //18
29
Usman 2016-10-30 11:31.

Cấu trúc đó được gọi là Biểu thức hàm được gọi ngay lập tức (IIFE) có nghĩa là nó được thực thi ngay lập tức. Hãy nghĩ về nó như một hàm được gọi tự động khi trình thông dịch đạt đến hàm đó.

Trường hợp sử dụng phổ biến nhất:

Một trong những trường hợp sử dụng phổ biến nhất của nó là giới hạn phạm vi của một biến được thực hiện qua var. Các biến được tạo thông qua varcó phạm vi giới hạn trong một hàm nên cấu trúc này (là một trình bao bọc hàm xung quanh một số mã nhất định) sẽ đảm bảo rằng phạm vi biến của bạn không bị rò rỉ ra khỏi hàm đó.

Trong ví dụ sau, countsẽ không có sẵn bên ngoài hàm được gọi ngay tức thì, tức là phạm vi của countsẽ không bị rò rỉ ra ngoài hàm. Bạn sẽ nhận được ReferenceError, nếu bạn cố gắng truy cập nó bên ngoài chức năng được gọi ngay lập tức.

(function () { 
    var count = 10;
})();
console.log(count);  // Reference Error: count is not defined

ES6 thay thế (Khuyến nghị)

Trong ES6, bây giờ chúng ta có thể có các biến được tạo thông qua letconst. Cả hai đều là phạm vi khối (không giống như varphạm vi chức năng).

Do đó, thay vì sử dụng cấu trúc phức tạp đó của IIFE cho trường hợp sử dụng mà tôi đã đề cập ở trên, bây giờ bạn có thể viết mã đơn giản hơn nhiều để đảm bảo rằng phạm vi của biến không bị lọt ra ngoài khối mong muốn của bạn.

{ 
    let count = 10;
}
console.log(count);  // ReferenceError: count is not defined

Trong ví dụ này, chúng tôi đã sử dụng letđể xác định countbiến countgiới hạn trong khối mã, chúng tôi đã tạo bằng dấu ngoặc nhọn {...}.

Tôi gọi nó là "Nhà tù Xoăn".

17
Gurucharan M K 2016-05-20 01:28.
(function () {
})();

Đây được gọi là IIFE (Biểu thức hàm được gọi ngay lập tức). Một trong những mẫu thiết kế JavaScript nổi tiếng, nó là trái tim và linh hồn của mẫu Mô-đun ngày nay. Như tên cho thấy nó thực thi ngay sau khi được tạo. Mẫu này tạo ra một phạm vi thực thi riêng biệt hoặc riêng tư.

JavaScript trước ECMAScript 6 sử dụng phạm vi từ vựng, vì vậy IIFE được sử dụng để mô phỏng phạm vi khối. (Với ECMAScript 6 có thể xác định phạm vi khối với việc giới thiệu các từ khóa letconst.) Tham khảo cho vấn đề với phạm vi từ vựng

Mô phỏng phạm vi khối với IIFE

Lợi ích của việc sử dụng hiệu suất IIFE là khả năng để vượt qua thường được sử dụng đối tượng toàn cầu như window, documentvv như một cuộc tranh cãi bằng cách giảm tra cứu phạm vi. (Hãy nhớ JavaScript tìm kiếm các thuộc tính trong phạm vi cục bộ và theo đường lên chuỗi cho đến phạm vi toàn cầu). Vì vậy việc truy cập các đối tượng toàn cục trong phạm vi cục bộ giúp giảm thời gian tra cứu như bên dưới.

(function (globalObj) {
//Access the globalObj
})(window);
14
Santosh Pillai 2018-05-15 15:27.

Đây là một biểu thức hàm được gọi ngay lập tức trong Javascript:

Để hiểu IIFE trong JS, hãy chia nhỏ nó:

  1. Biểu thức : Thứ gì đó trả về giá trị
    Ví dụ: Hãy thử làm theo cách sau trong bảng điều khiển chrome. Đây là các biểu thức trong JS.
a = 10 
output = 10 
(1+3) 
output = 4
  1. Biểu thức hàm :
    Ví dụ:
// Function Expression 
var greet = function(name){
   return 'Namaste' + ' ' + name;
}

greet('Santosh');

Cách hoạt động của biểu thức hàm:
- Khi công cụ JS chạy lần đầu tiên (Bối cảnh thực thi - Giai đoạn tạo), hàm này (ở phía bên phải của = ở trên) không được thực thi hoặc lưu trữ trong bộ nhớ. Biến 'chào' được gán giá trị 'không xác định' bởi công cụ JS.
- Trong quá trình thực thi (Bối cảnh thực thi - Giai đoạn thực thi), đối tượng funtion được tạo ngay lập tức (đối tượng chưa được thực thi ), được gán cho biến 'welcome' và nó có thể được gọi bằng cách sử dụng 'welcome (' somename ')'.

3. Biểu thức Funtion được mời gọi ngay lập tức:

Thí dụ:

// IIFE
var greeting = function(name) {
    return 'Namaste' + ' ' + name;
}('Santosh')

console.log(greeting)  // Namaste Santosh. 

Cách hoạt động của IIFE :
- Chú ý dấu '()' ngay sau khai báo hàm. Mọi đối tượng funtion đều có thuộc tính 'CODE' gắn liền với nó và có thể gọi được. Và chúng ta có thể gọi nó (hoặc gọi nó) bằng cách sử dụng dấu ngoặc nhọn '()'.
- Vì vậy, ở đây, trong quá trình thực thi (Bối cảnh thực thi - Giai đoạn Thực thi), đối tượng hàm được tạo và thực thi nó đồng thời - Vì vậy, bây giờ, biến lời chào, thay vì có đối tượng funtion, có giá trị trả về của nó (một chuỗi)

Usecase điển hình của IIFE trong JS:

Mẫu IIFE sau đây được sử dụng khá phổ biến.

// IIFE 
// Spelling of Function was not correct , result into error
(function (name) {
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');
  • chúng tôi đang làm hai việc ở đây. a) Bao bọc biểu thức hàm của chúng ta bên trong dấu ngoặc nhọn (). Điều này sẽ nói với trình phân tích cú pháp rằng bất cứ thứ gì được đặt bên trong () là một biểu thức (biểu thức hàm trong trường hợp này) và là một mã hợp lệ.
    b) Chúng tôi đang gọi hàm này cùng lúc bằng cách sử dụng () ở cuối nó.

Vì vậy, hàm này được tạo và thực thi cùng một lúc (IIFE).

Usecase quan trọng cho IIFE:

IIFE giữ mã của chúng tôi an toàn.
- IIFE, là một hàm, có ngữ cảnh thực thi riêng của nó, nghĩa là tất cả các biến được tạo bên trong nó là cục bộ của hàm này và không được chia sẻ với ngữ cảnh thực thi toàn cục.

Giả sử tôi có một tệp JS khác (test1.js) được sử dụng trong ứng dụng của tôi cùng với iife.js (xem bên dưới).

// test1.js

var greeting = 'Hello';

// iife.js
// Spelling of Function was not correct , result into error
(function (name) { 
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');

console.log(greeting)   // No collision happens here. It prints 'Hello'.

Vì vậy, IIFE giúp chúng ta viết mã an toàn mà chúng ta không va chạm với các đối tượng toàn cục một cách vô ý.

13
Aldo Stracquadanio 2011-11-23 04:22.

Không, cấu trúc này chỉ tạo một phạm vi để đặt tên. Nếu bạn bẻ nó thành nhiều phần, bạn có thể thấy rằng bạn có một bên ngoài

(...)();

Đó là một lời gọi hàm. Bên trong dấu ngoặc đơn, bạn có:

function() {}

Đó là một chức năng ẩn danh. Mọi thứ được khai báo với var bên trong cấu trúc sẽ chỉ hiển thị bên trong cùng một cấu trúc và sẽ không gây ô nhiễm không gian tên chung.

6
James Hill 2011-11-23 04:21.

Đó là một chức năng ẩn danh tự gọi .

Xem phần giải thích của W3Schools về chức năng tự gọi .

Các biểu thức hàm có thể được thực hiện "tự gọi".

Một biểu thức tự gọi được gọi (bắt đầu) tự động mà không cần gọi.

Biểu thức hàm sẽ tự động thực thi nếu biểu thức được theo sau bởi ().

Bạn không thể tự gọi một khai báo hàm.

6
Md. Mahbubul Haque 2015-03-15 21:28.

Đây là chức năng ẩn danh tự gọi. Nó được thực thi trong khi nó được định nghĩa. Có nghĩa là hàm này được định nghĩa và gọi chính nó ngay sau định nghĩa.

Và giải thích về cú pháp là: Hàm trong ()dấu ngoặc đơn đầu tiên là hàm không có tên và bằng ();dấu ngoặc đơn tiếp theo bạn có thể hiểu rằng nó được gọi tại thời điểm nó được định nghĩa. Và bạn có thể chuyển bất kỳ đối số nào trong ()ngoặc thứ hai này sẽ được lấy trong hàm nằm trong ngoặc đơn đầu tiên. Xem ví dụ này:

(function(obj){
    // Do something with this obj
})(object);

Ở đây 'đối tượng' bạn đang truyền sẽ có thể truy cập được trong hàm bởi 'obj', vì bạn đang lấy nó trong chữ ký hàm.

5
Jim Flood 2017-02-18 18:57.

Bắt đầu ở đây:

var b = 'bee';
console.log(b);  // global

Đặt nó trong một chức năng và nó không còn mang tính toàn cầu nữa - mục tiêu chính của bạn.

function a() {
  var b = 'bee';
  console.log(b);
}
a();
console.log(b);  // ReferenceError: b is not defined -- *as desired*

Gọi hàm ngay lập tức - rất tiếc:

function a() {
  var b = 'bee';
  console.log(b);
}();             // SyntaxError: Expected () to start arrow function, but got ';' instead of '=>'

Sử dụng dấu ngoặc đơn để tránh lỗi cú pháp:

(function a() {
  var b = 'bee';
  console.log(b);
})(); // OK now

Bạn có thể bỏ tên hàm:

(function () {    // no name required
  var b = 'bee';
  console.log(b);
})();

Nó không cần phải phức tạp hơn thế.

3
Daniel 2014-05-18 19:19.

Các hàm tự thực thi thường được sử dụng để đóng gói ngữ cảnh và tránh sự cấu kết tên. Bất kỳ biến nào bạn xác định bên trong (function () {..}) () không phải là toàn cục.

Mật mã

var same_name = 1;

var myVar = (function() {
    var same_name = 2;
    console.log(same_name);
})();

console.log(same_name);

tạo ra đầu ra này:

2
1

Bằng cách sử dụng cú pháp này, bạn tránh va chạm với các biến toàn cục được khai báo ở nơi khác trong mã JavaScript của bạn.

2
usoban 2011-11-23 04:24.

Chức năng ẩn danh tự thực hiện. Nó được thực thi ngay sau khi nó được tạo.

Một ví dụ ngắn và giả mà điều này hữu ích là:

function prepareList(el){
  var list = (function(){
    var l = []; 
    for(var i = 0; i < 9; i++){
     l.push(i);
    }
    return l;
  })();

  return function (el){
    for(var i = 0, l = list.length; i < l; i++){
      if(list[i] == el) return list[i];
    }
    return null;
  }; 
} 

var search = prepareList();
search(2);
search(3);

Vì vậy, thay vì tạo danh sách mỗi lần, bạn chỉ tạo danh sách một lần (ít chi phí hơn).

2
Noname 2019-07-18 03:21.

Nó được gọi là IIFE - Biểu thức hàm được gọi ngay lập tức. Đây là một ví dụ để hiển thị cú pháp và cách sử dụng nó. Nó được sử dụng để xác định phạm vi sử dụng các biến chỉ cho đến hàm và không vượt quá.

(function () {
  function Question(q,a,c) {
    this.q = q;
    this.a = a;
    this.c = c;
  }

  Question.prototype.displayQuestion = function() {
    console.log(this.q);
    for (var i = 0; i < this.a.length; i++) {
      console.log(i+": "+this.a[i]);
    }
  }

  Question.prototype.checkAnswer = function(ans) {
    if (ans===this.c) {
      console.log("correct");
    } else {
      console.log("incorrect");
    }
  }

  var q1 = new Question('Is Javascript the coolest?', ['yes', 'no'], 0);
  var q2 = new Question('Is python better than Javascript?', ['yes', 'no', 'both are same'], 2);
  var q3 = new Question('Is Javascript the worst?', ['yes', 'no'], 1);

  var questions = [q1, q2, q3];

  var n = Math.floor(Math.random() * questions.length)

  var answer = parseInt(prompt(questions[n].displayQuestion()));
  questions[n].checkAnswer(answer);
})();
2
Lord 2020-05-14 08:58.

Nó là một biểu thức hàm, nó là viết tắt của Biểu thức hàm được gọi ngay lập tức (IIFE). IIFE chỉ đơn giản là một hàm được thực thi ngay sau khi nó được tạo. Vì vậy, được hiểu là hàm phải đợi cho đến khi nó được gọi để thực thi, IIFE được thực thi ngay lập tức. Hãy xây dựng IIFE bằng ví dụ. Giả sử chúng ta có một hàm add nhận hai số nguyên dưới dạng args và trả về tổng, hãy tạo hàm add thành một IIFE,

Bước 1: Xác định chức năng

function add (a, b){
    return a+b;
}
add(5,5);

Bước 2: Gọi hàm bằng cách gói toàn bộ khai báo hàm vào dấu ngoặc đơn

(function add (a, b){
    return a+b;
})
//add(5,5);

Bước 3: Để gọi hàm ngay lập tức, chỉ cần xóa văn bản 'thêm' khỏi cuộc gọi.

(function add (a, b){
    return a+b;
})(5,5);

Lý do chính để sử dụng IFFE là để duy trì phạm vi riêng tư trong chức năng của bạn. Bên trong mã javascript của bạn, bạn muốn đảm bảo rằng, bạn không ghi đè bất kỳ biến toàn cục nào. Đôi khi bạn có thể tình cờ xác định một biến ghi đè một biến toàn cục. Hãy thử bằng ví dụ. giả sử chúng ta có một tệp html được gọi là iffe.html và các mã bên trong thẻ body là-

<body>
    <div id = 'demo'></div>
    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script> 
</body>

Chà, đoạn mã trên sẽ thực thi mà không có bất kỳ câu hỏi nào, bây giờ giả sử bạn loại bỏ một biến có tên là tài liệu do tình cờ hoặc cố ý.

<body>
    <div id = 'demo'></div>
    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
        const document = "hi there";
        console.log(document);
    </script> 
</body>

bạn sẽ gặp phải lỗi SyntaxError : khai báo lại tài liệu thuộc tính toàn cục không thể định cấu hình.

Nhưng nếu mong muốn của bạn là loại bỏ một tài liệu tên biến, bạn có thể làm điều đó bằng cách sử dụng IFFE.

<body>
    <div id = 'demo'></div>
    <script>
        (function(){
            const document = "hi there";
            this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
            console.log(document);
        })();
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script> 
</body>

Đầu ra:

Hãy thử bằng một ví dụ khác, giả sử chúng ta có một đối tượng máy tính như dưới đây-

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        console.log(calculator.add(5,10));
    </script> 
</body>

Chà, nó hoạt động giống như một sự quyến rũ, điều gì sẽ xảy ra nếu chúng ta vô tình gán lại giá trị của đối tượng máy tính.

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        console.log(calculator.add(5,10));
        calculator = "scientific calculator";
        console.log(calculator.mul(5,5));
    </script> 
</body>

có, bạn sẽ kết thúc với TypeError: Calculator.mul không phải là một hàm iffe.html

Nhưng với sự trợ giúp của IFFE, chúng ta có thể tạo một phạm vi riêng, nơi chúng ta có thể tạo một máy tính tên biến khác và sử dụng nó;

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        var cal = (function(){
            var calculator = {
                sub:function(a,b){
                    return a-b;
                },
                div:function(a,b){
                    return a/b;
                }
            }
            console.log(this.calculator.mul(5,10));
            console.log(calculator.sub(10,5));
            return calculator;
        })();
        console.log(calculator.add(5,10));
        console.log(cal.div(10,5));
    </script> 
</body>

Đầu ra:

1
bpjoshi 2017-01-15 22:13.

IIFE (Biểu thức hàm được gọi ngay lập tức) là một hàm thực thi ngay sau khi tập lệnh tải và biến mất.

Hãy xem xét hàm dưới đây được viết trong tệp có tên iife.js

(function(){
       console.log("Hello Stackoverflow!");
   })();

Đoạn mã trên sẽ thực thi ngay sau khi bạn tải iife.js và sẽ in ra ' Hello Stackoverflow! "trên bảng điều khiển dành cho nhà phát triển".

Để có giải thích chi tiết, hãy xem Biểu thức hàm được gọi ngay (IIFE)

1
Shishir Arora 2016-08-12 11:02.

Một trường hợp sử dụng khác là ghi nhớ trong đó một đối tượng bộ nhớ cache không phải là toàn cục:

var calculate = (function() {
  var cache = {};
  return function(a) {

    if (cache[a]) {
      return cache[a];
    } else {
      // Calculate heavy operation
      cache[a] = heavyOperation(a);
      return cache[a];
    }
  }
})();
1
Willem van der Veen 2018-09-12 07:07.

Đoạn mã sau:

(function () {

})();

được gọi là một biểu thức hàm được gọi ngay lập tức (IIFE).

Nó được gọi là một biểu thức hàm vì ( yourcode )toán tử trong Javascript buộc nó thành một biểu thức. Sự khác biệt giữa biểu thức hàmkhai báo hàm như sau:

// declaration:
function declaredFunction () {}

// expressions:

// storing function into variable
const expressedFunction = function () {}

// Using () operator, which transforms the function into an expression
(function () {})

Một biểu thức chỉ đơn giản là một loạt mã có thể được đánh giá thành một giá trị duy nhất . Trong trường hợp của các biểu thức trong ví dụ trên, giá trị này là một đối tượng hàm đơn .

Sau khi chúng ta có một biểu thức đánh giá một đối tượng hàm, chúng ta có thể ngay lập tức gọi đối tượng hàm bằng ()toán tử. Ví dụ:

(function() {

  const foo = 10;        // all variables inside here are scoped to the function block
  console.log(foo);

})();

console.log(foo);  // referenceError foo is scoped to the IIFE

Tại sao điều này lại hữu ích?

Khi chúng ta xử lý một cơ sở mã lớn và / hoặc khi chúng ta nhập các thư viện khác nhau, nguy cơ xung đột tên sẽ tăng lên. Khi chúng ta đang viết các phần nhất định của mã có liên quan (và do đó đang sử dụng các biến giống nhau) bên trong IIFE, tất cả các biến và tên hàm đều nằm trong các dấu ngoặc chức năng của IIFE . Điều này làm giảm nguy cơ xung đột đặt tên và cho phép bạn đặt tên chúng bất cẩn hơn (ví dụ như bạn không phải đặt tiền tố cho chúng).

0
abdulbarik 2017-07-23 07:41.

Một biểu thức hàm được gọi ngay lập tức (IIFE) là một hàm được thực thi ngay sau khi nó được tạo. Nó không có kết nối với bất kỳ sự kiện nào hoặc thực thi không đồng bộ. Bạn có thể xác định một IIFE như hình dưới đây:

(function() {
     // all your code here
     // ...
})();

Cặp dấu ngoặc đơn đầu tiên hàm () {...} chuyển đổi mã bên trong dấu ngoặc đơn thành một biểu thức. Cặp dấu ngoặc thứ hai gọi hàm kết quả từ biểu thức.

An IIFEcũng có thể được mô tả như một chức năng ẩn danh tự gọi. Cách sử dụng phổ biến nhất của nó là giới hạn phạm vi của một biến được thực hiện thông qua var hoặc để đóng gói ngữ cảnh để tránh xung đột tên.

0
kiwicomb123 2017-11-23 08:03.

Lý do các hàm ẩn danh tự gợi lên được sử dụng là chúng không bao giờ được gọi bằng mã khác vì chúng "thiết lập" mã mà IS có nghĩa là được gọi (cùng với việc cung cấp phạm vi cho các hàm và biến).

Nói cách khác, chúng giống như các chương trình "tạo các lớp", ở phần đầu của chương trình. Sau khi chúng được khởi tạo (tự động), các hàm duy nhất có sẵn là các hàm được trả về bởi hàm ẩn danh. Tuy nhiên, tất cả các hàm khác ' các hàm ẩn 'vẫn ở đó, cùng với bất kỳ trạng thái nào (các biến được đặt trong quá trình tạo phạm vi).

Rất tuyệt.

0
S.. 2020-04-11 22:38.

Trong cú pháp ES6 (đăng cho chính tôi, khi tôi tiếp tục truy cập trang này để tìm kiếm một ví dụ nhanh):

// simple
const simpleNumber = (() => {
  return true ? 1 : 2
})()

// with param
const isPositiveNumber = ((number) => {
  return number > 0 ? true : false
})(4)
0
Noname 2020-04-21 01:06.

Chức năng này được gọi là chức năng tự gọi. Một hàm tự gọi (hay còn gọi là tự thực thi) là một hàm không tên (vô danh) được gọi (Gọi) ngay sau định nghĩa của nó. Đọc thêm tại đây

Những gì các hàm này làm là khi hàm được xác định, hàm sẽ được gọi ngay lập tức, giúp tiết kiệm thời gian và các dòng mã bổ sung (so với việc gọi hàm trên một dòng riêng biệt).

Đây là một ví dụ:

(function() {
    var x = 5 + 4;
    console.log(x);
})();

0
Thomas Williams 2020-05-03 02:57.

Đây là lời giải thích sâu hơn về lý do tại sao bạn sẽ sử dụng cái này:

"Lý do chính để sử dụng IIFE là để có được sự riêng tư của dữ liệu. Bởi vì các biến var của JavaScript chuyển phạm vi đến hàm chứa của chúng, nên bất kỳ biến nào được khai báo trong IIFE đều không thể bị thế giới bên ngoài truy cập."

http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html

0
Omkar76 2020-10-03 04:04.

Đã có nhiều câu trả lời hay ở đây nhưng đây là 2 xu của tôi: p


Bạn có thể sử dụng IIFE (Biểu thức hàm được gọi ngay lập tức) cho:

  1. Tránh ô nhiễm trong không gian tên toàn cầu.

    Các biến được định nghĩa trong IIFE (hoặc thậm chí bất kỳ hàm bình thường nào) không ghi đè các định nghĩa trong phạm vi toàn cục.

  2. Bảo vệ mã khỏi bị truy cập bởi mã bên ngoài.

    Mọi thứ mà bạn xác định trong IIFE chỉ có thể được truy cập trong IIFE. Nó bảo vệ mã khỏi bị sửa đổi bởi mã bên ngoài. Chỉ những gì bạn trả về một cách rõ ràng là kết quả của hàm hoặc đặt làm giá trị cho các biến bên ngoài mới có thể truy cập được bằng mã bên ngoài.

  3. Tránh đặt tên cho các hàm mà bạn không cần sử dụng nhiều lần. Mặc dù có thể sử dụng một hàm được đặt tên trong mẫu IIFE nhưng bạn không cần thực hiện nó vì nói chung không cần phải gọi nó nhiều lần.

  4. Đối với Định nghĩa Mô-đun Chung được sử dụng trong nhiều thư viện JS. Kiểm tra câu hỏi này để biết chi tiết.


IIFE thường được sử dụng trong thời trang sau:

(function(param){
   //code here
})(args);

Bạn có thể bỏ qua các dấu ngoặc ()quanh hàm ẩn danh và sử dụng voidtoán tử trước hàm ẩn danh.

void function(param){
   //code here
}(args);

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Trump và Giám đốc điều hành GM Mary Barra vào năm 2017. Kể từ khi tin tức nổ ra ngày hôm qua rằng General Motors đang cắt giảm việc làm ở Bắc Mỹ để chuẩn bị cho tương lai điện / xe tự hành / khủng khiếp có thể xảy ra của chúng tôi, gần như tất cả mọi người đã tự hỏi: Tổng thống Trump, người đã vận động tranh cử trên một nền tảng sẽ như thế nào của việc mang lại và duy trì việc làm ô tô của Mỹ, phải nói gì về điều này? Bây giờ chúng ta biết.

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bethesda cho biết ngày hôm nay trên Reddit, Fallout 76 sẽ có một bản vá lớn khác vào ngày 4 tháng 12, sẽ bắt đầu cố gắng khắc phục một số vấn đề lớn hơn của trò chơi. Ngoài ra, công ty cho biết họ có kế hoạch giao tiếp nhiều hơn trong tương lai về những gì nhóm Fallout 76 đang làm việc và khi nào các bản cập nhật mới cho trò chơi sẽ ra mắt.

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Bạn có biết rằng một trong sáu bệnh nhân ở bệnh viện ở Hoa Kỳ được điều trị tại một cơ sở Công giáo? Và bạn có biết rằng quyền sở hữu của Công giáo hạn chế sâu sắc việc thiết lập các thủ tục y tế có thể được thực hiện trong các bệnh viện này, rõ ràng nhất là khi nói đến chăm sóc sức khỏe sinh sản? Bây giờ NPR báo cáo rằng sự gia tăng của các bệnh viện thuộc Công giáo đang gây khó khăn hơn cho các bác sĩ — những người bị cấm bởi các quy định do Hoa Kỳ viết.

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Đường chân trời San Francisco bị che khuất bởi khói và khói mù do cháy rừng phía sau Đảo Alcatraz, Thứ Tư, ngày 14 tháng 11 năm 2018, ở San Francisco.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language