background
Leader last week to look at the school recruit students a pen questions and topic is to achieve a deep copy of the function, implementation vary, but most still only a shallow copy, just hired as a small school recruit students, also don’t have much profound technical precipitation, take this small point for a summary, After all, the most awesome technology still needs a solid foundation to understand and apply.
Standard engineering students, not good writing, what wrong place still need big men pointed out.
The data type
Why make a light copy? What data types have shallow and deep copy problems? It starts with data types. In JS, the types of variables are mainly divided into basic data types (string, number, Boolean, NULL, undefined) and reference data types (such as Array, Date, RegExp, Function). The basic types are stored in stack memory. They are simple data segments of fixed size, whereas reference types may be objects made up of multiple values of variable size and stored in heap memory.
Basic types which are accessed by value, can be stored in the variable operation in the actual value, the value of a reference type is stored in memory object, js cannot directly manipulate direct access to the location in memory, also is cannot directly manipulate the object’s memory space, the operation object, the operation is actually object reference, so that the value of a reference type is accessible by reference.
When assigning a value from one variable to a reference type of another variable, the copied copy is actually a pointer to the same object stored in the heap, so changing one variable affects the other.
var person_1 = {
name: 'max'.
age: 22
};
var person_2 = person_1;
person_2.name = 'caesar';
console.log(person_1. person_2); //{name: "caesar", age: 22}
//{name: "caesar", age: 22}
Copy the codeIn this case, we simply copy the address of the reference type, because both reference the same address, and the new variable will change the previous variable, but we don’t want to do that.
Good! That’s all we need. Now we’re moving on, so there’s no problem with depth copying of basic types, and the types we want to copy are definitely reference types, such as Array and Object.
Shallow copy
Well, at this point I wanted to copy an array, and my mind quickly flashed a few native array copy methods, as well as a loop assignment method that I quickly wrote down.
-
Array.prototype.slice
-
Array.prototype.concat
-
ES6 copyWithin()
-
function copyArr(arr) { let res = [] for (let i = 0; i < arr.length; i++) { res.push(arr[i]) } return res }
But are they deep copies? I gave it a try.
I only changed one property of the object in the new array, why did the object in the previous array also change!!
To see why, I need to look at the rationale for implementing them, so I searched the V8 source code (I won’t go into the details of the other features – let’s just look at the key ones), for example: array.prototype. slice:
ArraySliceFallback main function
function ArraySliceFallback(start. end) {
CHECK_OBJECT_COERCIBLE(this. "Array.prototype.slice");
.
// Finally returns the value of the result, from which you can see that a new real array has been created
var result = ArraySpeciesCreate(array. MaxSimple(end_i - start_i. 0));
if (end_i < start_i) return result;
// The size of the array is relatively large, but the number of copies is relatively small compared to the total size of the array, but this is irrelevant for our purposes.
if (UseSparseVariant(array. len. IS_ARRAY(array), end_i - start_i)) {
%NormalizeElements(array);
if (IS_ARRAY(result)) %NormalizeElements(result);
// Look here. Look here
SparseSlice(array. start_i. end_i - start_i. len. result);
} else {
// And here and here
SimpleSlice(array. start_i. end_i - start_i. len. result);
}
result.length = end_i - start_i;
return result;
}
Copy the codeThe main function of the Slice method. I’m going to ignore some of the judgment processing for start and end, and focus on the two branches dealing with SparseSlice and SimpleSlice
SparseSlice
function SparseSlice(array. start_i. del_count. len. deleted_elements) {
var indices = %GetArrayKeys(array. start_i + del_count);
if (IS_NUMBER(indices)) {
var limit = indices;
/ / loop
for (var i = start_i; i < limit; ++i) {
var current = array[i];
/ / assignment
if (!IS_UNDEFINED(current) || i in array) {
%CreateDataProperty(deleted_elements. i - start_i. current);
}
}
} else {
var length = indices.length;
/ / loop
for (var k = 0; k < length; ++k) {
var key = indices[k];
if (key > = start_i) {
var current = array[key];
/ / assignment
if (!IS_UNDEFINED(current) || key in array) {
%CreateDataProperty(deleted_elements. key - start_i. current);
}
}
}
}
}
Copy the codeYou can see that both branches of the function just loop through the array and then perform direct assignment.
SimpleSlice
function SimpleSlice(array. start_i. del_count. len. deleted_elements) {
// Direct loop
for (var i = 0; i < del_count; i+ +) {
var index = start_i + i;
if (index in array) {
/ / assignment
var current = array[index];
%CreateDataProperty(deleted_elements. i. current);
}
}
}
Copy the codeThe slice method does not make a distinction between a primitive type and a reference type for each item in the loop, and determines the internal attributes of the reference element, so array.prototype. slice is a shallow copy. Behind the two primary methods did not take out to see, is also similar, interest and does not believe a friend can try click this link (https://github.com/v8/v8/blob/master/src/js/array.js)
summary
We can copy the base type directly with =. When we copy the reference type, we loop over the object and use = to complete the copy for each property, so all of the above copies are just copies of the first level property. This is a shallow copy, although we do get a new object independent of the source. But it still contains reference property values that point to the same address (that is, we just copied the address).
What if one of the properties of an object held in an array is still an object? (And then layer by layer? Certainly no one designed such a deep data structure), but to solve this problem, there is a deep copy implementation: the value of all reference types in the property is iterated up to the base type, and to achieve deep copy, you can also think of recursion.
Deep copy
Therefore, deep copy does not simply copy the reference, but reallocate the memory in the heap, and create a new copy of all the attributes of the source object instance to ensure that the reference of the copied object does not point to any object on the original object or its attributes, and the copied object is completely isolated from the original object.
Deep copy implementation of other class libraries (jquery)
Let’s take a look at how jquery implements deep copy. Jquery uses the extend function to make deep copies of objects.
jQuery.extend = jQuery.fn.extend = function(a) {
.
// We can copy the core code directly
for ( ; i < length; i++ ) {
// Only non-null arguments are processed
if ( (options = arguments[ i ]) ! = null ) {
for ( name in options ) { // Iterate over the attribute names of the source object
src = target[ name ]; // Get the property corresponding to the property name on the target object
copy = options[ name ]; // Get the attribute corresponding to the attribute name on the source object
// Jq does a better job. To avoid a deep loop, jQ does not overwrite the property of the target object with the same name.
if ( target = = = copy ) {
continue;
}
// Deep copy and the values are normal images or arrays, then recursive, that is, jquery makes a recursive deep copy of the objects and arrays created by {} or new Object
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// Copy is an array
if ( copyIsArray ) {
copyIsArray = false;
// clone is the modified value of SRC
clone = src && jQuery.isArray(src) ? src : [];
// If copy is an object
} else {
// clone is the modified value of SRC
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// Call jquery.extend recursively
target[ name ] = jQuery.extend( deep. clone. copy );
// Otherwise, if it is not a pure object or array, jquery will eventually assign the properties of the source object directly to the source object (shallow copy).
} else if ( copy ! = = undefined ) {
target[ name ] = copy;
}
}
}
}
// Returns the changed object
return target;
};
Copy the codeBut jquery’s deep copy does not copy function objects. See the code below.
We wrote a class function, although it is a function, but it is also a function object and is a reference type, but the jquery does not object to a function make deep processing, it will come to the final elseif inside, the source directly to the object’s properties assigned to the object, that is, or shallow copy, but the function is more used to complete certain functions, There are input values and return values, so it is not necessary to make a deep copy of the function object.
JSON global object
An easy way to copy JSON data objects is to use JSON’s parse and Stringify global objects for deep replication.
function jsonClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
Copy the codeBut it only works with Number, String, Boolean, Aarry, flat objects, that is, data structures that can be directly represented by JSON, as follows.
A better way to implement deep copy
Originally wanted to write a deep copy, tried to write, after seeing the former people write feeling how much will have the feeling of plagiarism, and the details are not thoughtful (in fact, their level is not enough), or to share with you a predecessor I think write a better deep copy
// Define a helper function to define methods on the Prototype of the predefined object:
function defineMethods(protoArray. nameToFunc) {
protoArray.forEach(function(proto) {
var names = Object.keys(nameToFunc),
i = 0;
for (; i < names.length; i+ +) {
Object.defineProperty(proto. names[i]. {
enumerable: false.
configurable: true.
writable: true.
value: nameToFunc[names[i]]
});
}
});
}
//Object processing
defineMethods([ Object.prototype ]. {
SrcStack and dstStack. Their main use is to make deep copies of objects where loops exist. For example, the child object srcStack[7] in the source object corresponds to dstStack after deep copy. [7]
'$clone': function (srcStack. dstStack) {
var obj = Object.create(Object.getPrototypeOf(this)),
keys = Object.keys(this),
index.
prop;
srcStack = srcStack || [];
dstStack = dstStack || [];
srcStack.push(this);
dstStack.push(obj);
for (var i = 0; i < keys.length; i+ +) {
prop = this[keys[i]].
if (prop = = = null || prop = = = undefined) {
obj[keys[i]] = prop;
}
else if (!prop.$isFunction()) {
if (prop.$isPlainObject()) {
index = srcStack.lastIndexOf(prop);
if (index > 0) {
obj[keys[i]] = dstStack[index];
continue;
}
}
obj[keys[i]] = prop.$clone(srcStack. dstStack);
}
}
return obj;
}
});
/ / Array processing
defineMethods([ Array.prototype ]. {
'$clone': function (srcStack. dstStack) {
var thisArr = this.valueOf(),
newArr = [].
keys = Object.keys(thisArr),
index.
element;
srcStack = srcStack || [];
dstStack = dstStack || [];
srcStack.push(this);
dstStack.push(newArr);
for (var i = 0; i < keys.length; i+ +) {
element = thisArr[keys[i]].
if (element = = = undefined || element = = = null) {
newArr[keys[i]] = element;
} else if (!element.$isFunction()) {
if (element.$isPlainObject()) {
index = srcStack.lastIndexOf(element);
if (index > 0) {
newArr[keys[i]] = dstStack[index];
continue;
}
}
}
newArr[keys[i]] = element.$clone(srcStack. dstStack);
}
return newArr;
}
});
// Processing of type Date
defineMethods([ Date.prototype ]. {
'$clone': function(a) { return new Date(this.valueOf()); }
});
/ / the RegExp processing
defineMethods([ RegExp.prototype ]. {
'$clone': function (a) {
var pattern = this.valueOf(a);
var flags = ' ';
flags + = pattern.global ? 'g' : ' ';
flags + = pattern.ignoreCase ? 'i' : ' ';
flags + = pattern.multiline ? 'm' : ' ';
return new RegExp(pattern.source. flags);
}
});
// Handle Number, Boolean, and String. This prevents objects like a single String from incorrectly calling Object.prototype.$clone
defineMethods([
Number.prototype.
Boolean.prototype.
String.prototype
]. {
'$clone': function(a) { return this.valueOf(a); }
});
Copy the codeWe can not only implement a deep copy of Object and Array, but also consider the two reference types of Date RegExp. We still need to work hard on this front end. We need to work hard on this front end.
conclusion
Not all variable assignments require a deep copy, and in most cases we only need a shallow copy, as jquery adds the first argument for developers to choose if a deep copy is required.
The first time to write an article, a lot of places are not in place, but finally feel the harvest is quite abundant, in the depth of the copy has a deeper impression and understanding.
— — — — — — — — —
Long press the QR code to follow the big Zhuan FE
▼
