logo

Đang load dữ liệu

logo devmaster

VIỆN CÔNG NGHỆ VÀ ĐÀO TẠO DEVMASTER

Đào tạo - Phần mềm - Cho thuê nhân sự

  • 0969.609.003
  • 0978.611.889
  • Trang chủ
  • Các khoá đào tạo
    • Chuyên đề WEB - PHP

      • Lập trình web với HTML5 - CSS3- JQuery - Bootstrap - Ajax - [36 giờ]
      • Lập trình web frontend - reactjs - [75 giờ]
      • Lập trình web với mã nguồn mở PHP&MYSQL - PHP FRAMEWORK [126 giờ]

      Chuyên đề Mobile

      • Lập trình Games/Apps trên nền tảng Android - [120 giờ]
      • Lập trình Games/Apps trên nền tảng IOS - [120 giờ]

      Chuyên đề JAVA

      • Ngôn ngữ lập trình hướng đối tượng với java - [40 giờ]
      • Lập trình ứng dụng với java - [100 giờ]
      • Lập trình web site với java framework (JPA, HIBERNATE, SPRING MVC, SPRINGBOOT) - [276 giờ]

      Chuyên đề NETWORK/SECURITY

      • Khoá học Quản trị hạ tầng mạng CCNA v6 - [72 giờ]
      • Khoá học quản trị hệ thống với Windows SERVER 2012- [72 giờ]
      • Chuyên gia bảo mật hệ thống CompTIA + - [110 giờ]

      Chuyên đề .NET

      • Nền tảng lập trình hướng đối tượng với C# - [40 giờ]
      • Lập trình ứng dụng WINDOWS FORM - [100 giờ]
      • Lập trình Web với ASP.NET MVC 5, WebAPI - [145 giờ]

      Chuyên đề khác

      • Ngôn ngũ lập trình C/C++ - [80 giờ]
  • Lập trình cho trẻ em
  • Dịch vụ
    • Đào tạo theo như cầu
    • Cung cấp thiết bị - Phần mềm
    • Tư vấn - Thiết kế mạng hạ tầng
    • Tư vấn - Triển khai dịch vụ mạng
    • Tư vấn - Tư vấn, triển khai giám sát hệ thống
    • Thực tập dự án
  • Lịch khai giảng
  • Tin tức
    • Tin tức và sự kiện
    • Tin hoạt động
    • Tin công nghệ
    • Hội thảo, workshop, Codecam
    • Thông tin việc làm
    • Cẩm nang chia sẻ kiến thức
  • Tiện ích
  • Liên hệ

Cẩm nang chia sẻ kiến thức

Mar - 2019

23

Hoisting Javascript

Cẩm nang chia sẻ kiến thức

Hôm nay mình sẽ giới thiệu về hoisting trong Javascript, một vấn đề không còn mới nhưng với những ai mới bắt đầu với JS thì sẽ gặp nhiều khó khăn khi không hiểu rõ được bản chất vấn đề.

Hoisting là gì

Về cơ bản thì khi Javascript Engine compile code của chúng ta, tất cả các biến được định nghĩa bằng toán tử var sẽ được hoisted/lifted lên phía trên scope hiện tại mà nó được định nghĩa, cụ thể là function nếu nó được định nghĩa trong function, và global scope nếu được định nghĩa bên ngoài function mà không có quan tâm đến vị trí ta khai báo.

Ví đơn giản như sau

1
2
3
4
5
 
someString = "myString";
console.log(someString);
var someString;
 

Theo bạn thì console.log sẽ in ra gì ?

  1. Uncaught ReferenceError: myName is not defined
  2. Sunil
  3. undefined

Như được đề cập ở trên thì console sẽ in ra màn hình “myString”.

Định nghĩa biến someString được đưa lên đầu, ta có thể access và assign giá trị cho nó.

someString sẽ có giá trị undefined khi mới chỉ được hoisted.

Và các bạn nên phân biệt giữa null và undefined. Undefined là variable đã được declare nhưng chưa được assign giá trị, còn null là nonexist value.

Có thể bạn quan tâm

Tính năng ít được biết đến trong JavaScript

JavaScript Tip: Đặt tên function để debugging một cách dễ dàng hơn

Javascript chỉ hoisting variable declaration.

1
2
3
4
 
console.log(someString);
var someString = "myString";
 

Console sẽ print ra undefined chứ không ra “myString” vì JS chỉ hoisting declaration của variable

Hoisting function

Một Ví dụ đơn giản khác của hoisted function là như sau

1
2
3
4
5
6
7
8
9
10
 
var doSomething;
doSomething();
function doSomething() {
  console.log('Money');
}
doSomething = function() {
  console.log('Diamond');
}
 

