Consider the following question:

Why is num.attr assigned without an error? Why num. Attr is undefined?

const num = 42;
num.attr = 'str';
console.log(num.attr); // undefined
Copy the code

The first thing we need to know is what are the basic types in JavaScript?

// number, string, boolean, undefine, null, symbol, bigint
Copy the code

The above primitive values are created literally without methods and attributes, so we have to use a wrapper if we want to use them, and autoboxing is designed to solve this problem.

autoboxing

Autoboxing is when we manipulate basic js data types (undefined, except null), such as str.length, JavaScript wraps the original type into the corresponding object, which is linked to the relevant built-in <.prototype>, So we can call prototype methods on primitive types.

Back to the above problems: num. Attr when we give type of number assignment is not an error, because of carried out the following actions:

  • Create a temporary instance of type Number
  • Call the assignment method of this instance object
  • Unpack and destroy the instance

The code representation is:

const num = 42;
cosnt _num = New Number(42); // Create a temporary instance object of num
_num.attr = 'str'; // Add attribute attr to this object and assign 'STR'
_null = null; // Destroy the instance
Copy the code

Therefore, when we assign num. Attr, we are actually manipulating the temporary power object, so no error will be reported. When we visit num. Attr again, a new temporary instance object is generated, so the property value is undefined.

Manual packing

Manual boxing can be done with the new operator, for example:

new Number(123);
new String('str');
New Boolean(true);
Copy the code

However, be careful to use manual packing, which may have unexpected effects, such as:

const bool = new Boolean(false);
if (bool) {
    console.log('Execute true');
} else {
    console.log('Fasle executed');
}
// The result is true
Copy the code

In this case bool is false, but new Boolean returns true. You can solve this problem by:

.if (bool.valueOf())
...
Copy the code

Split open a case

Unboxing is mentioned above, but there is also automatic unboxing and manual unboxing. When automatic boxing is complete, the temporary instance object calls.valueof () or.toString() to return the original value. Of course, you can also manually call to achieve manual unpacking, as follows:

const numObj = new Number(1122);
const strObj = new String('str');
console.log(typeof numObj); / / 'object'
console.log(typeof strObj); / / 'object'

console.log(typeof numObj.valueOf()); // 'number'
console.log(typeof strObj.toString()); // 'string'

Copy the code

Write in the last

After the preparation of slowly summarize and consolidate their knowledge, we are also welcome to study together, if there is not allowed to lack of place, welcome the boss to correct. Of course, if the above article is helpful to you, please also click on the support, thank you 🙏.

reference

# JavaScript Boxing Wrappers