在前端开发中，我们经常听到“原生对象”和“宿主对象”的概念。虽然它们都是JavaScript对象，但它们之间有很大的区别。
原生对象
原生对象是指由ECMAScript规范定义的对象，例如Object、Array、String等。这些对象在任何JavaScript环境中都是可用的，包括浏览器和Node.js环境。
原生对象通常具有一些内置的方法和属性，这些方法和属性可以直接调用，无需引入其他库或框架。例如，我们可以使用Array对象的push()方法将一个元素添加到数组末尾：
const arr = [1, 2, 3]; arr.push(4); console.log(arr); // [1, 2, 3, 4]
宿主对象
宿主对象是指由JavaScript运行环境提供的对象，例如浏览器提供的window、document对象，以及Node.js提供的global对象等。
与原生对象不同，宿主对象的特性取决于JavaScript运行环境，因此不同的宿主环境可能提供不同的宿主对象。例如，在浏览器环境中，我们可以使用window对象的alert()方法显示弹窗：
window.alert('Hello World');而在Node.js环境中，由于没有浏览器窗口，我们不能使用alert()方法。相反，我们可以使用console对象的log()方法记录日志：
console.log('Hello World');需要注意的是，尽管宿主对象具有不同的特性，但它们仍然遵循ECMAScript规范中的基本对象模型，并且可以使用原生对象的一些方法和属性。例如，在浏览器环境中，我们可以使用document对象的querySelector()方法选择DOM元素：
const div = document.querySelector('div');
div.classList.add('red');在这个例子中，我们使用了原生对象的classList属性和add()方法来操作DOM元素的class属性。
总结
- 原生对象是由ECMAScript规范定义的对象，如Object、Array、String等。
- 宿主对象是由JavaScript运行环境提供的对象，如window、document、global等。
- 宿主对象的特性取决于JavaScript运行环境，因此在不同的环境中可能具有不同的特性。
- 尽管宿主对象具有不同的特性，但它们仍然遵循ECMAScript规范中的基本对象模型，并且可以使用原生对象的一些方法和属性。
理解原生对象和宿主对象之间的区别对于编写高质量的JavaScript代码非常重要。在编写代码时，应该优先考虑使用原生对象，只有在必要时才使用宿主对象。例如，在操作DOM时，应该尽可能使用原生的DOM API，避免直接操作宿主对象（如window、document），以提高代码的可移植性和可维护性。
最后，让我们再来看一个例子。假设我们在浏览器中编写以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
-------
------
--------
----- --- - ------------------------------
--------------- - ------ -------
-------------------------------
---------
-------
-------这个例子中，我们创建了一个新的div元素，并将其添加到文档中。虽然我们使用了宿主对象document，但我们仍然遵循了原生对象模型，通过createElement()方法创建了一个新的原生对象。这样做既保证了代码的可移植性，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12124
