Mô tả nhanh chóng và dễ dàng về JavaScript Hoisting

Bạn đang xem: javascript lưu trữ là gì

Mặc dù chúng tôi tin rằng nội dung này mang lại lợi ích cho cộng đồng của chúng tôi, nhưng chúng tôi vẫn chưa xem xét kỹ lưỡng nó. Nếu bạn có bất kỳ đề xuất cải tiến nào, vui lòng cho chúng tôi biết bằng cách nhấp vào nút “báo cáo sự cố“ ở cuối hướng dẫn.

Giới thiệu

Trong hướng dẫn này, chúng tôi sẽ điều tra cách cơ chế kéo nổi tiếng xảy ra trong JavaScript. Trước khi đi sâu vào, chúng ta hãy tìm hiểu kỹ thuật vận thăng là gì.

Hoisting là một cơ chế JavaScript trong đó các biến và khai báo hàm được chuyển lên đầu phạm vi của chúng trước khi thực thi mã.

Chắc chắn, điều này có nghĩa là bất kể hàm và biến được khai báo ở đâu, chúng sẽ được chuyển lên đầu phạm vi của chúng bất kể phạm vi của chúng là toàn cục hay cục bộ.

Tuy nhiên, có một lưu ý là cơ chế nâng chỉ di chuyển phần khai báo. Các bài tập vẫn được giao.

Nếu bạn từng thắc mắc tại sao bạn có thể gọi các hàm trước khi viết chúng vào mã của mình, thì hãy đọc tiếp!

undefined so với ReferenceError

Trước khi bắt đầu một cách nghiêm túc, chúng ta hãy cân nhắc một vài điều.

  console 

.

nhật ký

(

typeof

biến

)

;

Điều này đưa chúng ta đến điểm lưu ý đầu tiên:

Trong JavaScript, một biến chưa khai báo được gán giá trị không xác định khi thực thi và cũng thuộc loại không xác định.

Điểm thứ hai của chúng tôi là:

  console 

.

nhật ký

(

biến

)

;

Trong JavaScript, một ReferenceError được đưa ra khi cố gắng truy cập vào một biến chưa được khai báo trước đó.

Hành vi của JavaScript khi xử lý các biến trở nên khác biệt do quá trình lưu trữ. Chúng ta sẽ xem xét vấn đề này sâu hơn trong các phần tiếp theo.

Biến cố định

Sau đây là vòng đời JavaScript và chỉ báo về trình tự mà trong đó việc khai báo và khởi tạo biến xảy ra.

variable-hosts

Tuy nhiên, vì JavaScript cho phép chúng ta khai báo và khởi tạo các biến đồng thời, nên đây là mẫu được sử dụng nhiều nhất:

  

var

a

=

100

;

Tuy nhiên, điều quan trọng cần nhớ là trong nền, JavaScript khai báo một cách tôn giáo sau đó khởi tạo các biến của chúng ta.

Như chúng tôi đã đề cập trước đây, tất cả các khai báo biến và hàm đều được đưa vào đầu phạm vi của chúng. Tôi cũng nên nói thêm rằng các khai báo biến được xử lý trước khi bất kỳ mã nào được thực thi.

Tuy nhiên, ngược lại, các biến chưa được khai báo không tồn tại cho đến khi mã gán chúng được thực thi.
Do đó, việc gán một giá trị cho một biến chưa được khai báo sẽ ngầm tạo ra nó như một biến toàn cục khi việc gán được thực thi. Điều này có nghĩa là tất cả các biến chưa được khai báo đều là các biến toàn cục.

Để chứng minh hành vi này, hãy xem phần sau:

  

chức năng

hoist

(

)

{

=

20

;

var

b

=

100

;

}

hoist

(

)

;

bảng điều khiển

.

nhật ký

(

a

)

;

bảng điều khiển

.

nhật ký

(

b

)

;

