Transforming from JS library users to JS developers -- the first JavaScript Object

This article is a reading note of Javascript Elightment. I hope to share it with kids shoes who are interested in switching from a jS library to a js developer.

Article 1 Javascript ObjectCreate object

In Js, everything is an object or can behave like an object.

Remember: an object is actually a container of an attribute (name and corresponding value.

The method is actually a property of an object. It contains the function () object used to operate the object. If there is no method, the object cannot do anything except save static attributes.

Create an Object: var myObject = new Object ();

The code above resolves: we use an empty object pointing to the object () constructor to create a new object.

You can regard constructors as templates for producing predefined objects.

We can also create an object constructor to produce a large number of objects we need.

For example:

VaR person = function (living, age, gender ){

This. Living = living;

This. Age = age;

This. Gender = gender;

This. getgender = function () {return this. Gender ;};

};

VaR Cody = new person (true, 33, 'male ');

Js constructor build and return object instance

A constructor is used to create a batch of objects that share specific attributes and methods.

A constructor is a function normally. However, after being called by new, this function is specially treated because it needs to set the attribute value of the object being created, then, a created object is returned, which is recognized as an instance constructed by the constructor.

Js Native/built-in Object (Native/Built-In Object) constructor

JS's nine native objects:

• Number ()

• String ()

• Boolean ()

• Object ()

• Array ()

• Function ()

• Date ()

• Regexp ()

• Error ()

Custom Constructor

The first letter of the User-Defined constructor name should be capitalized.

You can save the new Keyword when creating an object, but you must explicitly return an object when defining the constructor.

For example:

Var myFunction = function () {return {prop: val }};

The above practice avoids prototype inheritance.

 

Instantiate the constructor with new

The new operation tells the js interpreter that we want to create an instance of the corresponding constructor.

Math ()

Math is different from other built-in constructors. It is a static object and is not a constructor. Therefore, you cannot use new to build an instance, however, you can use the created instance (such as Math. PI ). In fact, Math is just an object that js uses to store math methods.

Note: Math is a static object (a container containing other methods) and cannot be operated using new.

 

Create a Shorthand/Literal value (Shorthand/Literal Values) using Constructors)

Js provides a "literal value" shortcut to create most built-in object values, so we don't need to use new operations every time.

In most cases, the nominal value method is the same as the new operation, except for Number (), String (), and Boolean ().

For example:

Var myObject = new Object ();
Var myObjectLiteral = {};

Var myNumber = new Number (23 );

Var myNumberLiteral = 23;

Note: creating a string, number, and boolean object with a literal value is not a real complex object at the beginning, but a simple original data type, only when this object is used as an object (calling methods in the constructor to obtain attributes) Will js create an encapsulated object for this literal value, this literal value is allowed to operate like an object. After the methods in the constructor are called, js will discard this object and the literal value is restored to a simple data type. (This explains why "everything in js is an object or can be operated like an object ").

Original Value (Primitive Values) null, undefined, "string", 10, true, false are not objects

The original values are not objects, but simple values.

How to store and copy Original values in js

The storage and operation of the original values are limited to the numerical surface and cannot be restored.

Var myString = 'foo' // create a primitive string object

Var myStringCopy = myString; // copy its value into a new variable

Var myString = null; // manipulate the value stored in the myString variable

/* The original value from myString was copied to myStringCopy. This is confirmed

By updating the value of myString then checking the value of myStringCopy */

Console. log (myString, myStringCopy); // logs 'null foo'

Comparison of original values

If the object is not created through new, the type of the original value is still the original type. If you use new to create an object, even if the value is the same, the type is no longer the original type, but the object.

Var price1 = 10;
Var price2 = 10;
Var price3 = new Number ('10'); // a complex numeric object because new was used
Var price4 = price3;
Console. log (price1 === price2); // logs true
/* Logs false because price3 contains a complex number object and price 1 is
A primitive value */
Console. log (price1 === price3 );
// Logs true because complex values are equal by reference, not value
Console. log (price4 === price3 );
// What if we update the price4 variable to contain a primitive value?
Price4 = 10;
Console. log (price4 === price3);/* logs false: price4 is now primitive
Rather than complex */

Complex Values)

Built-in Object (), Array (), Function (), Date (), Error (), RegExp () are compound values, because they contain one or more original values and compound values.

How to store and copy composite values in js

After a new object is created, the object is stored in an address in the memory. When you call this object, you use the object name to obtain the value in the memory address.

Copying an object is not just copying a value on the numeric surface like the original value. Copying an object's reference value/address value is not a real value, this means that the object is not completely copied. Therefore, the copied objects and source objects actually point to the same address value, that is, they operate on the same object.

