{
  "schemaVersion": "0.11.0",
  "canonical": "https://www.pystone.net/notes/javascript-cpp-interop-jsb/",
  "atlas": "https://www.pystone.net/?node=javascript-cpp-interop-jsb#knowledge-atlas",
  "markdown": "https://www.pystone.net/notes/javascript-cpp-interop-jsb.md",
  "context": "https://www.pystone.net/notes/javascript-cpp-interop-jsb.context.json",
  "knowledgeVersion": "224c990773de.5fa8af6e39fa",
  "build": {
    "siteCommit": "224c990773de166d23a886306577dd90379529ce",
    "notesCommit": "5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a",
    "builtAt": "1970-01-01T00:00:00.000Z",
    "version": "224c990773de.5fa8af6e39fa"
  },
  "id": "note:javascript-cpp-interop-jsb",
  "slug": "javascript-cpp-interop-jsb",
  "title": "JavaScriptCpp互操作深入-JSB",
  "type": "note",
  "visibility": "public",
  "idStability": "rename-stable",
  "author": {
    "name": "Perrin Yong",
    "profile": "https://www.pystone.net/profile/"
  },
  "publisher": {
    "name": "Perrin Yong",
    "profile": "https://www.pystone.net/profile/"
  },
  "aliases": [],
  "summary": "JavaScriptCpp互操作深入 JSB",
  "contentRole": "unspecified",
  "isMoc": false,
  "mocRecognition": "none",
  "generated": false,
  "attribution": "unspecified",
  "domain": "10-计算机、信息技术与工程",
  "tags": [],
  "mocs": [],
  "contentHash": "328c0a34e47f4fed5ee5acc3c707f5b36e2a72eae3ca64f91a6dea33eeeb4ef7",
  "assets": [],
  "headings": [
    {
      "depth": 1,
      "text": "JavaScriptCpp互操作深入-JSB",
      "anchor": "javascriptcpp互操作深入-jsb",
      "citation": "https://www.pystone.net/notes/javascript-cpp-interop-jsb/#javascriptcpp%E4%BA%92%E6%93%8D%E4%BD%9C%E6%B7%B1%E5%85%A5-jsb"
    },
    {
      "depth": 2,
      "text": "📚 JavaScript Bindings（JavaScript 绑定）",
      "anchor": "javascript-bindingsjavascript-绑定",
      "citation": "https://www.pystone.net/notes/javascript-cpp-interop-jsb/#javascript-bindingsjavascript-%E7%BB%91%E5%AE%9A"
    }
  ],
  "claims": [],
  "outgoing": [],
  "incoming": [
    {
      "id": "note:game-graphics-and-runtime",
      "title": "游戏图形与运行时",
      "url": "https://www.pystone.net/notes/game-graphics-and-runtime/",
      "atlas": "https://www.pystone.net/?node=game-graphics-and-runtime#knowledge-atlas",
      "label": "游戏图形与运行时",
      "origin": "explicit",
      "humanReviewed": true,
      "context": "WebGL中的“JavaScriptCpp互操作深入-JSB”导航项",
      "citation": "https://www.pystone.net/notes/game-graphics-and-runtime/#webgl"
    }
  ],
  "contentMarkdown": "# JavaScriptCpp互操作深入-JSB\n\n# JavaScriptCpp互操作深入-JSB\n\n## 📚 **JavaScript Bindings（JavaScript 绑定）**\n**JSB = JavaScript Bindings**，即 **自动生成的 C++ ↔ JavaScript 双向通信层**\n\nJSB 原本用于原生平台（如 iOS、Android）上，通过 JavaScript 引擎（如 JavaScriptCore、V8）调用 C++ 代码。\n\n对于WebGL平台，将 C++ 编译成 WebAssembly（wasm32），并在 Web 平台运行。因此，需要一种机制让 JavaScript（由 TypeScript 生成）能够调用 WebAssembly 中的 C++ 函数。这就是“绑定”（bindings）的作用。在 Emscripten 中，通常使用 Embind 或 WebAssembly 的 Table 来实现 JavaScript 与 C++ 之间的绑定。但是，在 Cocos 引擎中，他们可能使用了自己的自动化绑定工具（如 CodeGen.py）来生成这些绑定代码，并称之为 JSB（即使是在 Web 平台）。\n> 在 Cocos 官方文档中，JSB 通常特指原生平台的绑定。但在 WebAssembly 平台，他们可能沿用了相同的术语（或者称为 WASM 绑定）。\n\n**核心作用**\n   - 将 C++ 引擎的功能（如图形渲染、物理引擎、文件系统等）**暴露给 JavaScript/TS 层调用**\n   - 允许 JavaScript/TS 代码直接操作 C++ 对象（如创建 `Sprite`、调用 `Physics` 方法）\n\n\n   当使用 Emscripten 将 C++ 编译为 WebAssembly (`wasm32`) 时：\n   - JSB 通过 **自动生成的绑定代码** 实现：\n ```cpp\n // 示例：JSB 自动绑定 C++ 类到 JS\n EMSCRIPTEN_BINDINGS(MyClass) {\n   class_<MyClass>(\"MyClass\")\n\t .constructor<>()\n\t .function(\"doSomething\", &MyClass::doSomething);\n }\n ```\n   - 在 TS 中可直接调用：\n ```typescript\n const obj = new MyClass(); // C++ 对象\n obj.doSomething();         // 调用 C++ 方法\n ```\n\n3. **技术流程中的角色**（对应你的图示）\n   ```mermaid\n   graph LR\n     Cpp -->|Clang/LLVM| WASM\n     TypeScript -->|tsc| JavaScript\n     WASM -->|JSB-Bindings| JavaScript\n     JavaScript -->|WebGL API| 渲染\n   ```\n   - **CodeGen.py**：生成绑定胶水代码（如将 C++ 类映射为 JS 可调用的接口）\n   - **CMake + Emscripten**：编译时注入绑定逻辑，生成可直接与 JS 交互的 WASM 模块\n"
}