Vì đây là một trong những điểm khác thường về cách JavaScript xử lý các biến, nên luôn khai báo các biến bất kể chúng nằm trong phạm vi hàm hay toàn cục . Điều này mô tả rõ ràng cách trình thông dịch sẽ xử lý chúng trong thời gian chạy.

ES5

var

Phạm vi của một biến được khai báo với từ khóa var là ngữ cảnh thực thi hiện tại của nó. Đây là hàm bao quanh hoặc cho các biến được khai báo bên ngoài bất kỳ hàm nào, toàn cục .
Hãy xem một vài ví dụ để xác định điều này có nghĩa là gì:

biến toàn cục

  console 

.

nhật ký

(

hoist

)

;

var

hoist

=

'Biến đã được lưu trữ.'

;

Chúng tôi mong đợi kết quả của nhật ký là: ReferenceError: hoist không được xác định , nhưng thay vào đó, đầu ra của nó là không xác định .

Tại sao điều này lại xảy ra?

Khám phá này đưa chúng ta đến gần hơn với việc quấn lấy con mồi của mình.

JavaScript đã chứa khai báo biến. Đây là mã ở trên trông như thế nào đối với trình thông dịch:

  

var

hoist

;

bảng điều khiển

.

nhật ký

(

hoist

)

;

hoist

=

'Biến đã được nâng.'

;

Do đó, chúng ta có thể sử dụng các biến trước khi khai báo chúng. Tuy nhiên, chúng ta phải cẩn thận vì biến được khởi tạo với giá trị không xác định.
Tùy chọn tốt nhất là khai báo và khởi tạo biến của chúng tôi trước khi sử dụng.

Biến phạm vi hàm

Như chúng ta đã thấy ở trên, các biến trong phạm vi toàn cầu được đưa lên đầu phạm vi. Tiếp theo, hãy xem cách các biến trong phạm vi hàm được lưu trữ.

  

chức năng

hoist

(

)

{

bảng điều khiển

.

nhật ký

(

thông báo

)

;

var

message

=

'Treo cổ là tất cả những cơn thịnh nộ!'

}

hoist

(

)

;

Hãy phỏng đoán có học thức về kết quả đầu ra của chúng tôi có thể là gì.

Xem Thêm  37 Ví dụ về thiết kế mũi tên CSS đẹp mắt với hiệu ứng hoạt hình Meteoric - nút css hình mũi tên

Nếu bạn đoán, undefined thì bạn đã đúng. Nếu bạn không làm như vậy, đừng lo lắng, chúng ta sẽ sớm đi sâu vào vấn đề này.

Đây là cách trình thông dịch xem đoạn mã trên:

  

chức năng

hoist

(

)

{

var

message

;

bảng điều khiển

.

nhật ký

(

thông báo

)

;

message

=

'Việc treo cổ là tất cả những cơn thịnh nộ!'

}

hoist

(

)

;

Khai báo biến, var message có phạm vi là hàm hoist () , được đưa lên đầu hàm.

Để tránh lỗi này, chúng tôi phải đảm bảo khai báo khởi chạy biến trước khi sử dụng:

  

chức năng

hoist

(

)

{

var

message

=

'Treo cổ là tất cả những cơn thịnh nộ!'

return

(

message

)

;

}

hoist

(

)

;

Chế độ Nghiêm ngặt

Nhờ một tiện ích của phiên bản JavaScript es5 được gọi là chế độ nghiêm ngặt, chúng tôi có thể cẩn thận hơn về cách chúng tôi khai báo các biến của mình.
Bằng cách bật chế độ nghiêm ngặt , chúng tôi chọn tham gia một biến thể JavaScript bị hạn chế sẽ không cho phép sử dụng các biến trước khi chúng được khai báo.

Chạy mã của chúng tôi ở chế độ nghiêm ngặt:

  1. Loại bỏ một số lỗi JavaScript im lặng bằng cách thay đổi chúng thành lỗi ném rõ ràng sẽ được trình thông dịch loại bỏ.
  2. Sửa các lỗi khiến các công cụ JavaScript khó thực hiện tối ưu hóa.
  3. Cấm một số cú pháp có thể được xác định trong các phiên bản JavaScript trong tương lai.

