web学习笔记（三十二）
目录
1.函数的call、apply、bind方法
1.1call、apply、bind的相同点
1.2call、apply、bind的不同点
1.3call、apply、bind的使用场景
2. 对象的深拷贝
2.1对象的浅拷贝
2.1对象的深拷贝
1.函数的call、apply、bind方法
1.1call、apply、bind的相同点
- 在没有传参数时，三者的this指向都是window。
- 有参数时，第一个参数必须传，而且必须是对象类型，此时this指向已经改变为传过来的对象
function show(a, b) {console.log(a, b);console.log(this);}show();//this是windowshow.call();//this是windowshow.apply();//this是windowvar fn = show.bind(); //有返回值，返回和原函数长得一样的新函数。可以show.bind()()调用 ，也可以fn()fn()//this是window
1.2call、apply、bind的不同点
- 调用方法：函数名.call();和 函数名.apply();调用方法一样，都是在后方加一个括号即可。而bind需要跟两个括号eg:函数名.bind()()
- 传参数的的形式不同： 函数名.call(对象,实参1,实参2); 函数名.apply(对象,[实参1,实参2]); 函数名.bind(对象,实参1,实参2)(); apply的第二个参数是以数组的形式来传递的。
1.3call、apply、bind的使用场景
- call：借助构造函数实现继承
<script>function Fatner(x, y) {this.x = x;this.y = y;}Fatner.prototype.say = function () {console.log('aaa');}function Son(x, y, z) {Fatner.call(this, x, y);console.log(this); //如果不回指则this指向Fatherthis.z = z;}Son.prototype.bbb = function () {console.log('bbb');}Son.prototypre = Object.create(Fatner.prototype); //将父的方法复制过来。Son.prototype.constructon = Son //进行回指操作，表示Son的构造器为Son。Son(1, 2, 3);</script> - apply： 求数组的最大值或最小值
var max = Math.max.apply(Math, [10, 20, 30, 40, 23]);console.log(max); - bind: 在不调用函数的情况下，改变this的指向。
<button>确定</button><script>var btn = document.querySelector('button');btn.addEventListener('click', function () {this.disabled = true;setTimeout(function () {this.disabled = false;}.bind(this), 1000)})</script>
2. 对象的深拷贝
深浅拷贝最大的区别就是对一个对象进行修改，另一个会不会也被修改，如果两个对象同时进行了修改那就是进行了浅拷贝的操作，如果另一个没有发生改变，那就是进行了深拷贝的操作。数组和对象都有深浅拷贝的概念。
2.1对象的浅拷贝
可以利用 Object.assign()进行对象的浅拷贝操作。
<script>obj = {name: 'zhangzhang',age: '20',arr: [12, 34, 765, [11, 55], {a: 'aaa',b: 'bbb'}]}var obj1 = Object.assign(obj);obj.name = 'lili';obj1.arr[3][0] = 88;console.log(obj1, obj);</script>2.1对象的深拷贝
对象的深拷贝有三种方式
（1）使用JSON.stringify() 和JSON.parse()将对象先转成JSON格式，再转回来就完成了深拷贝的操作。
var obj1= JSON.parse(JSON.stringify(obj) )(2)Lodash 官网，直接引用一个js文件过来，然后用里面的var obj1= _.cloneDeep(obj);
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script> <script>obj = {name: 'zhangzhang',age: '20',arr: [12, 34, 765, [11, 55], {a: 'aaa',b: 'bbb'}]}var obj2 = _.cloneDeep(obj);obj.name = 'lili';obj2.arr[3][0] = 88;console.log(obj2, obj);</script>(3用递归来完成（原生方法）
<script>obj = {name: 'zhangzhang',age: '20',arr: [12, 34, 765, [11, 55], {a: 'aaa',b: 'bbb'}]}function copy(obj) {if (typeof obj != 'object') {return obj;}var newobj = obj instanceof Array ? [] : {};for (var k in obj) {newobj[k] = copy(obj[k])}return newobj;}var obj3 = copy(obj);obj.name = 'lili';obj3.arr[3][0] = 88;console.log(obj3, obj);</script>