JavaScript基础 - 23 （this、函数的call、apply、bind方法，箭头函数的this）

1、函数的call方法

        函数的call方法, 可以在触发函数的同时替换其this指向

         仿写：

         应用场景：

        当创建多个类似的构造函数时，会有很多共同的属性，可以提取这些共同的属性，组成一个共享的构造函数

        函数.call (新对象，参数1，参数2 …)：就会把函数的this替换成新对象，然后触发函数

    //函数.call（新对象）：就会把函数的this替换成新对象，然后触发函数
    //构造函数：创建员工对象
    function Employee(name, age, eid) {
      this.name = name;
      this.age = age;
      this.eid = eid;
    };

    //员工中细分为：教师、管理者...
    function Teacher(name, age, eid) {
      //一般正常函数调用是：show(a,b,c)
      //如果用call来修改this指向，则写法是：
      //show.call(新的对象,name,age,eid)
      Employee.call(this, name, age, eid);
      // this.name=name;
      // this.age=age;
      // this.eid=eid;     
      this.category = "教师"; //分类 = 教师
    };

    var yanan = new Teacher('丫丫', 19, '11011');
    console.log(yanan);

    //员工 > 管理者
    function Manager(name,age,eid){
      Employee.call(this,name,age,eid)
      this.category="管理者";
    }
    var m = new Manager("文文",38,"00001");
    console.log(m);

2、apply方法

        函数的apply:同call，都可以替换函数的this指向，同时执行函数

       同一个函数：show(a,b,c)，新对象obj

       用call书写：show.call(obj,a,b,c)

       用apply书写：show.apply(obj,[a,b,c])

       特点：apply(对象,[参数数组...])

        apply ( 对象，[参数数组...] )     

    //函数的apply:同call，都可以替换函数的this指向，同时执行函数
    //同一个函数：show(a,b,c)，新对象obj
    //用call书写：show.call(obj,a,b,c)
    //用apply书写：show.apply(obj,[a,b,c])
    //特点：apply(对象,[参数数组...])
    let obj = {name:"丫丫"};
    function show(a,b,c){
      console.log(this.name,a,b,c);
    };
    show.call(obj,1,2,3);
    show.apply(obj,[1,2,3]);

  用途：

        可以把数组类型，转化成普通的函数结构

        数组最大值：var a = Math.max.apply(null, nums)

        合并数组：arr1.push.apply(arr1,arr2)

    var nums = [5, 6, 7, 8, 9];
    //数组最大值:
    var a = Math.max.apply(null, nums);
    console.log(a);

    //合并数组:
    var arr1 = [1,2,3,4];
    var arr2 = [5,6,7,8,9];
    var arr = arr1.concat(arr2);
    // console.log(arr);
    //apply：参数arr1必须要写，代表执行apply的对象
    arr1.push.apply(arr1,arr2);
    arr1.push(...arr2);//ES6的写法
    console.log(arr1);

3、bind方法

        为函数绑定this，返回绑定了this的新函数，但是不立即执行

        bind不会修改原函数，而是克隆一个新的出来，把this换了

        通过bind创建的函数，带有boundThis属性，调用时，就把这个属性作为自己的this

    var name ="全局";
    var yanan = {
      name: "丫丫"
    };

    function show() {
      console.log(this.name);
    };
    //show1是bind返回的新函数，利用window方式查看，可以发现这个函数带有一个boundThis属性，其中就保存了yanan对象
    //正常函数：本身不保存this指向，会根据其运行所在的对象作为他的this
    //通过bind创建的函数，带有boundThis属性，则调用时，就把这个属性作为自己的this
    var show1 = show.bind(yanan);
    show1(); //丫丫
    show(); //全局

用途：

    function Demo(count) {
      this.count = count;
    };
    Demo.prototype.countdown = function () {
      //不要用默认的箭头函数，此函数就是为了解决普通函数的bug而生
      //利用bind方式，把当前对象绑定给回调函数
      var callback = function () {
        console.log(this.count--);
      };
      //cb变量存储了绑定了this变量的函数
      var cb = callback.bind(this);
      setInterval(cb, 1000);
    }
    var d = new Demo(1000);
    d.countdown();

4、箭头函数的this

        普通函数： this指向运行时所在的对象

        箭头函数： 自身没有this, 使用声明时 所在的上级作用域的this

   区别：

        普通函数的this会在使用时变化

        箭头函数的this在声明时固定, 使用时不会变化

             优点：箭头函数执行时，固定为声明时作用域中的this，不会变

             call、apply、bind 不能改变箭头函数的this，因为箭头函数本身没有this

            箭头函数没有this、callee、arguments，这些都在ES新标准中被更好的方案替代了