Chúng tôi bật chế độ nghiêm ngặt bằng cách đặt trước tệp hoặc chức năng của chúng tôi bằng

  

'sử dụng nghiêm ngặt'

;

"sử dụng nghiêm ngặt"

;

Hãy cùng kiểm tra.

  

'sử dụng nghiêm ngặt'

;

bảng điều khiển

.

nhật ký

(

hoist

)

;

hoist

=

'Hosts'

;

Chúng ta có thể thấy rằng thay vì giả định rằng chúng ta đã bỏ lỡ việc khai báo biến của mình, thì sử dụng nghiêm ngặt đã ngăn chúng ta theo dõi bằng cách ném ra một cách rõ ràng Lỗi tham chiếu . Hãy dùng thử mà không cần sử dụng nghiêm ngặt và xem điều gì sẽ xảy ra.

Tuy nhiên, chế độ nghiêm ngặt hoạt động khác nhau trong các trình duyệt khác nhau, vì vậy, bạn nên thực hiện kiểm tra tính năng kỹ lưỡng trước khi dựa vào chế độ này trong sản xuất.

ES6

ECMAScript 6 , ECMAScript 2015 còn được gọi là ES6 là phiên bản mới nhất của tiêu chuẩn ECMAScript, vì bài viết này được viết vào tháng 1 năm 2017 và giới thiệu một số thay đổi đối với es5.

Chúng tôi quan tâm đến những thay đổi trong tiêu chuẩn ảnh hưởng như thế nào đến việc khai báo và khởi chạy các biến JavaScript.

let

Trước khi chúng ta bắt đầu, cần lưu ý rằng các biến được khai báo với từ khóa let là phạm vi khối chứ không phải phạm vi hàm. Điều đó rất quan trọng, nhưng nó sẽ không gây rắc rối cho chúng tôi ở đây. Tuy nhiên, ngắn gọn thì điều đó chỉ có nghĩa là phạm vi của biến được liên kết với khối mà nó được khai báo chứ không phải hàm mà nó được khai báo.

Hãy bắt đầu bằng cách xem xét hành vi của từ khóa let .

  console 

.

nhật ký

(

hoist

)

;

let

hoist

=

'Biến đã được lưu trữ.'

;

Giống như trước đây, đối với từ khóa var , chúng tôi hy vọng đầu ra của nhật ký là không xác định . Tuy nhiên, vì es6 let không thiện chí với chúng tôi bằng cách sử dụng các biến chưa được khai báo, trình thông dịch sẽ đưa ra lỗi Reference một cách rõ ràng.

Điều này đảm bảo rằng chúng tôi luôn khai báo các biến của mình trước.

Tuy nhiên, chúng tôi vẫn phải cẩn thận ở đây. Việc triển khai như sau sẽ dẫn đến xuất hiện không xác định thay vì Lỗi tham chiếu .

  

let

hoist

;

bảng điều khiển

.

nhật ký

(

hoist

)

;

hoist

=

'Hoist'

Do đó, để tránh thận trọng, chúng ta nên khai báo sau đó gán các biến của mình cho một giá trị trước khi sử dụng chúng.

const

Từ khóa const được giới thiệu trong es6 để cho phép các biến bất biến. Nghĩa là, các biến có giá trị không thể được sửa đổi sau khi được gán.

Với const , cũng như với let , biến được đưa lên đầu khối.

Hãy xem điều gì sẽ xảy ra nếu chúng tôi cố gắng gán lại giá trị được đính kèm với biến const .

  

const

PI

=

3.142

;

PI

=

22

/

7

;

console

.

nhật ký

(

PI

)

;

const thay đổi khai báo biến như thế nào? Hãy cùng xem.

  console 

.

nhật ký

(

hoist

)

;

const

hoist

=

'Biến đã được lưu trữ.'

;

Giống như từ khóa let , thay vì thoát âm thầm với undefined , trình thông dịch cứu chúng ta bằng cách ném ra một cách rõ ràng Lỗi tham chiếu . < / p>

