Hướng dẫn hoisting functions javascript - chức năng hosts javascript

Đã đăng vào thg 11 27, 2017 3:11 SA 3 phút đọc 3 phút đọc

1. Javacript Hoisting?

Bắt đầu với ví dụ 1 nào (len)

#Ex1: 
console.log(a);

Kết quả không có gì lạ: raise lỗi

#Ex2:
console.log(a);
a = 'Hello Hoisting';

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Ví dụ 2:

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Ví dụ này có vẻ phức tạp hơn ví dụ trên "rất nhiều" nhưng kết quả vẫn chỉ có một:

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Ví dụ 3:

#Ex3:
var a;
console.log(a);

Output sẽ là

#Ex3:
var a;
console.log(a);

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Ví dụ 4

#Ex4:
console.log(a);
var a;

Thật tình cờ và thật bất ngờ, kết quả ra trùng với

#Ex3:
var a;
console.log(a);

#Ex3:
var a;
console.log(a);

Định nghĩa

Hoisting là hành động mặc định của Javascript, nó sẽ chuyển phần khai báo lên phía trên top Trong Javascript, một biến (variable) có thể được khai báo sau khi được sử dụng

Chúng ta sẽ tiếp tục làm

#Ex3:
var a;
console.log(a);

#Ex5
console.log(a);
var a = 'Hello Hoisting'
#Output = ???

Kết quả sẽ được diễn giải theo sơ đồ sau: Giải thích:

• Trình biên dịch của Javascript sẽ phân tách phần

  #Ex3:
  var a;
  console.log(a);
  

  6 thành 2 phần là khai báo và gán giá trị
  • Khai báo:

    #Ex3:
    var a;
    console.log(a);
    

    7
  • Gán giá trị

    #Ex3:
    var a;
    console.log(a);
    

    8

• Theo Hoisting, Javascipt sẽ chuyển phần khai báo lên trên top. Vì vậy, sẽ chỉ có phần khai báo được chuyển lên trên top, còn phần gán giá trị vẫn giữ nguyên thứ tự nên vẫn ở dưới Vậy nên Output sẽ là

  #Ex3:
  var a;
  console.log(a);
  

  1

2. Hoisting of function?

Định nghĩa

Hoisting là hành động mặc định của Javascript, nó sẽ chuyển phần khai báo lên phía trên top Trong Javascript, một biến (variable) có thể được khai báo sau khi được sử dụng

say_something('YOLO');
function say_something(a){
    console.log(a);
}

Chúng ta sẽ tiếp tục làm

#Ex3:
var a;
console.log(a);

Kết quả sẽ được diễn giải theo sơ đồ sau: Giải thích:

#Ex7:
do_something();
function do_something(){
    console.log(a);
    var a = 'fly';
}

Trình biên dịch của Javascript sẽ phân tách phần

#Ex3:
var a;
console.log(a);

Khai báo:

#Ex3:
var a;
console.log(a);

• Gán giá trị

  #Ex3:
  var a;
  console.log(a);
  

  8
• Theo Hoisting, Javascipt sẽ chuyển phần khai báo lên trên top. Vì vậy, sẽ chỉ có phần khai báo được chuyển lên trên top, còn phần gán giá trị vẫn giữ nguyên thứ tự nên vẫn ở dưới Vậy nên Output sẽ là

  #Ex3:
  var a;
  console.log(a);
  

  1phần khai báo chỉ được chuyển lên trên top của hàm

  #Ex4:
  console.log(a);
  var a;
  

  1 chứ không phải của chương trình

2. Hoisting of function?

Trình biên dịch Javascript sẽ chuyển phần khai báo lên trên top giống như cách làm với biến. Ví dụ 6:

Output cũng giống như với phần biến #Ex4: console.log(a); var a; 0

Ví dụ 7: Ví dụ 8:

var show_me;
show_me();
function show_me() {
  console.log('Money');
}
show_me = function() {
  console.log('Diamond');
}

Kết quả sẽ được diễn giải theo sơ đồ sau:

Giải thích:

Cũng giống như với phần 1, phần bên trong của hàm

#Ex4:
console.log(a);
var a;

#Ex4:
console.log(a);
var a;

var show_me;
show_me();
function show_me(){
  console.log('Money');
}
show_me = function(){
  console.log('Diamond');
}
function show_me(){
  console.log('Gem');
}

Nhưng phần khai báo chỉ được chuyển lên trên top của hàm

#Ex4:
console.log(a);
var a;

Vậy nên, Output sẽ là #Ex3: var a; console.log(a); 1

