Học Javascript 3: Global Environment và Global Object
Bài viết giải thích về Global Execution Context trong JavaScript, cách nó tạo ra Global Object và biến this. Tác giả minh họa cách chạy code JavaScript trong trình duyệt, phân tích cách Global Object được tạo ra là window trong môi trường trình duyệt và khác biệt khi chạy trong các môi trường khác như NodeJS.
Global Execution Context là gì
Ở trước, chúng ta đã giải thích Execution Context là gì. Bất cứ khi nào code chạy trong Javascript, nó được chạy bên trong một Execution Context. Sẽ có nhiều Execution Context nhưng cái lớn nhất, 'leader' của các Execution Context khác được gọi là Global Execution Context.
Global Execution Context có gì
Global Execution Context sẽ tạo cho bạn 2 thứ là Global Object và biến là this
Để demo, chúng ta sẽ chạy Javascript code
Chạy Javascript code
Ok, sau 3 bài, chúng ta cùng bắt đầu viết những dòng code đầu tiên. Bạn chỉ cần tạo một file index.html và một file .js là được
index.html:
Còn file .js bạn đặt tên gì cũng được, sau đó để 2 file cùng chung folder là được Ok, mình xài Visual Studio Code nên chụp màn hình lại cho bạn dễ hình dung:
Bạn lưu code trong file .js rồi mở index.html là xong! Bạn nhớ mở file index.html bằng Google Chrome để xài được Chrome DevTool nhé.
Chrome DevTool
Ok, sau khi mở file index.html lên sẽ có một trang web trắng hiện lên. Bạn nhấn tổ hợp phím Ctrl + Shift + J ( Windows ) hoặc Cmd + Opt + I ( Mac ). Hoặc click phải chuột vào trang web, chọn Inspect
Mở Chrome DevTool
Bạn chọn tab Console để xài Command Line API. Tính năng của cái này nhiều lắm mình không nói hết. Nhưng nó có một tính năng giống như Read–eval–print loop của Python hay Ruby. Tức là gõ code vào cái chạy được luôn, sẽ có 2 trường hợp
- Bạn có thể chạy các biểu thức toán học, chuỗi, true, false: Ví dụ bên dưới mình gõ 2+2 và nhấn Enter, kết quả sẽ được 4.
Hoặc cộng 2 kí tự:
- Bạn có thể truy cập giá trị biến, hằng, class, hàm, vv trong file đang chạy. Hiện tại trong ví dụ này là file app.js. Ví dụ mình muốn truy cập biến **age, **thì mình sẽ gõ age vào và nhấn Enter:
Thì nó sẽ báo lỗi vì trong file app.js chưa có biến nào tên **age **hết.
Dễ hiểu mà đúng hem?
Global Object
Quay lại vấn đề của bài hôm nay, như mình đã nói ở trên thì Global Execution Context sẽ tạo cho bạn 2 thứ là Global Object và biến là **this. **Bạn lưu ý là file **app.js **của mình vẫn trống trơn, chưa có code gì nha.
Tiếp theo bạn thử gõ this vào và nhấn Enter:
Tiếp theo bạn thử gõ window và nhấn Enter:
Bạn nhận được cùng kết quả
Giải thích: Mặc dù file app.js không có gì nhưng nó vẫn chạy, Syntax Parser sẽ chuyển code sang mã máy, do không có code nên nó bỏ qua và không có lỗi. Tiếp theo Global Execution Context sẽ tạo cho bạn 2 thứ là Global Object là window và biến là **this **có giá trị bằng với window luôn.
Vì chúng ta đang chạy JS code trên trình duyệt nên global object là window, nhưng nếu chạy ở môi trường khác như NodeJS thì global object sẽ khác. Bạn có thể xem thêm global object của NodeJS tại đây
Code của bạn
Oke, bạn đã hiểu sơ sơ rồi đúng không. Bây giờ bạn vào file app.js để viết code của riêng mình nhé.
Lưu lại và ra refresh index.html nhé.
Bạn gõ lại window để lấy global object. Sau đó bạn mở object này ra để xem các name-value pair của object window này.
Global rốt cuộc là gì
Như ví dụ trên, bạn thấy là cả biến **homepage **và hàm **hello() **đều thuộc global object window.
Vậy global tức là những gì không ở bên trong function
Kết luận
Bạn bắt đầu hình dung được code Javascript chạy được nhờ có Execution Context. Nó tạo thêm cho chúng ta những thứ như global object và this. Ngoài ra còn có Outer Environment - cái này chúng ta sẽ tìm hiểu ở những bài sau.
Related Posts
Discover more content you might enjoy
English Course Challenge in 2 weeks - Day 12: Kinh nghiệm quay khoá học
Bài viết chia sẻ kinh nghiệm quay khóa học tiếng Anh về Bubble.io, bao gồm việc lựa chọn phần mềm Screen.Studio để quay màn hình và tự động tạo phụ đề, những bài học từ việc đặt mục tiêu và xác định đối tượng học viên trước khi chọn nội dung, cũng như lợi ích của việc thử thách bản thân để vượt qua nỗi sợ và hoàn thành dự định. Tác giả cũng giới thiệu khóa học 'Build your first web app in Bubble for beginners' dành cho người mới bắt đầu.
English Course Challenge in 2 weeks - Day 7: Fine-tuning ChatGPT là gì?
Bài viết chia sẻ tiến trình ngày thứ 7 trong thử thách tạo khóa học tiếng Anh trong 2 tuần. Tác giả giới thiệu về Fine-tuning ChatGPT, một tính năng cho phép tạo phiên bản ChatGPT tùy chỉnh dựa trên dữ liệu cung cấp, đặc biệt hữu ích cho chatbot hỗ trợ khách hàng. Bài viết cũng thảo luận về việc điều chỉnh hướng phát triển ứng dụng demo và khóa học, cùng với những khó khăn khi sử dụng API của OpenAI tại Việt Nam.
English Course Challenge in 2 weeks - Day 2: Tiềm năng của Prompt Engineering
Bài viết chia sẻ về việc phát triển ứng dụng SaaS AI demo cho khóa học Bubble, tập trung vào Prompt Engineering - kỹ thuật viết prompt hiệu quả cho AI. Tác giả giới thiệu cấu trúc prompt chuẩn gồm 6 phần: Persona, Context, Task, Format, Examplar và Tone, đồng thời trình bày ý tưởng và mockup cho ứng dụng hỗ trợ người dùng viết prompt tốt hơn, giải quyết vấn đề nhiều người gặp phải khi sử dụng AI.
Đối thoại với AI: Generative AI (AI tạo sinh) và những điều cần biết
Bài viết dạng hỏi đáp toàn diện về AI tạo sinh, bao gồm kỹ thuật viết prompt hiệu quả, cách kiếm tiền từ AI, các nền tảng thay thế Claude AI, chi phí huấn luyện mô hình lớn, và các khái niệm quan trọng như BERT, mô hình tiền huấn luyện cùng những vấn đề đạo đức liên quan.
Day 9 - Profitable MVP in 30 Days - Launch day & first sale
Ngày thứ chín của thử thách Profitable MVP in 30 Days, chia sẻ về ngày ra mắt sản phẩm SoundBar trên các nền tảng như ProductHunt, Reddit và Hacker News, cùng niềm vui khi có được đơn hàng đầu tiên từ Reddit.
Day 5 - Profitable MVP in 30 Days - Ý tưởng này đã có người làm rồi
Ngày thứ năm của thử thách Profitable MVP in 30 Days, đối mặt với việc phát hiện ý tưởng đã có người thực hiện và cách biến điều này thành lợi thế để cải thiện sản phẩm của mình.