Xem Thêm  array (): Kiểm tra xem một giá trị có tồn tại trong một mảng không - phần tử trong mảng php

Điều tương tự cũng xảy ra khi sử dụng const trong các hàm.

  

chức năng

getCircumference

(

bán kính

)

{

bảng điều khiển

.

nhật ký

(

chu vi

)

chu vi

=

PI

*

bán kính

*

2

;

const

PI

=

22

/

7

;

}

getCircumference

(

2

)

Với const , es6 còn tiến xa hơn. Trình thông dịch sẽ gặp lỗi nếu chúng ta sử dụng một hằng số trước khi khai báo và khởi tạo nó.

Đơn vị liên hệ của chúng tôi cũng nhanh chóng thông báo cho chúng tôi về trọng tội này:

  PI đã được sử dụng trước khi nó được khai báo, điều này là bất hợp pháp đối với các biến const.
 

Trên toàn cầu,

 

const

PI

;

console

.

nhật ký

(

PI

)

;

PI

=

3.142

;

Do đó, một biến hằng số phải được khai báo và khởi tạo trước khi sử dụng.

Là phần mở đầu cho phần này, điều quan trọng cần lưu ý là thực sự, JavaScript chứa các biến được khai báo với es6 let và const. Sự khác biệt trong trường hợp này là cách nó khởi tạo chúng.
Các biến được khai báo với let và const vẫn chưa được khởi tạo khi bắt đầu thực thi trong khi các biến được khai báo với var được khởi tạo với giá trị không xác định .

Chức năng nâng

Các hàm JavaScript có thể được phân loại lỏng lẻo như sau:

  1. Khai báo hàm
  2. Biểu thức hàm

Chúng tôi sẽ điều tra xem việc vận thăng bị ảnh hưởng như thế nào bởi cả hai loại chức năng.

Khai báo hàm

Đây là những dạng sau và được nâng hoàn toàn lên đầu. Bây giờ, chúng ta có thể hiểu tại sao JavaScript cho phép chúng ta gọi một hàm dường như trước khi khai báo nó.

  

được nâng lên

(

)

;

function

được nâng lên

(

)

{

bảng điều khiển

.

nhật ký

(

'Chức năng này đã được nâng lên.'

)

;

}

;

Biểu thức hàm

Tuy nhiên, các biểu thức hàm không được nâng lên.

  

biểu thức

(

)

;

var

biểu thức

=

chức năng

(

)

{ bảng điều khiển

.

nhật ký

(

'Cái này sẽ hoạt động chứ?'

)

;

}

;

Hãy thử kết hợp khai báo hàm và biểu thức

  

biểu thức

(

)

;

var

biểu thức

=

chức năng

treo

(

) >

{

bảng điều khiển

.

nhật ký

(

'Cái này sẽ hoạt động chứ?'

)

;

}

;

Như chúng ta có thể thấy ở trên, khai báo biến var expression được kéo lên nhưng nó được gán cho một hàm thì không. Do đó, intepreter ném ra một TypeError vì nó coi biểu thức là một biến chứ không phải một hàm

Thứ tự ưu tiên

Điều quan trọng cần ghi nhớ khi khai báo các hàm và biến JavaScript

  1. Phép gán biến được ưu tiên hơn khai báo hàm
  2. Khai báo hàm được ưu tiên hơn khai báo biến

Các khai báo hàm được đưa vào các khai báo biến chứ không phải trên các phép gán biến.

Hãy xem hành vi này có tác động gì.

Phép gán biến trên khai báo hàm

  

var

double

=

22

;

function

double

(

num

)

{

return

(

num

*

2

)

;

}

console

.

nhật ký

(

typeof

double

)

;

Khai báo hàm trên khai báo biến

  

var

double

;

function

double

(

num

)

{

return

(

num

*

2

)

;

}

console

.

nhật ký

(

typeof

double

)

;

