A brief discussion on JS packaging objects

Overview

definition

Objects are the main data type in JavaScript. Under certain conditions, the three primitive types of values ​​- numbers, strings, and Boolean values ​​- will also be automatically converted into objects, which are "wrapper objects" of the primitive types.

The so-called "wrapper objects" refer to the three native objects Number, String, and Boolean that correspond to numerical values, strings, and Boolean values ​​respectively. These three native objects can convert (package) primitive values ​​into objects.

var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);

typeof v1 // "object"
typeof v2 // "object"
typeof v3 // "object"

v1 === 123 // false
v2 === 'abc' // false
v3 === true // false

In the above code, three corresponding wrapper objects are generated based on the values ​​of the original type. As you can see, v1, v2, and v3 are all objects and are not equal to the corresponding simple type values.

The purpose of designing wrapper objects is, first, to make the "object" type cover all values ​​of JavaScript, so that the entire language has a common data model, and second, to make it possible for values ​​of primitive types to call their own methods.

The three native objects, Number, String, and Boolean, if not called as constructors (that is, without new when calling), but as ordinary functions, are often used to convert values ​​of any type into numbers, strings, and Boolean values.

// Convert string to value Number('123') // 123

// Convert the value to a string String(123) // "123"

// Convert the value to Boolean value Boolean(123) // true

To summarize, when these three objects are used as constructors (with new), they can convert primitive values ​​into objects; when used as ordinary functions (without new), they can convert values ​​of any type into primitive values.

Instance Methods

The three wrapper objects each provide a number of instance methods. Here are two methods they have in common and inherited from the Object object: valueOf() and toString().

valueOf()

The valueOf() method returns the value of the primitive type corresponding to the wrapped object instance.

new Number(123).valueOf() // 123
new String('abc').valueOf() // "abc"
new Boolean(true).valueOf() // true

toString()

The toString() method returns the corresponding string form.

new Number(123).toString() // "123"
new String('abc').toString() // "abc"
new Boolean(true).toString() // "true"

Automatic conversion between primitive types and instance objects

In some cases, the value of the primitive type is automatically called as the wrapped object, that is, the properties and methods of the wrapped object are called. At this time, the JavaScript engine will automatically convert the value of the primitive type into a packaging object instance and destroy the instance immediately after use.

For example, a string can call the length property to return the length of the string.

'abc'.length // 3

In the above code, abc is a string, not an object itself, and its length property cannot be called. The JavaScript engine automatically converts it into a wrapper object and calls the length property on this object. After the call is completed, the temporary object will be destroyed. This is called automatic conversion between primitive types and instance objects.

var str = 'abc';
str.length // 3

// Equivalent to var strObj = new String(str)
// String {
// 0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"
// }
strObj.length // 3

The wrapper object generated by automatic conversion is read-only and cannot be modified. Therefore, strings cannot have new properties added to them.

var s = 'Hello World';
sx = 123;
sx // undefined

The above code adds an x ​​property to the string s, but the result is invalid and always returns undefined.

On the other hand, after the call is completed, the wrapped object instance will be automatically destroyed. This means that the next time you call the string's properties, you are actually calling a newly generated object instead of the object generated in the previous call, so you cannot get the properties assigned to the previous object. If you want to add properties to a string, you can only define them on its prototype object String.prototype.

Custom methods

In addition to native instance methods, wrapper objects can also define custom methods and properties for direct calls to values ​​of the original type.

For example, we can add a double method to double strings and numbers.

String.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

'abc'.double() // abcabc

Number.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

(123).double() // 246

The above code defines a method on the prototypes of the two objects, String and Number, respectively, so that they can be called on all instance objects. Note that the final 123 must be surrounded by parentheses, otherwise the dot operator (.) will be interpreted as a decimal point.

Boolean Object

Overview

The Boolean object is one of the three wrapper objects in JavaScript. As a constructor, it is mainly used to generate a wrapper object instance of a Boolean value.

var b = new Boolean(true);
typeof b // "object"
b.valueOf() // true

The variable b in the above code is an instance of a Boolean object. Its type is object and its value is the Boolean value true.

Note that for the wrapped object instance corresponding to false, the Boolean operation result is also true.

if (new Boolean(false)) {
  console.log('true');
} // true

if (new Boolean(false).valueOf()) {
  console.log('true');
} // No output

The first example in the above code gets true because the wrapper object instance corresponding to false is an object, which is automatically converted to the Boolean value true when performing logical operations (because the Boolean values ​​corresponding to all objects are true). The valueOf method of the instance returns the original value corresponding to the instance, which is false in this case.

Type conversion effect of Boolean function

