เรียกใช้ฟังก์ชัน JavaScript จาก C/C++
เชื่อมช่องว่างในอีกทิศทางหนึ่งด้วยการเรียกใช้ JavaScript จากโค้ด C/C++ WASM ที่คอมไพล์แล้ว โดยใช้เครื่องมือทำงานร่วมกันของ Emscripten
เรียกใช้ฟังก์ชัน JavaScript จาก C/C++ เป็นบทเรียน WebAssembly (WASM) for High Performance Apps ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน WebAssembly (WASM) for High Performance Apps และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส WebAssembly (WASM) for High Performance Apps มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
Two-Way Interop
So far you have called C/C++ from JavaScript. But WASM code often needs to reach back into JS, to log, manipulate the DOM, or call browser APIs.
Emscripten provides several ways for your C/C++ code to call JavaScript.
Why Call JS at All?
WASM is sandboxed, it cannot touch the DOM, fetch, or timers directly. Anything outside pure computation must go through JavaScript.
- Update the page
- Read user input
- Use Web APIs like localStorage
EM_JS: Inline JavaScript
The EM_JS macro lets you define a C function whose body is JavaScript. Call it like any C function.
#include <emscripten.h>
EM_JS(void, js_log, (int x), {
console.log('Value from C: ' + x);
});
int main() { js_log(42); return 0; }EM_ASM: Quick Inline Snippets
For one-off JS, EM_ASM runs a JavaScript snippet inline without declaring a separate function.
EM_ASM({
document.title = 'Set from C++';
});Passing Values to JS
EM_ASM_ variants let you pass arguments and receive return values.
int sum = EM_ASM_INT({
return $0 + $1;
}, 10, 20);
// sum == 30Passing Strings
Strings live in WASM memory. Use Emscripten helpers like UTF8ToString to read a C string pointer in JS.
EM_JS(void, show, (const char* msg), {
console.log(UTF8ToString(msg));
});JavaScript Library Files
For larger interop, put JS functions in a library file and link it with --js-library.
// mylib.js
mergeInto(LibraryManager.library, {
beep: function() { console.log('beep'); }
});Declaring Imported Functions in C
Functions from a JS library are declared extern in C so the compiler links them.
extern void beep();
int main() { beep(); return 0; }Calling Exported C Functions Back
JS can hand a C function pointer back, useful for callbacks, via Module.cwrap or function pointers passed across the boundary.
const tick = Module.cwrap('tick', 'number', []);
setInterval(() => console.log(tick()), 1000);Performance Note
Crossing the JS/WASM boundary has overhead. Keep hot loops inside WASM and call JS only at boundaries (I/O, DOM), not inside tight inner loops.
Best Practices Summary
For calling JS from C/C++:
- Use
EM_JSfor named JS functions,EM_ASMfor snippets - Convert pointers with
UTF8ToString - Use a JS library file for substantial interop
- Minimize boundary crossings in hot paths
Quick Check
Which Emscripten macro defines a C-callable function whose body is written in JavaScript?
Recap
You can now call JavaScript from your WASM code:
EM_JSandEM_ASMembed JS in C/C++EM_ASM_INTpasses args and returns values- JS library files handle larger interop
- Keep boundary crossings out of hot loops
Two-way interop unlocks the full power of the browser from compiled code.
คำถามที่พบบ่อย
บทเรียน “เรียกใช้ฟังก์ชัน JavaScript จาก C/C++” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เรียกใช้ฟังก์ชัน JavaScript จาก C/C++” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส WebAssembly (WASM) for High Performance Apps ให้อัปเกรดเป็น CoddyKit PRO คอร์ส WebAssembly (WASM) for High Performance Apps มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เรียกใช้ฟังก์ชัน JavaScript จาก C/C++”
เชื่อมช่องว่างในอีกทิศทางหนึ่งด้วยการเรียกใช้ JavaScript จากโค้ด C/C++ WASM ที่คอมไพล์แล้ว โดยใช้เครื่องมือทำงานร่วมกันของ Emscripten คุณปฏิบัติ WebAssembly (WASM) for High Performance Apps ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน WebAssembly (WASM) for High Performance Apps หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน WebAssembly (WASM) for High Performance Apps บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “เรียกใช้ฟังก์ชัน JavaScript จาก C/C++” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน WebAssembly (WASM) for High Performance Apps นี้ได้ไหม
ได้ บทเรียน WebAssembly (WASM) for High Performance Apps ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- คอมไพล์ C/C++ เป็น WASM ด้วย Emscripten
- การโหลดและเรียกใช้ WASM ใน JavaScript
- การแลกเปลี่ยนข้อมูลพื้นฐาน ชนิดข้อมูลดั้งเดิม
- เรียกใช้ฟังก์ชัน JavaScript จาก C/C++