What is the difference between native objects and host objects?

Solution 1:

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, ...

Solution 2:

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.

Solution 3:

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.

Solution 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:

• Object
• Function
• Boolean
• Symbol
• Number
• Math
• ... (See full list on MDN web docs)

2. Host Objects Document Object Model Examples:

• Window
• Document
• History
• ... (See full list on DOM objects on MDN web docs)
• XMLHttpRequest (part of Web API)
• ... (See full list Web API on MDN web docs)

3. Host Objects in Node.js:

• http
• https
• fs
• url
• os
• ... (See full list on nodejs.org)

Solution 5:

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