Ngay cả khi chúng tôi đảo ngược vị trí của các khai báo, trình thông dịch JavaScript vẫn sẽ coi double là một hàm

Các lớp nâng

Các lớp JavaScript cũng có thể được phân loại lỏng lẻo như sau:

  1. Khai báo lớp
  2. Biểu thức lớp

Khai báo lớp

Giống như các đối tác chức năng của chúng, các khai báo lớp JavaScript được lưu trữ. Tuy nhiên, chúng vẫn chưa được khởi tạo cho đến khi đánh giá.
Điều này hiệu quả có nghĩa là bạn phải khai báo một lớp trước khi có thể sử dụng nó.

 

var

Frodo

=

new

Hobbit

(

)

; Frodo

.

height

=

100

;

Frodo

.

weight

=

300

;

bảng điều khiển

.

nhật ký

(

Frodo

)

;

class

Hobbit

{

hàm tạo

(

chiều cao

, trọng số

)

{

this

.

height

=

height

;

this

.

weight

=

weight

;

}

}

Tôi chắc chắn rằng bạn đã nhận thấy rằng thay vì nhận được không xác định , chúng tôi nhận được Lỗi tham chiếu . Bằng chứng đó khẳng định quan điểm của chúng tôi rằng các tuyên bố của lớp được lưu trữ.

Nếu bạn đang chú ý đến chiếc linter của mình, điều đó sẽ cung cấp cho chúng tôi một mẹo hữu ích.

  Hobbit đã được sử dụng trước khi nó được khai báo, điều này là bất hợp pháp đối với các biến lớp
 

Vì vậy, đối với phần khai báo lớp, để truy cập vào phần khai báo lớp, trước tiên bạn phải khai báo.

  

class

Hobbit

{

hàm tạo

(

chiều cao

, trọng số

)

{

this

.

height

=

height

;

this

.

weight

=

weight

;

}

}

var

Frodo

=

new

Hobbit

(

)

; Frodo

.

height

=

100

;

Frodo

.

weight

=

300

;

bảng điều khiển

.

nhật ký

(

Frodo

)

;

Biểu thức lớp

Giống như các đối tác hàm của chúng, các biểu thức lớp không được kéo lên.

Dưới đây là một ví dụ về biến thể không được đặt tên hoặc ẩn danh của biểu thức lớp.

  

var

Square

=

mới

Đa giác

(

)

;

Hình vuông

.

height

=

10

;

Hình vuông

.

width

=

10

;

bảng điều khiển

.

nhật ký

(

Hình vuông

)

;

var

Đa giác

=

class

{

hàm tạo

(

chiều cao

, chiều rộng

)

{

this

.

height

=

height

;

this

.

width

=

width

;

}

}

;

Đây là một ví dụ với biểu thức lớp đã đặt tên.

  

var

Square

=

mới

Đa giác

(

)

;

Hình vuông

.

height

=

10

;

Hình vuông

.

width

=

10

;

bảng điều khiển

.

nhật ký

(

Hình vuông

)

;

var

Đa giác

=

class

Đa giác

{

hàm tạo

(

chiều cao

, chiều rộng

)

{

đây là chiều cao của dấu chấm câu toán tử mã thông báo ">;

this

.

width

=

width

;

}

}

;

Cách chính xác để thực hiện việc này như sau:

  

var

=

class

Đa giác

{

hàm tạo

(

chiều cao

, chiều rộng

)

{

đây là chiều cao của dấu chấm câu toán tử mã thông báo ">;

this

.

width

=

width

;

}

}

;

var

Square

=

new

Đa giác

(

)

; Hình vuông

.

height

=

10

;

Hình vuông

.

width

=

10

;

bảng điều khiển

.

nhật ký

(

Hình vuông

)

;

Báo trước

Có một chút tranh luận được đưa ra về việc liệu Javascript ES6 late, biến const và các lớp có thực sự được nâng lên hay không. Một số người cho rằng chúng thực sự được cẩu lên nhưng chưa được vệ sinh trong khi những người khác cho rằng chúng hoàn toàn không được cẩu lên.

