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的相同点

1. 在没有传参数时，三者的this指向都是window。
2. 有参数时，第一个参数必须传，而且必须是对象类型，此时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的不同点

1. 调用方法：函数名.call();和 函数名.apply();调用方法一样，都是在后方加一个括号即可。而bind需要跟两个括号eg:函数名.bind()()
2. 传参数的的形式不同：   函数名.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>