Focus onThe front small OuRead more original technical articles
Original and reference values
- JS variables are loosely typed: ① the data type of the variable need not be specified ② the value and data type of the variable can be changed at any time
- JS variables can contain two types of data:The original valueandReference value
- Primitive values are simple data (6 primitive values: Undefined, Null, Boolean, Number, String, Symbol) that are accessed by value and manipulated by actual values
- A reference value is an object held in memory, accessed by reference, operating on a reference to that object (not the object itself)
Related codes →
Dynamic properties
- You can add, modify, and delete attributes and methods of reference values at any time
let personRefer = new Object(a)// Create an object
personRefer.name = 'Nicholas' // Add attributes and assign values
console.log(personRefer.name) // 'Nicholas'
Copy the code- You cannot have attributes for raw values (attempts to add attributes do not get an error)
let namePrim = 'Nicholas' / / the original value
namePrim.age = 27 // Add attributes to the original value
console.log(namePrim.age) // undefined, no error but invalid
Copy the code- Use the new keyword to create a primitive value wrapper type object that belongs to a special reference type (similar to a primitive type)
let name1 = 'Nicholas' // Primitive type
let name2 = new String('Matt') // The original value of the wrapper type
name1.age = 27
name2.age = 26
console.log(name1.age) // undefined, primitive type cannot have attributes
console.log(name2.age) // 26, reference types can have attributes
console.log(typeof name1) // String, primitive type
console.log(typeof name2) // object, reference type
Copy the codeDuplicate values
- When the original value is copied, the new value is a copy of the old value. The new value and the old value are used independently of each other
let num1Prim = 5
let num2Prim = num1Prim
console.log(num2Prim) // 5, the original value, the copied value is a copy
num2Prim = 6 // The copy has changed
console.log(num2Prim) / / 6
console.log(num1Prim) // 5, the copied value does not change
Copy the code- When a reference value is copied, both the new value and the old value point to the same object in heap memory, and the change of the new value or the old value affects each other
let obj1Refer = new Object(a)let obj2Refer = obj1Refer // The copied value is a pointer
obj2Refer.name = 'Nicholas' // An object has changed
console.log(obj2Refer.name) // 'Nicholas'
console.log(obj1Refer.name) // 'Nicholas', affects another object
delete obj1Refer.name // An object has changed
console.log(obj1Refer.name) // undefined
console.log(obj2Refer.name) // undefined affects another object
Copy the codePassing parameters
- Arguments to all functions in ECMAScript arePass by valueWhen a value outside a function is copied to an argument inside a function, it is copied from one variable to another:
- When the original value is used as a parameter, the parameters inside the function are changed, and the values outside the function are not affected
- When a value is referenced as a parameter, properties of an object are changed inside a function, and objects outside the function are affected
/* The original value is the argument */
let count = 10 // The original value is taken as an argument
function addTen(num) {
num += 10 // Inside the function, the value of the argument changes
return num
}
let result = addTen(count)
console.log(result) / / 30
console.log(count) // 20, not affected
/* References the value as an argument */
let person = new Object(a)// outside the function, reference values as arguments
function setName(obj) {
obj.name = 'Nicholas' Inside the function, obj and the external argument person point to the same object and change the object's properties
}
setName(person)
console.log(person.name) // 'Nicholas', affected
Copy the code- Although changing properties of objects inside a function affects objects outside the function when using reference values as arguments, arguments are stillPass by value, andNot by reference:
- When a reference value is used as an argument, if an object is overridden inside a function, the object outside the function is not affected, and the original reference remains unchanged
- If passed by reference, the original reference should change after overriding the object arguments in the function
let person2 = new Object(a)function setName2(obj) {
obj.name = 'Nicholas' // Change the attribute of the parameter, the parameter is affected
obj = new Object(a)// Overwrite the parameter, the parameter is not affected
obj.name = 'Greg'
}
setName2(person2)
console.log(person2.name) // 'Nicholas'
Copy the codeDetermine the type
let str = 'Nicholas'
let num = 30
let boo = true
let u
let n = null
let sym = Symbol(a)let f = new Function(a)let o = new Object(a)let a = new Array(a)let r = new RegExp(a)Copy the code- Typeof operators can detect types: String, Number, Boolean, Symbol, Undefined, Function (excluding all primitive values of Null and Function)
console.log(typeof str) // String, the original value
console.log(typeof num) // number, original value, original value
console.log(typeof boo) // Boolean, original value
console.log(typeof u) // undefined, original value
console.log(typeof sym) // symbol, original value
console.log(typeof f) // function, reference value but function returns function
Copy the code- The Typeof operator detects any reference value or NULL, and the result is Object
console.log(typeof n) // object, the original value but Null returns object
console.log(typeof o) // object, all references except Function return object
console.log(typeof a) // object, all references except Function return object
console.log(typeof r) // object, all references except Function return object
Copy the code- Types detected by the instanceof operator: Object (all reference values)
console.log(o instanceof Object) // true, o is an instance of Object
console.log(f instanceof Function) // true, f is an instance of Function
console.log(f instanceof Array) // false, f is not an instance of Array
console.log(a instanceof Array) // true, a is an instance of Array
console.log(r instanceof RegExp) // true, r is an instance of RegExp
Copy the code- All referenced values are instances of Object
console.log(f instanceof Object) // true, all reference types are instances of Object
console.log(a instanceof Object) // true, all reference types are instances of Object
console.log(r instanceof Object) // true, all reference types are instances of Object
Copy the code- The instanceof operator detects any raw value and the result is false
console.log(n instanceof Object) // false, the original value is not an Object, not an instance of Object
Copy the codeSummary & questions
| The original value | Reference value |
|---|---|
| Simple data | Objects stored in memory |
| According to the value of access | Access by reference |
| Operating actual value | Operating on a reference to the object (rather than the object itself) |
| Can’t have a property | Add, delete, and change its properties and methods at any time |
| Copied values are copies and do not affect each other | Copied values are Pointers that affect each other |
| As parameters, the parameters are not affected by changes in values within the function | When a function is an argument, changing properties inside the function affects the argument, but overwriting does not |
| Typeof determines the type (null returns object) | Instanceof Determines the type |
- How to understand that JS variables are loosely typed?
- What is the difference between the original value and the reference value in terms of access and manipulation?
- What is the difference between the original value and the reference value when copied by variable?
- What is the difference between the original value and the reference value when passed as a parameter to a function?
- How do I “pass function arguments by value”? Why are reference values also passed as arguments to functions by value rather than by reference?
- How do you determine the specific type of an original or reference value?