Kết quả in ra màn hình sẽ là Money bởi: Chỉ phần declaration của doSomething được hoisted lên trên đầu, phần assign value cho doSomething( print ra diamond ) không được hoisted.

Arrow function and funciton expression

Arrow function và function expression không được javascript hoisted

1
2
3
4
5
6
7
 
doSomething()
somefunc()
const doSomething = function somefunc() {
   console.log(123)
}
 

Nếu bạn chạy đoạn code trên thì sẽ có lỗi runtime somefunc, doSomething is not defined. Lý do bởi vì function expression không được Javascript hoisted

Multiple declartion in samescope

Chúng ta đã biết hoisting là gì, vậy hãy đoán xem kết quả của đoạn code sau là gì

1
2
3
4
5
6
7
8
9
10
 
function testHoisting() {
   var test = "someString";
   function test() {
       return "String in function";
   }

 

   return test();
}
console.log(testHoiting());
 

Thoạt nhìn có lẽ sẽ đoán là print ra “String in function”. Nhưng thực tế khi run thì sẽ print ra Error test is not function. Bởi vì với multiple declaration trong cùng 1 scope(cả varaible và function) thì hoisting của variable bị ignore và đoạn code trên sẽ được JS engine thực hiện như sau

1
2
3
4
5
6
7
8
9
10
 
function testHoisting() {
   function test() {
       return "String in function";
   }
   test = "someString";
   return test();
}
console.log(testHoiting());
 

 

Preventing scope problems

Để hạn chế các vấn đề problem về phạm vi sử dụng scope của các variable, chúng ta có một số cách sau:

  • Khai báo tất cả các biến ở đầu của mỗi function
  • Tránh sử dụng var để khai báo các biến
  • Chỉ sử dụng một câu lệnh let hoặc const để khai báo biến trong 1 function. Ex:
 
1
2
3
4
5
6
 
let one, two, three, four;
vs
let one;
let ...
 

 

  • Luôn khai báo các biến trước khi sử dụng chúng

Conclusion

  • Hoisting là việc JS engine đưa declaration của variable và function lên top của scope chúng được declare
  • Arrow function và function expression không được hoisted
  • Nếu có nhiều declaration trùng identifier thì hoisting của variable sẽ bị bỏ qua

Nguồn: Sưu tầm từ internet via Viblo

 

 

 

 

Các bài viết cùng chủ đề

BÍ QUYẾT HỌC LẬP TRÌNH CHO CÁC BẠN ĐẦU NĂM HỌC MỚI ❤
BÍ QUYẾT HỌC LẬP TRÌNH CHO CÁC BẠN ĐẦU NĂM HỌC MỚI...
5 Phương pháp hay để mở rộng các dự án React của bạn một cách dễ dàng
5 Phương pháp hay để mở rộng các dự án React của b...
Lab06.1 - Data Access In ASPNET MVC 5
Lab06.1 - Data Access In ASPNET MVC 5
Lab05 - Data Validation and Annotation In ASPNET MVC 5
Lab05 - Data Validation and Annotation In ASPNET M...
Lab 04 - Model in ASP.NET MVC 5 - Phần tự thực hành
Lab 04 - Model in ASP.NET MVC 5 - Phần tự thực hàn...
Lab 04 - Model in ASP.NET MVC 5 - Bài 4.2
Lab 04 - Model in ASP.NET MVC 5 - Bài 4.2

Các khóa đào tạo chuyên đề

Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
Lập trình ứng dụng trên nền tảng android Lập trình ứng dụng trên nền tảng android
Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack

Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
Lập trình ứng dụng với WINDOWS FORM Lập trình ứng dụng với WINDOWS FORM
Lập trình ứng dụng với JAVA (FORM) Lập trình ứng dụng với JAVA (FORM)
Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
Lập trình frontend với reacjs (Full) Lập trình frontend với reacjs (Full)
Viện Công Nghệ Và Đào Tạo Devmaster

DEVMASTER ACADEMY

Địa chỉ: Tầng 6 - Tòa nhà VIỆN CÔNG NGHỆ
Số 25, Vũ Ngọc Phan - Láng Hạ - Đống Đa - Hà Nội

Hotline: 0969 609 003 | 0978 611 889

devmaster.contact@gmail.com

hna.tvchung@gmail.com

CÁC KHÓA HỌC CHUYÊN ĐỀ

  • Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
  • Lập trình ứng dụng trên nền tảng android
  • Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
  • Lập trình ứng dụng với WINDOWS FORM
  • Lập trình ứng dụng với JAVA (FORM)
  • Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
  • Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
  • Lập trình frontend với reacjs (Full)
Viện Công Nghệ Và Đào Tạo Devmaster

VIỆN CÔNG NGHỆ VÀ ĐÀO TẠO DEVMASTER - Học thực tế * Làm thực tế * Cam kết việc làm
Copyright by Ⓒ DEVMASTER 2015