前端面试JS必备基础之深浅拷贝和this指向问题@莫成尘

一：js深拷贝

在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中。深拷贝作用在引用类型上！例如：Object，Array。深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突

如何实现深拷贝？

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 = 5console.log(obj,objclone)  // 10   5

this指向问题

js常考点主要是考察bind，call，apply的使用的区别

相同点：
1：都能改变this指向
2：都能传递参数
3：都能通过方法"."方法名调用不同点
1：函数名不同
2：参数传递方式不同
3：改变this指向的时机不同(bind在复制时改变，其他两个在调用时改变)
4：参数传递时机不同

举例：完善以下函数，使 f 的 this 指向指定的对象oTarget（题目来源牛客网）

function bindThis(f, oTarget) {}
//这是用来调用验证的函数
function() {var r = bindThis(function(a, b) {return this.test + a + b}, {test: 2})(2, 3);return r === 7;
}

答案：

//第一种：
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指向

其他想了解的请留言

前端面试JS必备基础之深浅拷贝和this指向问题@莫成尘相关推荐

前端面试 - JS总结（1） - 基础 (数据类型, 事件与函数, 原型链)
你不走出舒适圈,又怎么知道自己多坚强?! 前端面试 - JS总结(1) - 基础 (数据类型, 事件与函数, 原型链) 前端面试 - JS总结(2) - ES6 (let, 箭头函数, this) 前 ...
JS 中对象的深浅拷贝（ES3、ES5、ES6不同方法底层实现，一文搞清楚深浅拷贝面试常问题）
JS 中对象的深浅拷贝拷贝我们都知道这个词的意思,我们经常做过复制.粘贴的操作,其中的复制就是拷贝,那么在拷贝的时候,如果我们复制出来的内容和原内容是完全的分开,各自不相影响,那么这就属于深拷贝 ...
Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...
Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
js动态创建对象_JS深浅拷贝的深入浅出
一首先了解JavaScript中的基本数据类型基本数据类型:String,Number,Boolean,Null,Undefined 引用数据类型:Araay,Date,RegExp,Functi ...
web前端面试 js部分
1/如何用原生js给一个按钮绑定过两个click事件 var obtn = document.getElementById('btn'); obtn.addEventListener('click', ...
前端面试总结 -- 网络基础之 HTTP 和 HTTPS
基本概念 HTTP:超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议[1].HTTP是万维网的数据通信 ...
前端面试之计算机基础篇
输入url到加载完页面的过程 TCP三次握手/四次挥手详解为什么是三次而不是两次,四次? 浏览器缓存浏览器解析渲染页面的过程: 根据 HTML 解析出 DOM 树: 根据 CSS 解析生成 CSS ...
前端面试几个基础知识自查
1.JS中使用typeof能得到的哪些类型? <script>// 基本数据类型// number类型var num = 1;console.log(typeof num);//返回的是n ...

前端面试JS必备基础之深浅拷贝和this指向问题@莫成尘

一：js深拷贝

如何实现深拷贝？

this指向问题

js常考点主要是考察bind，call，apply的使用的区别

其他想了解的请留言

前端面试JS必备基础之深浅拷贝和this指向问题@莫成尘相关推荐

最新文章

热门文章

前端面试JS必备基础之深浅拷贝和this指向问题@莫成尘

一：js深拷贝

如何实现深拷贝？

this指向问题

js常考点 主要是考察bind，call，apply的使用的区别

其他想了解的请留言

前端面试JS必备基础之深浅拷贝和this指向问题@莫成尘相关推荐

最新文章

热门文章

js常考点主要是考察bind，call，apply的使用的区别