# 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)