In addition to being used as a constructor, the Boolean object can also be used alone to convert any value into a Boolean value. At this time, Boolean is a simple tool method.

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean('') // false
Boolean(NaN) // false

Boolean(1) // true
Boolean('false') // true
Boolean([]) // true
Boolean({}) // true
Boolean(function () {}) // true
Boolean(/foo/) // true

The several situations in the above code where true is obtained are all worth remembering carefully.

By the way, you can also convert any value to its Boolean counterpart using the double negation operator (!).

!!undefined // false
!!null // false
!!0 // false
!!'' // false
!!NaN // false

!!1 // true
!!'false' // true
!![] // true
!!{} // true
!!function(){} // true
!!/foo/ // true

Finally, for some special values, adding new in front of the Boolean object will produce completely opposite results, so you must be careful.

if (Boolean(false)) {
  console.log('true');
} // No output if (new Boolean(false)) {
  console.log('true');
} // true

if (Boolean(null)) {
  console.log('true');
} // No output if (new Boolean(null)) {
  console.log('true');
} // true

Number Object

Overview

The Number object is a wrapper object corresponding to a numerical value and can be used as a constructor or as a tool function.

As a constructor, it is used to generate an object whose value is a numeric value.

var n = new Number(1);
typeof n // "object"

In the above code, the Number object is used as a constructor and returns an object with a value of 1.

As a utility function, it can convert any type of value into a numeric value.

Number(true) // 1

Static properties

The Number object has the following static properties (that is, properties defined directly on the Number object, rather than on the instance).

• Number.POSITIVE_INFINITY: positive infinity, pointing to Infinity.
• Number.NEGATIVE_INFINITY: negative infinity, pointing to -Infinity.
• Number.NaN: represents non-numeric value, points to NaN.
• Number.MIN_VALUE: represents the smallest positive number (that is, the positive number closest to 0, which is 5e-324 in the 64-bit floating point system). Correspondingly, the negative number closest to 0 is -Number.MIN_VALUE.
• Number.MAX_SAFE_INTEGER: represents the maximum integer that can be accurately represented, which is 9007199254740991.
• Number.MIN_SAFE_INTEGER: represents the smallest integer that can be accurately represented, that is, -9007199254740991.

Number.POSITIVE_INFINITY // Infinity
Number.NEGATIVE_INFINITY // -Infinity
Number.NaN // NaN

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MAX_VALUE < Infinity // true

Number.MIN_VALUE // 5e-324
Number.MIN_VALUE > 0 // true

Number.MAX_SAFE_INTEGER // 9007199254740991
Number.MIN_SAFE_INTEGER // -9007199254740991

Instance Methods

The Number object has four instance methods, all of which are related to converting a value into a specified format.

Number.prototype.toString()

The Number object deploys its own toString method to convert a value into a string.

(10).toString() // "10"

The toString method can accept a parameter indicating the output base. If this parameter is omitted, the value is converted to decimal by default and then output as a string; otherwise, a number is converted into a string of a certain base according to the base specified by the parameter.

(10).toString(2) // "1010"
(10).toString(8) // "12"
(10).toString(16) // "a"

In the above code, 10 must be placed in brackets to indicate that the dot behind it refers to calling the object property. If you don't add brackets, the dot will be interpreted as a decimal point by the JavaScript engine, resulting in an error.

10. toString(2)
// SyntaxError: Unexpected token ILLEGAL

Any way of writing it will work as long as the JavaScript engine doesn't confuse the decimal point with the object's dot operator. In addition to adding brackets around 10, you can also add two dots after 10. JavaScript will interpret the first dot as a decimal point (i.e. 10.0) and the second dot as a call to an object property, thus obtaining the correct result.

10..toString(2) // "1010"

// Other methods include 10 .toString(2) // "1010"
10.0.toString(2) // "1010"

This means, in practice, that you can use the toString method directly on a decimal.

10.5.toString() // "10.5"
10.5.toString(2) // "1010.1"
10.5.toString(8) // "12.4"
10.5.toString(16) // "a.8"

The toString method can also be called using the square bracket operator.

10['toString'](2) // "1010"

The toString method can only convert decimal numbers into strings of other bases. If you want to convert numbers in other bases back to decimal, you need to use the parseInt method.

Number.prototype.toFixed()

The toFixed() method first converts a number to a decimal with a specified number of digits, and then returns the string corresponding to the decimal.

(10).toFixed(2) // "10.00"
10.005.toFixed(2) // "10.01"

In the above code, 10 and 10.005 are first converted to two decimal places and then converted to strings. The 10 must be placed in brackets, otherwise the point behind it will be treated as a decimal point.

The parameter of the toFixed() method is the number of decimal places, the valid range is 0 to 20, and a RangeError error will be thrown if it exceeds this range.

