---
# System prepended metadata

title: What's the difference between host objects and native objects?

---

# What's the difference between host objects and native objects?

### 在 ES5 時代，objects分兩種，host object（宿主對象）和native object（原生對象）。

- host object（宿主對象）：由執行環境提供，例如瀏覽器的 `window`, `history`。原生對象以外的都是宿主對象。
    - 更多範例： `window`, `document`, `location`, `history`, `XMLHttpRequest`, `setTimeout`, `getElementsByTagName`, `querySelectorAll`, `console`  ...
- native object（原生對象）：指語義完全由ECMA定義並且不包含任何host environment(宿主環境)定義的的對象，例如`NaN`, `parseInt`和 `indexOf`。其中，有一些原生對象屬於build-in object（內置對象），是在程式執行時被創建(new)的對象，例如 `Date`, `Math`。
    - 更多範例： `Object (constructor)`, `parseInt`, `eval`, `string` methods like `indexOf` and `replace`, `array` methods, `Date`, `Math`, ...

---

### 補充： host environment

- 什麼是 host environment？

    > host environment(宿主環境)：宿主環境可以是作業系統、伺服器程式、應用程式

    - 從 host environment 再談什麼是JavaScript：

        > JavaScript 是個跨平台、物件導向、輕小型的腳本語言。作為獨立語言並不實用，而是為了能簡單嵌入其他產品和應用程式（例如：網頁瀏覽器）而設計。JavaScript 若寄宿在宿主環境（Host environment）時，可以與宿主環境中的物件 （Object）相連，並以程式控制這些物件。

---

### 現在的時代：ES6

ES6不再使用原生對象和宿主對象這樣的術語。相反，它定義了以下對象類型，並對其預期行為進行了更清晰的解釋

- ordinary object：普通對象，需要具備了對象的所有基本內置方法。
    ![](https://i.imgur.com/1P4HOsx.png)


- exotic object：外來對象，如果不完全具備所有對象擁有的基本內置方法，就是外來對象。 JS裡的對象不是普通對象就是外來對象。
    ![](https://i.imgur.com/8FsU0Z0.png)
- standard object：標準對象，語義由本規範定義的對象。
    - [Standard built-in objects - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
- built-in object：內置對象，跟ES5中描述一樣。

    - [Standard built-in objects - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)

---

### 參考資料

* [What is the difference between native objects and host objects?](https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects)
* [valerybugakov/interview-answers](https://github.com/valerybugakov/interview-answers/blob/master/javascript/hostAndNativeObjects.md)
* [请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别 · Issue #264 · Rashomon511/LearningRecord](https://github.com/Rashomon511/LearningRecord/issues/264)
* [如何优雅的理解ECMAScript中的对象](https://zhuanlan.zhihu.com/p/27537508)
* [JavaScript 概觀 - JavaScript | MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Introduction#javascript_and_the_ecmascript_specification)
* [getify/You-Dont-Know-JS](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch4.md)
* [ECMAScript® 2022 Language Specification](https://tc39.es/ecma262/#sec-arguments-exotic-objects)