What are the two categories of JavaScript objects?

There are two types of objects in JavaScript: 1. Host Objects, which are objects provided by the JavaScript host environment, and their behavior is completely determined by the host environment; 2. Built-in Objects, is an object provided by the JavaScript language.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In JavaScript, objects can be divided into two types: host objects and built-in objects.

• Host Objects: Objects provided by the JavaScript host environment. Their behavior is completely determined by the host environment.

• Built-in Objects: Objects provided by the JavaScript language

  • Intrinsic Objects: Specified by the standard, An object instance that is automatically created as the JavaScript runtime is created.

  • Native Objects: Objects that can be created by users through built-in constructors such as Array and RegExp or special syntax.

  • Ordinary Objects: Objects created by the {} syntax, Object constructor or class keyword definition class, which can be inherited by the prototype.

Host Object

JavaScript host objects are all kinds of weird, but the most familiar one for the front-end is undoubtedly the host in the browser environment. In the browser environment, we all know that the global object is window, and there are many properties on window, such as document. In fact, part of the properties on the global object window come from the JavaScript language and part from the browser environment. Global object properties are specified in the JavaScript standard, and other properties of the Window object are specified in various W3C standards. Host objects are also divided into two types: inherent and user-creatable. For example, document.createElement can create some DOM objects. The host will also provide some constructors. For example, we can use new Image to create img elements.

Built-in objects·Intrinsic objects

Intrinsic objects are specified by the standard and are created with the JavaScript runtime Automatically created object instance. Intrinsic objects are created before any JavaScript code is executed, and they often act like base libraries. The "class" we mentioned earlier is actually a type of inherent object. The ECMA standard provides us with a list of intrinsic objects, which contains 150 intrinsic objects.

Built-in objects·Native objects

We call objects in JavaScript that can be created through the constructor of the language itself called native objects. In the JavaScript standard, more than 30 constructors are provided. According to my understanding and according to different application scenarios, I divide native objects into the following categories.

Through these constructors, we can use the new operation to create new objects, so we call these objects native objects. Almost all of these constructor capabilities cannot be implemented in pure JavaScript code, and they cannot be inherited using class/extend syntax. Most of the objects created by these constructors use private fields, for example:

Error: [[ErrorData]]
Boolean: [[BooleanData]]
Number: [[NumberData]]
Date: [[DateValue]]
RegExp: [[RegExpMatcher]]
Symbol: [[SymbolData]]
Map: [[MapData]]

These fields make the prototypal inheritance method unable to work properly, so we can think that all these native objects are for specific capabilities or performance, and Designed "privileged objects".

Use objects to simulate functions and constructors: function objects and constructor objects

I introduced the general classification of objects earlier. In JavaScript, there is a different perspective on looking at objects. This is to use objects to simulate functions and constructors. In fact, JavaScript reserves a private field mechanism for this type of object and stipulates the concepts of abstract function objects and constructor objects.

The definition of a function object is: an object with [[call]] private fields, and the definition of a constructor object is: an object with private fields [[construct]].

JavaScript uses the design of object simulation functions to replace functions in general programming languages. They can be called and pass parameters like functions in other languages. Any host that provides "an object with [[call]] private fields" can be supported by the JavaScript function call syntax.

We can say that any object only needs to implement [[call]], it is a function object and can be called as a function. And if it implements [[construct]], it is a constructor object and can be called as a constructor.

For programmers who provide a running environment for JavaScript, the host objects and built-in objects (such as Symbol functions) we mentioned above can simulate functions and constructors as long as the fields comply.

Of course, the function created by the user using the function keyword must be both a function and a constructor. However, the behavioral effects they exhibit are not the same.

For host and built-in objects, their implementations of [[call]] (called as a function) and [[construct]] (called as a constructor) are not always consistent.

对于用户使用 function 语法或者 Function 构造器创建的对象来说，[[call]]和[[construct]]行为总是相似的，它们执行同一段代码。我们看一下示例。

function f(){
    return 1;
}
var v = f(); //把f作为函数调用
var o = new f(); //把f作为构造器调用

这样的规则造成了个有趣的现象，如果我们的构造器返回了一个新的对象，那么 new 创建的新对象就变成了一个构造函数之外完全无法访问的对象，这一定程度上可以实现“私有”。

function cls(){
    this.a = 100;
    return {
        getValue:() => this.a
    }
}
var o = new cls;
o.getValue(); //100
//a在外面永远无法访问到

特殊行为的对象

除了上面介绍的对象之外，在固有对象和原生对象中，有一些对象的行为跟正常对象有很大区别。

它们常见的下标运算（就是使用中括号或者点来做属性访问）或者设置原型跟普通对象不同，这里我简单总结一下。

• Array：Array 的 length 属性根据最大的下标自动发生变化。

• Object.prototype：作为所有正常对象的默认原型，不能再给它设置原型了。

• String：为了支持下标运算，String 的正整数属性访问会去字符串里查找。

• Arguments：arguments 的非负整数型下标属性跟对应的变量联动。

• 模块的 namespace 对象：特殊的地方非常多，跟一般对象完全不一样，尽量只用于 import 吧。

• 类型数组和数组缓冲区：跟内存块相关联，下标运算比较特殊。

• bind 后的 function：跟原来的函数相关联。

【相关推荐：javascript视频教程】

The above is the detailed content of What are the two categories of JavaScript objects?. For more information, please follow other related articles on the PHP Chinese website!