Kết luận

Hãy tóm tắt những gì chúng ta đã học được cho đến nay:

  1. Trong khi sử dụng es5 var, việc cố gắng sử dụng các biến chưa được khai báo sẽ dẫn đến việc biến được gán giá trị không xác định khi lưu trữ
  2. Trong khi sử dụng es6 let và const, việc sử dụng các biến chưa được khai báo sẽ dẫn đến Lỗi tham chiếu vì biến vẫn chưa được khởi tạo khi thực thi.

Do đó,

  1. Chúng ta nên tạo thói quen khai báo và khởi tạo các biến JavaScript trước khi sử dụng.
  2. Sử dụng chế độ nghiêm ngặt trong JavaScript es5 có thể giúp hiển thị các biến chưa được khai báo.

Tôi hy vọng bài viết này sẽ là một giới thiệu tốt về khái niệm lưu trữ trong JavaScript và thúc đẩy sự quan tâm của bạn về sự tinh tế của ngôn ngữ JavaScript


Xem thêm những thông tin liên quan đến chủ đề javascript lưu trữ là gì

Các loại function

alt

  • Tác giả: F8 Official
  • Ngày đăng: 2020-01-14
  • Đánh giá: 4 ⭐ ( 1945 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Truy cập ngay https://f8.edu.vn và học tại đây để quản lý được tiến độ học và hơn thế nữa!

    hoclaptrinh javascript mienphi
    ———————————————-/————-
    © Bản quyền thuộc về MyCV.vn
    © Copyright by MyCV.vn ☞ Do not Reup

    Liên hệ: SƠN ĐẶNG
    ► Facebook: https://url.mycv.vn/sondn-fb?ref=yt
    ► Email: sondnf8@gmail.com
    —————————————
    ► Học lập trình: https://url.mycv.vn/f8?ref=yt
    ► Viết CV xin việc: https://url.mycv.vn/mycv?ref=yt
    —————————————
    HỌC LẬP TRÌNH MIỄN PHÍ
    ► Khóa Javascript cơ bản: https://url.mycv.vn/js-basic?ref=yt

localStorage và sessionStorage trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 7362 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách dùng localStorage và sessionStore trong Javascript, qua đó sẽ giúp bạn hiểu được localStorage là gì và sessionStore là gì, so sánh với cookie

Local Storage với JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 2088 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Local Storage là gì? Tương tự như cookie, HTML5 hỗ trợ LocalStorage là một loại lưu trữ web cho phép các trang web và ứng dụng Javascript lưu trữ và truy cập dữ liệu ngay trong trình duyệt mà không có…

Biến trong Javascript

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 3 ⭐ ( 4327 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết hướng dẫn tự học Javascript này, bạn sẽ được tìm hiểu làm thế nào để tạo ra biến để lưu dữ liệu trong Javascript.   Nhưng,   Biến là gì?   Các Biến là cơ bản cho tất cả các ngôn ngữ lập trình. Các biến được sử dụng để lưu trữ dữ liệu, như chuỗi văn bản, số, v.v.   Dữ liệu hoặc giá trị được lưu trữ trong

Map trong JavaScript thì sao?

  • Tác giả: completejavascript.com
  • Đánh giá: 4 ⭐ ( 2229 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Map trong JavaScript là một loại object cho phép lưu trữ dữ liệu theo kiểu key-value, tương tự như object. Sau đây mình sẽ cùng nhau tìm hiểu về nó nhé!

JAVASCRIPT LÀ GÌ? ỨNG DỤNG CỦA JAVASCRIPT VÀ ƯU THẾ VƯỢT TRỘI CẦN BIẾT

  • Tác giả: final-blade.com
  • Đánh giá: 4 ⭐ ( 8037 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

8 thư viện JavaScript để xử lý lưu trữ cục bộ (Local Storage) tốt hơn

  • Tác giả: www.tma.vn
  • Đánh giá: 3 ⭐ ( 4954 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php