网络学习笔记（三十二）

目录

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是window
           show.call();//this是window
           show.apply();//this是window
           var 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指向Father
              this.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>