Due to floating point numbers, rounding of the decimal point 5 is undefined and must be used with caution.

(10.055).toFixed(2) // 10.05
(10.005).toFixed(2) // 10.01

Number.prototype.toExponential()

The toExponential method is used to convert a number to scientific notation.

(10).toExponential() // "1e+1"
(10).toExponential(1) // "1.0e+1"
(10).toExponential(2) // "1.00e+1"

(1234).toExponential() // "1.234e+3"
(1234).toExponential(1) // "1.2e+3"
(1234).toExponential(2) // "1.23e+3"

The parameter of the toExponential method is the number of significant digits after the decimal point, ranging from 0 to 20. If it exceeds this range, a RangeError error will be thrown.

Number.prototype.toPrecision()

The toPrecision method is used to convert a number to a specified number of significant digits.

(12.34).toPrecision(1) // "1e+1"
(12.34).toPrecision(2) // "12"
(12.34).toPrecision(3) // "12.3"
(12.34).toPrecision(4) // "12.34"
(12.34).toPrecision(5) // "12.340"

The parameter of the toPrecision method is the number of valid digits, ranging from 1 to 21. If it exceeds this range, a RangeError error will be thrown.

The toPrecision method is not very reliable when used for rounding, because floating point numbers are not stored precisely.

(12.35).toPrecision(3) // "12.3"
(12.25).toPrecision(3) // "12.3"
(12.15).toPrecision(3) // "12.2"
(12.45).toPrecision(3) // "12.4"

Custom methods

Like other objects, you can define custom methods on the Number.prototype object, which will be inherited by instances of Number.

Number.prototype.add = function (x) {
  return this + x;
};

8['add'](2) // 10

The above code defines an add method for the Number object instance. When you call a method on a numeric value, the value is automatically converted into an instance object of Number, so you can call the add method. Since the add method returns a value, chain operations can be performed.

Number.prototype.subtract = function (x) {
  return this - x;
};

(8).add(2).subtract(4) // 6

We can also deploy more complex methods.

Number.prototype.iterate = function () {
  var result = [];
  for (var i = 0; i <= this; i++) {
    result.push(i);
  }
  return result;
};

(8).iterate() // [0, 1, 2, 3, 4, 5, 6, 7, 8]

The above code deploys the iterate method on the prototype of the Number object, which automatically traverses a value into an array.

Note that custom methods for numbers can only be defined on their prototype object Number.prototype. The number itself cannot have custom properties.

var n = 1;
nx = 1;
nx // undefined

In the above code, n is a primitive value. Directly adding a new property x to it will not report an error, but it will be useless and will always return undefined. This is because once the property is called, n is automatically converted to an instance object of Number, and the object is automatically destroyed after the call ends. Therefore, the next time you call the attribute of n, you actually get another object, and the attribute x cannot be read.

String Object

Overview

The String object is one of the three wrapper objects provided by JavaScript natively and is used to generate string objects.

var s1 = 'abc';
var s2 = new String('abc');

typeof s1 // "string"
typeof s2 // "object"

s2.valueOf() // "abc"

A string object is an array-like object (much like an array, but not an array).

new String('abc')
// String {0: "a", 1: "b", 2: "c", length: 3}

(new String('abc'))[1] // "b"

In the above code, the string object corresponding to the string abc has numeric keys (0, 1, 2) and length attributes, so it can be accessed like an array.

In addition to being used as a constructor, the String object can also be used as a tool method to convert values ​​of any type into a string.

String(true) // "true"
String(5) // "5"

Static methods

String.fromCharCode()

The static methods provided by the String object (that is, methods defined in the object itself, not in the object instance) are mainly String.fromCharCode(). The method takes one or more numeric values ​​representing Unicode code points as parameters, and returns a string consisting of these code points.

String.fromCharCode() // ""
String.fromCharCode(97) // "a"
String.fromCharCode(104, 101, 108, 108, 111) // "hello"

In the above code, if the parameter of the String.fromCharCode method is empty, it returns an empty string; otherwise, it returns the Unicode string corresponding to the parameter.

Note that this method does not support characters with Unicode code points greater than 0xFFFF, that is, the parameter passed in cannot be greater than 0xFFFF (that is, 65535 in decimal).

String.fromCharCode(0x20BB7) // "ஷ"
String.fromCharCode(0x20BB7) === String.fromCharCode(0x0BB7)
// true

In the above code, the String.fromCharCode parameter 0x20BB7 is greater than 0xFFFF, resulting in an error in the returned result. The character corresponding to 0x20BB7 is Chinese character

The above is a brief discussion of the details of JS packaging objects. For more information about JS packaging objects, please pay attention to other related articles on 123WORDPRESS.COM!