---
title: "JavaScriptCpp互操作深入-JSB"
author: "Perrin Yong"
author_profile: https://www.pystone.net/profile/
published_by: "Perrin Yong"
canonical: https://www.pystone.net/notes/javascript-cpp-interop-jsb/
type: note
content_role: unspecified
visibility: public
id_stability: rename-stable
source_path: "10-计算机、信息技术与工程/05-游戏图形与运行时/WebGL/JavaScriptCpp互操作深入-JSB.md"
content_hash: 328c0a34e47f4fed5ee5acc3c707f5b36e2a72eae3ca64f91a6dea33eeeb4ef7
knowledge_version: 224c990773de.5fa8af6e39fa
site_commit: 224c990773de166d23a886306577dd90379529ce
notes_commit: 5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a
---
# JavaScriptCpp互操作深入-JSB

# JavaScriptCpp互操作深入-JSB

## 📚 **JavaScript Bindings（JavaScript 绑定）**
**JSB = JavaScript Bindings**，即 **自动生成的 C++ ↔ JavaScript 双向通信层**

JSB 原本用于原生平台（如 iOS、Android）上，通过 JavaScript 引擎（如 JavaScriptCore、V8）调用 C++ 代码。

对于WebGL平台，将 C++ 编译成 WebAssembly（wasm32），并在 Web 平台运行。因此，需要一种机制让 JavaScript（由 TypeScript 生成）能够调用 WebAssembly 中的 C++ 函数。这就是“绑定”（bindings）的作用。在 Emscripten 中，通常使用 Embind 或 WebAssembly 的 Table 来实现 JavaScript 与 C++ 之间的绑定。但是，在 Cocos 引擎中，他们可能使用了自己的自动化绑定工具（如 CodeGen.py）来生成这些绑定代码，并称之为 JSB（即使是在 Web 平台）。
> 在 Cocos 官方文档中，JSB 通常特指原生平台的绑定。但在 WebAssembly 平台，他们可能沿用了相同的术语（或者称为 WASM 绑定）。

**核心作用**
   - 将 C++ 引擎的功能（如图形渲染、物理引擎、文件系统等）**暴露给 JavaScript/TS 层调用**
   - 允许 JavaScript/TS 代码直接操作 C++ 对象（如创建 `Sprite`、调用 `Physics` 方法）


   当使用 Emscripten 将 C++ 编译为 WebAssembly (`wasm32`) 时：
   - JSB 通过 **自动生成的绑定代码** 实现：
 ```cpp
 // 示例：JSB 自动绑定 C++ 类到 JS
 EMSCRIPTEN_BINDINGS(MyClass) {
   class_<MyClass>("MyClass")
	 .constructor<>()
	 .function("doSomething", &MyClass::doSomething);
 }
 ```
   - 在 TS 中可直接调用：
 ```typescript
 const obj = new MyClass(); // C++ 对象
 obj.doSomething();         // 调用 C++ 方法
 ```

3. **技术流程中的角色**（对应你的图示）
   ```mermaid
   graph LR
     Cpp -->|Clang/LLVM| WASM
     TypeScript -->|tsc| JavaScript
     WASM -->|JSB-Bindings| JavaScript
     JavaScript -->|WebGL API| 渲染
   ```
   - **CodeGen.py**：生成绑定胶水代码（如将 C++ 类映射为 JS 可调用的接口）
   - **CMake + Emscripten**：编译时注入绑定逻辑，生成可直接与 JS 交互的 WASM 模块