One: js deep copy
In JS, data types are divided into basic data types and reference data types. For basic data types, its value is directly stored in the stack memory, while for reference types, it only stores in the stack memory. A reference, and the real data is stored in the heap memory. Deep copy works on reference types! For example: Object, Array. Deep copy does not copy the reference of the reference type, but copies all the value of the reference type to form a new reference type, so that there is no problem of reference confusion, so that we can use the same data multiple times, and Don't worry about conflicts between data
How to achieve deep copy?
1：序列化以及反序列化，JSON.stringify()以及JSON.parse()
let obj = {
a: 1,
b: 2,
c: 3
}
let objclone = Object.assign({
}, obj);
objclone.b = 5;
console.log(obj.b); // 2
console.log(objclone.b); // 5
2: 递归拷贝 此方法借鉴于老同学前端郝晨光
// 定义一个深拷贝函数 接收目标target参数
function deepClone(target = '') {
// 定义一个变量
let result;
// 如果当前需要深拷贝的是一个对象的话
if (typeof target === 'object') {
// 如果是一个数组的话
if (Array.isArray(target)) {
result = []; // 将result赋值为一个数组，并且执行遍历
for (let i in target) {
// 递归克隆数组中的每一项
result.push(deepClone(target[i]))
}
// 判断如果当前的值是null的话；直接赋值为null
} else if(target===null) {
result = null;
// 判断如果当前的值是一个RegExp对象的话，直接赋值
} else if(target.constructor===RegExp){
result = target;
}else {
// 否则是普通对象，直接for in循环，递归赋值对象的所有值
result = {
};
for (let i in target) {
result[i] = deepClone(target[i]);
}
}
// 如果不是对象的话，就是基本数据类型，那么直接赋值
} else {
result = target;
}
// 返回最终结果
return result;
}
let obj = {
a: {
c: /a/,
d: undefined,
b: null
},
b: function () {
console.log(this.a)
},
c: [
{
a: 'c',
b: /b/,
c: undefined
},
'a',
3
]
}
let objclone = deepClone(obj);
console.log(objclone);
3：ES6 新语法 ...展开
let obj = {
a:10 }
let objclone = {
...obj}
objclone.a = 5
console.log(obj,objclone) // 10 5
this points to the problem
The js common test site is mainly to examine the difference in the use of bind, call, and apply
相同点：
1：都能改变this指向
2：都能传递参数
3：都能通过方法"."方法名调用
不同点
1：函数名不同
2：参数传递方式不同
3：改变this指向的时机不同(bind在复制时改变，其他两个在调用时改变)
4：参数传递时机不同
Example: Improve the following function to make the this of f point to the specified object oTarget (the source of the topic is Niuke.com)
function bindThis(f, oTarget) {
}
//这是用来调用验证的函数
function() {
var r = bindThis(function(a, b) {
return this.test + a + b
}, {
test: 2
})(2, 3);
return r === 7;
}
answer:
//第一种：
function bindThis(f, oTarget) {
return function(){
return f.call(oTarget,...arguments)
}
} //使用call方法 注意arguments对象的参数形式
//第二种：
function bindThis(f, oTarget) {
return function(){
return f.apply(oTarget,arguments)
}
} //使用apply方法
//第三种：
function bindThis(f, oTarget) {
return f.bind(oTarget)
}// bind方法 直接绑定this指向