03/08/2018, 10:02

Tìm hiểu JavaScript Hoisting

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên quan đến việc trong Javascript bạn có thể sử dụng một biến mà không ...

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên quan đến việc trong Javascript bạn có thể sử dụng một biến mà không cần phải định nghĩa trước, vì vậy để chương trình chạy chuẩn thì bạn phải khai báo biến trước khi sử dụng và đặt nó phía trên cùng phạm vi của biến (trong function, trong đoạn script, ...).

1. Hoisted trong Javascript

Trong Javascript bạn có thể định nghĩa một biến sau khi sử dụng nó, hay nói cách khác một biến có thể được sử dụng trước và định nghĩa sau.

Ví dụ: XEM DEMO

// Gán nhưng chưa khai báo biến
domain = 'https://code24h.com';

// In giá trị
document.write("Domain là: " + domain);

// Khai báo
var domain;

// In lại
document.write("<br/> Domain là: " + domain);

Nếu trong lúc khởi tạo mà bạn gán giá trị cho biến thì kết quả sẽ khác

XEM DEMO

// Gán nhưng chưa khai báo biến
domain = 'https://code24h.com';

// In giá trị
document.write("Domain là: " + domain);

// Khai báo
var domain = 'http://course.code24h.com';

// In lại
document.write("<br/> Domain là: " + domain);

Nhưng nếu viết cách khai báo biến trước khi sử dụng thì ta vẫn có kết quả giống nhau.

XEM DEMO

// Khai báo
var domain;

// Gán nhưng chưa khai báo biến
domain = 'https://code24h.com';

// In giá trị
document.write("Domain là: " + domain);

// In lại
document.write("<br/> Domain là: " + domain);

Và đây chính là cách chuẩn nhất nên viết và ta gọi là hoisting, tức là khai báo biến nằm trên cùng của đoạn mã script.

2. Không phải hoisted trong Javascript

Trong Javascript hoists chỉ tồn tại khi bạn khai báo biến chứ không tồn tại khi gán giá trị ban đầu cho biến, nghĩa là bạn có thể gán thoải mái và nó không liên quan đến việc dễ debug hay không, miễn là cứ khai báo ở trên top.

Ví dụ: XEM DEMO

var domain = 'https://code24h.com';
var email = 'thehalfheart@gail.com';

document.write("Domain là: " + domain);
document.write("<br/> Email là: " + email);

Trong ví dụ này ta khai báo và gán giá trị khởi tạo luôn.

Ví dụ:  XEM DEMO

var domain = 'https://code24h.com';

document.write("Domain là: " + domain);

document.write("<br/> Email là: " + email);

var email = 'thehalfheart@gail.com';

Trong ví dụ này ta sử dung rồi mới khai báo, lúc này chương trình chưa hiểu biến email là gì, vì vậy nó sẽ in ra là undefined.

3. Lời kết

Việc hiểu cơ chế hoisted giúp lập trình viên giảm lỗi và dễ debug trong quá trình phát triển. Không những vậy mà việc khai báo biến nằm trên top của chức năng giúp chương trình sáng và dễ quản lý code hơn.

Những ví dụ này khá đơn giản nên bạn hãy tự mình liên tưởng tới khái niệm biến toàn cục và biến cục bộ, sau đó áp dụng vào thử nhé.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Tìm hiểu Javascript nâng cao

Chào mọi người, hôm nay mình sẽ nói về một số thứ nâng cao trong Javascript, có thể không phải nâng cao so với bạn đang đọc bài này nhưng cũng có thể nó sẽ là nâng cao với người khác <img alt="

Tạ Quốc Bảo viết 08:29 ngày 22/09/2018

Tìm hiểu javascript prototype

Lời mở đầu Với mục đích của bài viết này, tôi sẽ nói về Javascript prototype trong ES5. Như mọi người đã biết trong ES5 javascript không có khái niệm class, nên cũng sẽ không có khái niệm kế thừa như các ngôn ngữ lập trình khác như Java, C#, PHP ... . Chính vì vậy prototype đã được tạo với mục ...

Trịnh Tiến Mạnh viết 15:16 ngày 12/08/2018

Tìm hiểu về Javascript Hoisting

Hoisting là một khái niệm khá hay trong JavaScript tuy nhiên lại ít được mọi người để ý do nó có đôi chút phức tạp cũng như mọi người ít quan tâm đến cách thức hoạt động bên trong ngôn ngữ lập trình. Trong bài viết này mình, mình sẽ chỉ ra khái niệm cũng như cách thức hoạt động bên trong. Do kiến ...

Bùi Văn Nam viết 13:06 ngày 12/08/2018

TÌM HIỂU REGULAR EXPRESSION JAVASCRIPT

Regular expression hay còn được gọi tắt là Regex hay RegExp, là một cách để biểu diễn khuôn mẫu của string. Đây là một phần của ngôn ngữ lập trình JavaScript, cũng như nhiều ngôn ngữ lập trình khác. Nếu bạn là một lập trình viên và đã từng sử dụng Regular Expression thì bạn chắc hẳn sẽ thấy rằng nó ...

Hoàng Hải Đăng viết 20:29 ngày 11/08/2018

TÌM HIỂU JAVASCRIPT CLOSURES

Như đã nói trong bài tìm hiểu function JavaScipt, bài viết này tôi sẽ giới thiệu với các bạn về JavaScript closures. Việc hiểu closures sẽ giúp bạn viết code tốt hơn (ngắn gọn, súc tích hơn và thậm chí dễ hiểu hơn,…). Tuy nhiên, trước khi đi vào những ưu, nhược điểm của việc sử dụng ...

Tạ Quốc Bảo viết 20:26 ngày 11/08/2018
0