JavaScript - hoisting không áp dụng cho hàm mũi tên
TIL
644
@100daysTIL
72
White

Minh-Trung Nguyễn viết ngày 24/04/2018

JavaScript - hoisting không áp dụng cho hàm mũi tên

Day 43:

Một ngày đẹp giời, copy code được code của người khác về hý hửng chạy thấy ngon, nhưng chưa hài lòng vì thấy vẫn dùng khai báo hàm theo ES5, nhanh nhảu sửa lại thành hàm mũi tên cho đúng chuẩn ES6.

Code ban đầu: Mỗi lần sự kiện "zoom" được lắng nghe (on), thì hàm zoomed() sẽ được gọi.

var zoom = d3.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

function zoomed() {
 // làm việc gì đấy
}

Code sửa theo ES6, biến khai báo zoomed() thành hàm mũi tên.

var zoom = d3.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

const zoomed = () => {
 // làm việc gì đấy
}

Kết quả? Báo lỗi zoomed undefined.

Lý do? Quên mất là hàm mũi tên không được hoisted vì nó đơn giản là một dạng của function expression. Cho nên hoặc là đổi nó lên trên trước phần var zoom, hoặc lại chuyển lại khai báo hàm như cách ban đầu.

Về vấn đề hoisting trong JavaScript, có thể đọc thêm ở đây (dịch lại từ quyển You Don't Know JS của Kyle Simpson).

ngminhtrung 25-04-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Minh-Trung Nguyễn

58 bài viết.
81 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
46 15
Đăng lại một bài đã viết từ cách đây mấy tháng. Chủ đề này đã có không ít, nhưng chẳng hiểu sao lượng bài tự viết của dân lập trình người Việt ta v...
Minh-Trung Nguyễn viết 8 tháng trước
46 15
White
28 5
Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm t...
Minh-Trung Nguyễn viết 1 năm trước
28 5
White
17 4
Về bước tìm và xử lý dữ liệu của Việt Nam phục vụ Data Visualization nền web Làm việc với D3js được nửa năm, một trong những điều bận lòng là chưa...
Minh-Trung Nguyễn viết 8 tháng trước
17 4
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 6 tháng trước
0 2
White
20 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết 2 năm trước
20 1
White
9 0
Có một tuyên ngôn cho chủ nghĩa tối giản trong ngành phần mềm. Link: http://minifesto.org/ Fight for Pareto's law, look for the 20% of effort th...
Cẩm Huỳnh viết 3 tháng trước
9 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
58 bài viết.
81 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!