Var myObject = {};

Var copyOfMyObject = myObject;/* Not copied by value,

Just the reference is copied */

MyObject. foo = 'bar'; // manipulate the value stored in myObject

/* Now if we log myObject and copyOfMyObject, they will have a foo property

Because they reference the same object .*/

Console. log (myObject, copyOfMyObject);/* logs 'object {foo = "bar"} Object {foo = "bar "}'*/

 

Note: String (), Number (), and Boolean () are created by new or secretly converted to an object. These values are stored and copied on a simple numeric surface. Therefore, even if the original values can perform operations similar to objects, their storage replication methods will not be the same as those of objects.

If you want to completely copy an object, you must obtain the value from the source object and inject it into the new object.

Comparison of compound values

Only when two objects point to the same object, that is, the same storage address, the two objects are equal. Otherwise, even if the two objects look exactly the same, they do not.

Var objectFoo = {same: 'same '};

Var objectBar = {same: 'same '};

/* Logs false, JS does not care that they are identical

And of the same object type */

Console. Log (objectfoo === objectbar );

// How complex objects are measured for Equality

VaR objecta = {FOO: 'bar '};

VaR objectb = objecta;

Console. Log (ObjectA = objectB);/* Logs true because they reference

The same object */

Dynamic attributes of composite objects

It is known that when a variable points to an existing object, it does not just copy the object, but just copies the object address. Therefore, an object can have many reference objects that all point to the source object of the same address.

Therefore, as long as any attribute of these objects is modified, all other objects will be modified together.

Typeof operation for original and compound values

The value type must be determined based on the environment. As shown in the following figure, except for the objects created using the new operation, the values created by other shortcuts are of the original type.

VaR mynull = NULL;

VaR myundefined = undefined;

VaR primitivestring1 = "string ";

VaR primitivestring2 = string ('string ');

Console. Log (TypeofMynull); // logs object? What? Be aware...

Console. Log (TypeofMyUndefined); // logs undefined

Console. log (TypeofPrimitiveString1,TypeofPrimitiveString2); // logs string

// Complex Values

Var myNumber = new Number (23 );

Var myString = new String ('male ');

Var myBoolean = new Boolean (false );

Console. log (TypeofMyNumber); // logs object

Console. log (TypeofMyString); // logs object

Console. log (TypeofMyBoolean); // logs object

Object Variability

Because an object has dynamic attributes, It is variable, even the built-in js object. This means that you can change most objects in js anytime, anywhere, change the attributes of its original configuration, add attribute methods, and so on (in fact this approach is not recommended ).

All constructor instances have the constructor attributes pointing to their constructor.

Each instance has a constructor attribute pointing to the constructor that constructs the instance.

Even the original value also has the constructor attribute, but the constructed value is not an object and is still an original value.

Var myNumber = new Number ('23 ');

Var myNumberL = 23; // literal shorthand

Var myString = new String ('male ');

Var myStringL = 'male'; // literal shorthand

Console. log (// all of these return true

MyNumber. constructor === Number,

MyNumberL. constructor === Number,

MyString. constructor === String,

MyStringL. constructor === String );

If you want the User-Defined Object constructor to have a specific name, you must first name it. For example

Var Person = function Person (){};

Each object is an instance of a specific constructor.

The instranceof () function can be used to determine whether an object is an instance of a constructor.

Note: 1. Each Object is an instance of the Object () constructor.

2. If the original value is not new, false will be returned when determining the constructor instance. (e.g., 'foo' instanceof

String // returns false ).

Instances constructed by constructors can have their own attributes.

In Js, objects can be expanded at any time. However, the original value cannot be extended.

Var myString = new String ();

Var myNumber = new Number ();

MyString. prop = 'test ';

MyNumber. prop = 'test ';

Console. log (myString. prop, myNumber. prop); // logs 'test', 'test'

 

// Be aware: instance properties do not work with primitive/literal values

Var myString = 'string ';

Var myNumber = 1;

MyString. prop = true;

MyNumber. prop = true;

// Logs undefined, undefined

Console. log (myString. prop, myNumber. prop );

Note: In addition to the constructor attributes, instances also inherit the attributes from the prototype chain. As mentioned above, instances can also have their own extended attributes.

Semantic differences between "Javascript Objects" and "Object () Objects"

Javascript Objects refers to all Objects in Javascript. Object () Objects refers to the Object constructed by the Object constructor and named Objects.

 

"The second article uses objects and attributes" will be updated later.

This article is original. For more information, see the link. Thank you.