The original intention of this series of articles is to “let each front-end engineer master the high frequency knowledge, for the work of power”. This is the front end of the fourth cut, I hope friends pay attention to the public number “kite”, armed with knowledge of their minds

4.1 background

If you’ve noticed, strings, numbers, and booleans can all call properties and methods, for example:

const str = '123';
console.log(typeof(str)); // string
console.log(str.toString()); / / 123
const num = 123; 
console.log(typeof(num)); // number
console.log(num.toString()); / / 123
const bool = true;
console.log(typeof(bool)); // boolean
console.log(bool.toString()); // true
Copy the code

This is a strange thing to see. It goes against our common belief that there are no properties or methods on basic types, and that’s when the main character wraps the object.

4.2 Packaging Objects

JS values, Boolean, string variables, under certain conditions, can also automatically become objects, this is the original type of the wrapper object. A wrapper object is a special reference type that differs from a reference type primarily in its lifecycle.

  1. Normal reference types, when created with new, are kept in memory until the execution flow leaves the current scope;
  2. An object of the wrapper type exists only for the moment of execution of that line of code and is then destroyed immediately. (Also means that you cannot add properties and methods to base types at run time.)

4.3 Background execution process of packing objects

How does the String, Number, and Boolean primitives perform in the background when calling properties and methods? In fact, the whole process can be simplified into three steps:

  1. Create an instance of an object type, such as a String;
  2. Call a specific method on the instance object;
  3. Destroy the instance.

Take a string as an example to illustrate the flow:

const str = 'abc';
const strNew = str.substring(0.2);
Copy the code

Substring (0, 2) executes the following three steps stealthily:

let strObj = new String(str);
const strNew = strObj.substring(0.2);
strObj = null;
Copy the code

4.4 extensions

  1. Is the wrapper object equal to the value of the same primitive type?

Is not equal. Because wrapper objects are reference types, primitive types are primitive types; The main purpose of wrapping objects is, first, to make JavaScript objects cover all values, and second, to make it easy to call some methods on values of primitive types.

  1. How do I add properties and methods to primitive types?

Add under the stereotype of the basic wrapper object, each object has a stereotype.

  1. Does the same string call the same method twice wrap the same object?

Is not equal. After the call, the wrapped object instance is destroyed automatically. This means that the next time you call a string property, you’re actually calling a newly generated object, not the same object that was generated the previous time, which explains why you can’t just add properties and methods to strings, numbers, and Booleans.

1. If you think this article is good, share and like it so that more people can see it

2. Pay attention to the public number of kite, and the number of the Lord together to kill the front hundred.