• 3. Hoisting function vs Hoisting variable
• Định nghĩa:
• Trình biên dịch Javascript sẽ chuyển phần đinh nghĩa của hàm trước phần khai báo của biến Ví dụ 8:

Theo định nghĩa trên, output sẽ là #Ex4: console.log(a); var a; 5

Những hàm khai báo sau nếu trùng tên sẽ ghi đè lên hàm khai báo trước

Ví dụ 9:

Đã đăng vào thg 9 13, 2021 3:08 SA 3 phút đọc 3 phút đọc

Mở đầu

Những người mới bắt đầu tìm hiểu về Javascript sẽ thắc mắc khi gặp một số trường hợp sử dụng biến rồi mới khai báo sau. Vì theo quy tắc chung của đa số các ngôn ngữ lập trình, để sử dụng một biến thì ta phải khai báo nó trước. Làm được như thế vì trong Javascript có cơ chế Hoisting, trong bài viết này chúng ta sẽ tìm hiểu cơ chế Hoisting trong Javascript. Để hiểu về Hoisting trước tiên phải bạn phải hiểu về Scope trong Javascript.
Làm được như thế vì trong Javascript có cơ chế Hoisting, trong bài viết này chúng ta sẽ tìm hiểu cơ chế Hoisting trong Javascript. Để hiểu về Hoisting trước tiên phải bạn phải hiểu về Scope trong Javascript.

Hoisting là gì ?

Hoisting là cơ chế mặc định của JavaScript để di chuyển tất cả các biến và hàm khi khai báo lên đầu scope trước khi chúng được thực thi. Lưu ý đối với cơ chế này nó chỉ di chuyển khai báo, còn việc gán giá trị thì giữ nguyên.
Lưu ý đối với cơ chế này nó chỉ di chuyển khai báo, còn việc gán giá trị thì giữ nguyên.

Hoisting variables

Vòng đời của biến trong javascript bao gồm các giai đoạn sau:

• Khai báo
• Khởi tạo giá trị mặc định
• Gán một giá trị cho biến được khởi tạo Tuy nhiên, vì Javascript cho phép ta gán giá trị ngay khi khai báo biến. Đây là cách chúng ta thường làm:
  Tuy nhiên, vì Javascript cho phép ta gán giá trị ngay khi khai báo biến. Đây là cách chúng ta thường làm:
  

var hoist = 500;

Các bạn thử đoán xem kết quả của đoạn code sau đây là gì:

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Mình đoán sẽ có nhiều người nghĩ rằng kết quả là

#Ex4:
console.log(a);
var a;

#Ex3:
var a;
console.log(a);

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Nếu bạn sẽ thắc mắc khai báo được đưa lên trên cùng, trên cùng là ở đâu. Trên cùng là vị trí cao nhất trong scope hện tại (current scope). Ví dụ:
Ví dụ:

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Function trên tương tự như thế này:

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Hoisting functions

Trong Javascript có hai loại hàm là:

• Khai báo hàm (Function Declaration)
• Biểu thức hàm (Function Expression) Với function declarations thì bạn khai báo bắt đầu là function operator, sau đó gán cho nó một cái tên như ví dụ dưới đây:
  Với function declarations thì bạn khai báo bắt đầu là function operator, sau đó gán cho nó một cái tên như ví dụ dưới đây:

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Còn với function expressions thì bạn tạo một variable sau đó gán cho nó với một anonymous function như ví dụ sau đây:

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Trong Javascript thì Function declarations có thuộc tính Hoisting, còn Function expression thì không. Chúng ta cùng xem các ví dụ sau đây:
Chúng ta cùng xem các ví dụ sau đây:

#Ex2:
console.log(a);
a = 'Hello Hoisting';

#Ex2:
console.log(a);
a = 'Hello Hoisting';

Haizzz... tới đây bạn cảm thấy Hoisting như thế nào. Cá nhân mình thì thấy Hositing có thể dẫn để code của chúng ta cẩu thả và khó quản lý. Và phiên bản ES6 sinh ra nhằm cải tiến các vấn đề Javascript gặp phải.

Tổng kết

Trên đây mình đã giải thích về Hoisting trong Javascript. Chỉ ra một phần sự khác nhau giữa Function expression và Function declaration.Function expression và Function declaration.

Tham khảo

https://dmitripavlutin.com/variables-lifecycle-and-why-let-is-not-hoisted/ https://xdevclass.com/hieu-sau-ve-hoisting-scope-trong-javascript/

All rights reserved