Detailed explanation of JS objects
What is the object of js? What are the object types of js? What are the specific examples?
1. ECMA-262's definition of JS objects:
An unordered collection of attributes, each of which stores a primitive value, object, or function;
an object is an array of values in no particular order;
an object is a special data type that can contain multiple members.
Object members: Property, Method. (Object=Property+Method)
Property (Property): object name, property name. Encapsulate the data of the object, representing the value related to the object;
method (Method): object name, method name. Encapsulate the behavior of the object, indicating the behavior that the object can perform or the function that can be completed;
2. The object type of JS:
1. Internal objects: native objects/built-in objects
1) Native objects, objects provided by ECMAScript that need to be instantiated (new) before they can be used
Object object, Function object, Array object, Boolean object, Date object, Number object, String object, RegExp object, operator, Error, Set object, Map object, Proxy object
原生对象常用方法：
①、Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
②、Object.create() 方法用于创建一个新对象。被创建的对象会继承另一个对象的原型，在创建新对象时还可以指定一些属性。
③、Object.defineProperties() 直接在一个对象上定义新的属性或修改现有属性，并返回该对象。
④、Object.keys() 遍历对象，返回一个数组，包含了该对象自身的所有可枚举属性名
⑤、Object.getOwnPropertyNames() 遍历对象，返回一个数组，包含了该对象自身的可枚举和不可枚举属性名
⑥、Object.is() 方法用于判断两个值是否是相同的值
⑦、Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用
for...in循环遍历该对象时返回的顺序一致
⑧、Object.freeze()
方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。
此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。
2) Built-in objects, objects provided by ECMAScript that can be used without instantiation
Global (global object) and Math object
2. Host object
The host object is an object provided by the environment for executing JS scripts, and is an object provided by the browser, which is used to improve the ECMAScript execution environment. There were big compatibility problems in the early days, and some of the main objects are currently compatible with most browsers, which are divided into the following two categories: 1)
BOM objects (Browser Object Model)
Window、Navigator、Screen、History、Location
2) DOM object (Document Object Model)
Document、Anchor、Area、Base、Body、Button、Canvas、Event、Frame、Frameset、IFrame、Image、Link、Meta、Style、Form、Input Button、Input CheckBox、Input File、Input Hidden、Input Password、Input Radio、Input Reset、Input Submit、Input Text、Option、Select、Textare、Table、TableCell、TableRow
3. Custom objects
Objects defined by developers themselves. The method of custom object is as follows:
(1) Object literal method (create objects through JSON)
var obj1 = {
}；var obj2 = {
x:0，y:0}；var obj3 = {
name：‘Mary’，age：18}
Disadvantages: Using the same interface to create many objects will generate a lot of duplicate code.
(2) Factory mode.
function createPerson(name,age,actor){
var person = new Object();
person.name = "rose";
person.age = 18;
person.job = "actor";
person.sayName = function () {
console.log(this.name);
};
return person
}
console.log(p1 instanceof Object);//true
console.log(p1 instanceof createPerson);//false
①The factory mode is to put the statement of creating an object in a function, create a specific object by passing in parameters, and finally return the created object.
The function createPerson() can construct a Person object containing all necessary information according to the received parameters.
This function can be called an infinite number of times, and each time it returns an object with 2 properties and a method.
② Disadvantages: Although the factory pattern can create multiple similar objects, it cannot solve the problem of object identification, that is, how to know the type of an object.
(3) Create an Object instance
var person = new Object();
person.name = "rose";
person.age = 18;
person.job = "actor";
person.sayName = function () {
console.log(this.name);
};
console.log(person);
(4) Constructor mode
var obj1 = new Array；var obj2 = new Date();
① Disadvantages: The main problem with using constructors is that each method must be created on each instance.
②In ECMAScript, functions are objects, so every time a function is defined, an object is instantiated.
③ That is to say, the methods of multiple objects instantiated through the constructor are multiple different methods, but their internal codes and implemented functions are the same, which causes a certain waste of resources.
(5) Prototype mode
function Student() {
}
Person.prototype.name = "rose";
Person.prototype.age = 18;
Person.prototype.sayName = function () {
console.log(this.name);
};
var p = new Student();
console.log(p);
①In js, each function has a prototype attribute, which is a pointer to an object called a prototype object.
②Using the prototype mode allows all instances to share the properties and methods in the prototype object, that is, it is not necessary to define the information of the object instance in the constructor.
③ Disadvantage: The link of passing initialization parameters for the constructor is omitted, and as a result, all instances will obtain the same attribute value by default.
The biggest problem with the Prototype pattern is caused by the shared nature. All properties in the prototype are shared by many instances.
This kind of sharing is very suitable for functions. The problem is more pronounced for properties that contain reference types. Therefore, the prototype pattern is rarely used alone.
(6) Combined use of constructor mode and prototype mode
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayName = function () {
console.log(this.name);
};
var p = new Person("rose", 18);
console.log(p);
① The combination of constructor mode and prototype mode is the most common way to create custom types. When an object refers to its properties, it will search according to the prototype chain until the prototype of Object is found.
②Constructor mode is used to define instance properties, while prototype mode is used to define methods and shared properties.
③ As a result, each instance will have its own copy of the instance attributes, but at the same time share the reference to the method, saving memory to the greatest extent.
(7) Other modes
①Dynamic prototype mode: only when the constructor is called for the first time, the method is assigned to the corresponding property of the prototype object, and other examples are processed in the same way as the constructor mode
②Parasitic constructor mode: only encapsulate the code that creates the object, and then return the newly created object, still use the new operator to call
③ Safe constructor mode: There are no public properties, only private variables and methods, and some get/set methods to deal with private variables.