108

I don't understand the difference between native objects and host objects in JavaScript. Does the latter simply refer to non-primitive function objects that were created by a custom constructor (e.g., var bird1 = new Bird();)?

ggorlen
  • 44,755
  • 7
  • 76
  • 106
ppecher
  • 1,978
  • 4
  • 19
  • 30
  • 4
    Native objects are defined in the ECMAScript specification, host objects are not. – Šime Vidas Sep 30 '11 at 18:08
  • 7
    A DOM element -- say, `new Image()` -- is a host object, for instance. –  Sep 30 '11 at 18:09
  • @ŠimeVidas: Is there some reason you've left a comment that contradicts your answer? – user113716 Sep 30 '11 at 18:21
  • @Ӫ_._Ӫ That's my thing now `:)` – Šime Vidas Sep 30 '11 at 18:26
  • @Ӫ_._Ӫ But I don't see a contradiction... – Šime Vidas Sep 30 '11 at 18:31
  • 1
    @ŠimeVidas: Your comment states that *host objects are not defined in the ECMAScript specification*. Your answer states *"The definitions for both are in the ECMAScript specfication"*. – user113716 Sep 30 '11 at 18:32
  • @Ӫ_._Ӫ I've changed my answer. I think it's acceptable now... – Šime Vidas Sep 30 '11 at 18:40
  • Living spec: [**standard**](https://tc39.es/ecma262/#sec-standard-object) — _“object whose semantics are defined by [the spec]”_; [**built-in**](https://tc39.es/ecma262/#sec-built-in-object) — _“object specified and supplied by an [ES] implementation”_ (“Standard built-in objects” are essentially “standard objects”); **native** — used for e.g. [functions](https://tc39.es/ecma262/#prod-NativeFunction) and errors; [**host**](https://tc39.es/ecma262/#sec-overview) — _“Each Web browser and server that supports [ES] supplies its own host environment, completing the […] execution environment.”_. – Sebastian Simon Oct 28 '19 at 07:30
  • I see the four terms in this hierarchy: **standard** objects form the _basis_ of JavaScript; **host** objects are “on top” of that basis and depend on the specific environment or implementation; together they form the **built-in** objects which provide the context for user code. **built-in** and **native** appear to be synonyms. – Sebastian Simon Oct 29 '19 at 08:00

8 Answers8

151

Both terms are defined in the ECMAScript specification:

native object

object in an ECMAScript implementation whose semantics are fully defined by this specification rather than by the host environment.

NOTE Standard native objects are defined in this specification. Some native objects are built-in; others may be constructed during the course of execution of an ECMAScript program.

Source: http://es5.github.com/#x4.3.6

host object

object supplied by the host environment to complete the execution environment of ECMAScript.

NOTE Any object that is not native is a host object.

Source: http://es5.github.com/#x4.3.8

A few examples:

Native objects: Object (constructor), Date, Math, parseInt, eval, string methods like indexOf and replace, array methods, ...

Host objects (assuming browser environment): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll, ...

Community
  • 1
  • 1
Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • 10
    give him some examples too, native object: Array, String .., host object: window ... – Poelinca Dorin Sep 30 '11 at 18:16
  • 2
    what about a custom custructor? eg, the bird example in my post – ppecher Sep 30 '11 at 18:20
  • @ppecher Is the `Bird` object defined in the ECMAScript spec? No? Then it's a host object `:P` – Šime Vidas Sep 30 '11 at 18:21
  • 2
    @ŠimeVidas: *"Then it's a host object."* That's not correct. See the definition of `host object` described [in this answer](http://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects/7614380#7614380). – user113716 Sep 30 '11 at 18:23
  • But, typeof bird1 //->object...and object is defined by the spec – ppecher Sep 30 '11 at 18:24
  • @ppecher Well, the Object type is defined in the spec (it's one of the 6 language types), but the specific objects `Bird` and `bird1` are not. – Šime Vidas Sep 30 '11 at 18:33
  • @Šime Vidas: I'm confused now. Did Ӫ_._Ӫ not disagree with your assessment of bird1 being a host object? Thanks for the answer. – ppecher Sep 30 '11 at 18:35
  • 1
    ŠimeVidas: But the spec states *'The value of the [[Class]] internal property of a **host object** may be any String value **except** one of "Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", **"Object"**, "RegExp", and "String".'* The internal [[Class]] property of your Bird object will be `'Object'`, or presented via `Object.prototype.toString` as `'[object Object]'`. – user113716 Sep 30 '11 at 18:38
  • @Ӫ_._Ӫ That's new in ES5. I wonder if the browser vendors know about this. – Šime Vidas Sep 30 '11 at 18:53
  • @ppecher It's a host object. The definition of the term "host object" is not as elaborate and unambiguous as I would like it to be, but since it's certainly not a native object, it must be a host object. – Šime Vidas Sep 30 '11 at 19:01
  • Yes, that wording is new, but I'm certain that the *"NOTE Any object that is not native is a host object."* must be referring only to types provided by the environment. Otherwise any object you create, whether via a constructor, a literal, or `Object.create` would need to gain some other internal [[Class]] property, making the internal property rather pointless. ...But I'm heading out of town, so I'll have to take this up later. :) – user113716 Sep 30 '11 at 19:02
  • 2
    @ŠimeVidas, I disagree, if `Bird` is a user defined function, its semantics are *"fully defined"* by the ES specification (how function objects work, how they are created, executed, used with the `new` operator, etc, etc, etc) it's a *native object*... I might drop an answer... – Christian C. Salvadó Sep 30 '11 at 19:05
  • @ppecher My last comment is possibly incorrect, ergo, `Bird` and `bird1` could be native objects. I'm not sure. – Šime Vidas Sep 30 '11 at 19:10
  • It is worth noting that host objects may be native objects, and in fact, most of the time, they are. All the examples in this answer are native objects. Non-native objects are rare, and this notion has mainly been introduced to take old IE weirdos into account, [for example](http://dhtmlkitchen.com/exotic-objects/) `typeof document.all == "undefined"; /*true*/ document.all.myElementId; // object` – user123444555621 Sep 08 '14 at 05:25
  • parseInt, eval, setTimeout, getElementsByTagName, etc. are "technically" objects, in that that are functions and in JavaScript, functions are objects. But, for this discussion, no they are not objects, much less native ones. They are methods of other objects. getElementsByTagName, for example, is a method of the document object and the document object is defined as part of the Document Object Model, not a native object of JavaScript. – Scott Marcus Oct 18 '14 at 17:25
  • @ScottMarcus Modern browsers are turning more and more of the browser objects into standard JavaScript objects. E.g. `Element.prototype.getElementsByTagName instanceof Object` is `true` in Chrome, Firefox, IE11,… – Šime Vidas Oct 18 '14 at 20:12
  • @Šime Vidas Browsers cannot turn anything into native JavaScript objects. Only those interfaces that are defined in the ECMAScript standard denote native objects. The fact that the JS engine reports that getElementsByTagName is an Object doesn't mean it's a native object. getElementsByTagName is a function and functions are objects. String, Date, Boolean, Number, JSON, null, Function, Object are native objects. BOM objects are not. – Scott Marcus Oct 19 '14 at 20:48
  • @Šime Vidas Please see my comment below about native objects being able to be used in any ECMAScript compliant host environment. getElementsByTagName is meaningless outside of an (X)HTML parsing environment, but there are environments where JS runs without elements to be gotten. – Scott Marcus Oct 19 '14 at 20:51
  • @ScottMarcus When I do `var myObject = Object.create(Object.prototype)`, `myObject` is a standard JS object, agreed? – Šime Vidas Oct 20 '14 at 14:07
  • @Šime Vidas This isn't the way to know/understand what a native object is. There is only one way to know what is and isn't a native object and that is not to run code and examine the result, it is to know what the Ecma standard says are native objects. The very definition of "native" in this context means available without doing anything special to make them available. JavaScript defines the following as native: Object, JSON, Array, Date, Boolean, Number, String, Function, MATH, null and undefined. That's it, period. Any other objects are provided by the host. – Scott Marcus Oct 21 '14 at 21:46
  • @ScottMarcus That's not what the spec says. The objects that you have listed are the "built-in native objects", but the [NOTE](http://people.mozilla.org/~jorendorff/es5.html#sec-4.3.6) in the spec states that a native object can be created during the execution of a program. When we create objects via `Object.create()` or object literal notation, those object are native objects. – Šime Vidas Oct 22 '14 at 01:19
  • @Šime Vidas Just because you use Object.create() or object literal does not automatically make the resulting object native. If that returned object has an interface that is not fully defined by the standard it is NOT a native object. So, var o = new Object(); does create a native Object type of object, but once I continue with that and add o.foo = function(){// code here}, o is no longer a native object because the standard does not fully describe any object with a foo property. Thus, you can make a native object via code, but only if the code returns an object defined in the standard. – Scott Marcus Oct 23 '14 at 15:43
  • @Šime Vidas Also, to be clear, the spec says: "Some native objects are built-in; others *may* be constructed during the course of execution of an ECMAScript program." This does not mean that all constructed objects are native. – Scott Marcus Oct 23 '14 at 15:44
36

It is more clear if we distinguish between three kinds of objects:

Built-in objects: String, Math, RegExp, Object, Function etc. - core predefined objects always available in JavaScript. Defined in the ECMAScript spec.

Host objects: objects like window, XmlHttpRequest, DOM nodes and so on, which is provided by the browser environment. They are distinct from the built-in objects because not all environment will have the same host objects. If JavaScript runs outside of the browser, for example as server side scripting language like in Node.js, different host objects will be available.

User objects: objects defined in JavaScript code. So 'Bird' in your example would be a user object.

The JavaScript spec groups built-in objects and user objects together as native objects. This is an unorthodox use of the term "native", since user objects are obviously implemented in JavaScript while the built-ins is most likely implemented in a different language under the hood, just as the host objects would be. But from the perspective of the JavaScript spec, both builtins and user objects are native to JavaScript because they are defined in the JavaScript spec, while host objects are not.

JacquesB
  • 41,662
  • 13
  • 71
  • 86
  • Native objects refer to those objects that are created by javascript implementation (engine). Difference between built-in and other native objects (user objects) is that former objects are present since the start of the javascript program complying with relevant ECMA rules. Since ECMA6 (), it does not use above terminology to classify objects. Refer to my answer below. – jaaw Mar 20 '16 at 00:17
17

Here's my understanding of the spec.

This:

var bird = new Bird();

...results in a native Object that simply happened to be created using the new operator.

Native objects have an internal [[Class]] property of one of the following:

"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", and "String".

For your bird1 it will be:

"Object"

Just like if you create a function:

function my_func() {
    // ...
}

...my_func isn't defined in ECMAScript, but it is still a native object with the internal [[Class]]:

"Function"

A host object is an object provided by the environment in order to serve a specific purpose to that environment not defined in by the specification.

For example:

var divs = document.getElementsByTagName('div')

The object referenced by divs is a NodeList, which is integrated into the environment in such a manner that it feels like a regular JavaScript object, yet it isn't defined anywhere by the specification.

Its internal [[Class]] property is:

"NodeList"

This provides implementation designers some flexibility in suiting the implementation to the specific need of the environment.

There are requirements of host objects that are defined throughout the spec.

user113716
  • 318,772
  • 63
  • 451
  • 440
  • 2
    +1, I agree with you, `bird` and `Bird` are *native objects*, they are a user defined function (`Bird`), and an object (`bird`) created by the usage of the function as a constructor, all the semantics of this are defined on the spec. About host objects, don't rely too much on the `[[Class]]` internal property, for example `window.alert` has `"Function"` as the value of its `[[Class]]` property almost all implementations, on IE it has `"Object"`, and it is still a host object... – Christian C. Salvadó Sep 30 '11 at 19:17
  • Thanks @CMS. Yeah, I didn't mean to place too much emphasis on using the internal `[[Class]]`. Rather just to use it as a tangible glimpse into how the implementors have interpreted the different types of objects. So then `window.alert` having an internal `[[Class]]` of `"Function"` would seem to be a violation of ES 5? – user113716 Oct 02 '11 at 23:10
  • I'm trying to see this ain action, but if I get the typeof that div, `divs/NodeList`, I get an `object`. I'm guessing I don't understand this yet, but wouldn't that make it a native object? – Mark B Aug 29 '14 at 17:18
  • [This is helpful](http://programmerinnervoice.wordpress.com/2013/07/22/host-objects-vs-native-objects/). Getting everything in `window` shows all the host objects – Mark B Aug 29 '14 at 17:25
  • Bird is not a native object because it's interface is not fully described in the ECMASCript standard. It's really that simple. Object is native and String is native, but user-defined or host-defined objects are not native. – Scott Marcus Oct 18 '14 at 17:36
4

In addition to the other answers regarding Host Objects.

Host objects are specific to a environment. So next to the browsers' host objects, there are also specific objects in nodejs.

For the sake of the example, first starting with the Standard objects as defined in Javascript. Then the common objects for the Browser/DOM. Node has it's own Objects.

  1. Standard Javascript built-in object examples:
  1. Host Objects Document Object Model Examples:
  1. Host Objects in Node.js:
Remi
  • 4,663
  • 11
  • 49
  • 84
3

Could not see a convincing answer to the question whether var bird1 = new Bird(); is a native or host object. Assuming Bird is a user defined function, a native non-built-in object will be created according to http://es5.github.io/#x13.2 by the javascript implementation. In contrast, native built-in objects will be present since the start of a javascript program (such as Object and many others). A difference between a native object and a host object is that former is created by the javascript implementation and the latter is provided by the host environment. As a result host object internal [[class]] property can be different from those used by built-in objects (i.e. "Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", and "String").

Also, worthwhile noting that ECMA6 http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf does not use the terminology native and host objects any more. Instead, it defines below object types, with more clear explanations of their intended behaviour.

4.3.6 ordinary object

object that has the default behaviour for the essential internal methods that must be supported by all objects

4.3.7 exotic object

object that does not have the default behaviour for one or more of the essential internal methods that must be supported by all objects NOTE Any object that is not an ordinary object is an exotic object.

4.3.8 standard object

object whose semantics are defined by this specification

4.3.9 built-in object

object specified and supplied by an ECMAScript implementation

jaaw
  • 91
  • 5
1

Considering three objects: Host, Native, Custom.

Host Objects are created by the environment and are environment specific. Best known environment would be a web-browser but could be another platform. The host objects created in web-browser could be the window object or the document. Typically a browser uses an API to create Host Objects to reflect the Document Object Model into JavaScript. (Webbrowser have different JavaScript Engines that do this) A host object is created automatically the moment the page renders in a browser.

A Native Object is created by the developer using predefined classes of JavaScript. Native Objects are in your written script.

Than, a Custom Object is made by the developer from a custom (not predefined, or partially predefined) class.

Khamaseen
  • 326
  • 3
  • 9
0

Native objects are objects that adhere to the specs, i.e. "standard objects".

Host objects are objects that the browser (or other runtime environment like Node) provides.

Most host objects are native objects, and whenever you instantiate something using new, you can be 99.99% sure that it is a native object, unless you mess around with weird host objects.

This notion has been introduced due to the presence of very bizarre objects in IE(and other old browsers?). For example:

typeof document.all == "undefined"; // true
document.all.myElementId; // object

When seeing this, everyone would agree that document.all is clearly "non-standard", and thus a non-native host object.

So why not call native objects standard objects in the first place? Simple: after all, the Standard(!) document talks about non-native objects too, and calling them non-standard would lead to a paradox.

Again:

  • native == "standard"
  • host == provided by the browser or Node or …
  • most host objects are native, and all non-host objects are native too
user123444555621
  • 148,182
  • 27
  • 114
  • 126
  • You've gone off the rails a bit there. "Most host objects are native" is incorrect. In fact, by definition ALL host objects are NOT native. Native means "standard" for sure, but it means standard in the language specification, not standard in the sense of out of the ordinary. JavaScript (ECMASCript) defines several interfaces/API's that are implemented by browsers and other hosts, such as: String, Date, MATH, Boolean, Number, JSON and XmlHTTP. These objects are available because the host implements an ECMAScript compliant engine and fulfills the ECMA standard. – Scott Marcus Oct 18 '14 at 17:34
0

This may be overkill, but for simplicity a native object is one that exist and is usable in any environment that implements an ECMAScript compliant engine. This is usually (but not always) a browser.

So, your Internet Explorer or your Google Chrome, doesn't make the String object available to you, for example. The reason you can use the String object is because it is "native" (built-in) to the JavaScript language itself.

However, if you'd like to create a pop-up window, you'll need to use the window object. The window object is provided by the browser software itself, so it is not native to JavaScript, but it is part of the "Browser Object Model" or the BOM.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71