Bài đăng này nhằm mục đích đào sâu vào một số khái niệm javascript quan trọng hơn để giúp bạn viết mã tốt hơn.

Nếu bạn thích chế độ tối, bạn có thể đọc bài viết này tại đây .

Callstack là cấu trúc dữ liệu LIFO ( Last In First Out ). Mỗi khi một chức năng được gọi, một ngữ cảnh thực thi được tạo ra và nó được đẩy lên trên cùng của ngăn xếp cuộc gọi. Khi quá trình thực thi kết thúc, bối cảnh thực thi sẽ được bật ra khỏi ngăn xếp cuộc gọi.

Javascript là một ngôn ngữ luồng đơn, nghĩa là nó có một ngăn xếp cuộc gọi và do đó, nó chỉ có thể thực hiện một việc tại một thời điểm. Bây giờ, một điều quan trọng mà tôi muốn đề cập nhanh chóng là javascript không đồng bộ có thể xảy ra do một tập hợp các apis của trình duyệt như hàng đợi gọi lại. Nó không thực sự là một phần của ngôn ngữ javascript.

Khi một chức năng được gọi, ngữ cảnh thực thi được tạo và đặt lên trên cùng của ngăn xếp cuộc gọi và khi chức năng kết thúc, nó sẽ bật ra khỏi ngăn xếp.

Mỗi mục trong ngăn xếp cuộc gọi được gọi là Khung ngăn xếp .

Cách ngữ cảnh thực thi được thêm vào ngăn xếp

Hãy lấy một chức năng đơn giản:

function foo() {
  bar()
}

function bar() {
  console.log('bar')
}

foo()

      
                

                    
                    
                
            

Hãy xem các lỗi đó trông như thế nào mà chúng ta thường gặp phải trong bảng điều khiển của mình khi có sự cố:

function foo() {
  bar()
}

function bar() {
  baz()
}

function baz() {
  throw new Error('this is an error')
}

foo()

Thổi ngăn xếp

Điều này đôi khi xảy ra với các vòng lặp hoặc đệ quy và tất cả điều đó có nghĩa là ngăn xếp cuộc gọi bị tràn. Điều này xảy ra vì ngữ cảnh thực thi liên tục được thêm vào và có giới hạn về điều này.

function foo() {
  foo()
}

foo()

Một ví dụ cuối cùng để lái xe về nhà

Hãy chú ý đến từng khung ngăn xếp trong hình minh họa bên dưới.

function foo() {
  console.log('hi')
  bar()
  console.log('bye')
}

function bar() {
  console.log('bar')
  baz()
}

function baz() {
  console.log('baz')
}

foo()