call、apply、bind的使用，改变this指向的三种方式

call、apply、bind的使用，改变this指向的三种方式

call

1. 改变this的指向，通过第一个参数.
2. 调用函数，可以传递参数，和普通调用一样，参数从第二个开始，第一个默认认为是修改this指向的那个对象。
3. 实现继承

        function Father(x, y) {
            this.x = x;
            this.y = y;
        }

        function Sun(x, y) {
            Father.call(this, x, y);  //将this指向son
        }
        var sun = new Sun(1, 2);
        console.log(sun);

apply

1. 改变this指向
2. 调用方法，同call，区别在于参数必须是数组

    function fn(arr) {
        console.log(this); // { name: "red"}   this指向了obj
        console.log(arr); // 'Lisa'打印出的是字符串
    }
    var obj = {
        name: "red"
    }
    fn.apply(obj, ["Lisa"]); // 参数必须是数组

3. 应用：求数组中的最大最小值

    var arr = [12, 34, 22, 1, 90];
    console.log(Math.max.apply(Math, arr)); // 90
    console.log(Math.min.apply(Math, arr)); // 1

bind

1. 改变this指向，返回原函数的拷贝，不会调用原函数。

    function fn(name) {
        console.log(this); // { name: "red"}   this指向了obj
        console.log(name); // 'Lisa'打印出的是字符串
    }
    var obj = {
        name: "red"
    }
    // fn.bind(obj, "lisa") // 不会调用
    var newfn = fn.bind(obj, "lisa");
    newfn();

2. 应用：不想调用函数又想改变原函数内部this的指向。例如：有一组按钮，在点击之后需要被禁用，2秒之后恢复。

    // 传统实现方式
    var btns = document.querySelectorAll("button");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function() {
            this.disabled = true;
            var that = this; // 传统方式
            setTimeout(function() {
                that.disabled = false;
            }, 2000);
        });
    }

    // 使用bind改变this指向当前点击的btn，并且不会立刻调用
    var btns = document.querySelectorAll("button");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function() {
            this.disabled = true;
            setTimeout(function() {
                this.disabled = false;
            }.bind(this), 2000); // 改变this指向
        });
    }

小结

• 共同点：都能改变this指向
• 不同点：
  1. call和apply会调用函数，bind不会
  2. apply传递的参数必须是数组，call和apply的参数为arg1,arg2…
• 应用场景
  1. call多用于继承。
  2. apply经常用于与数组有关的。
  3. bind用于不调用函数，但是需要改变this指向的时候。