JS call, apply 和 bind 的基本用法

1. apply(thisArg, [argsArray])方法

• 参数：可以传入两个参数: 第一个参数是对象用来表明函数运行所处的上下文、第二个参数是数组用来表示参数数组。
• 返回值：调用有指定this值和参数的函数的结果。
  例如，用 apply 将数组各项添加到另一个数组 (数组对象的push方法可以将一个或者多个参数推入到另一个数组中，但是当参数是数组类型时候，推入的的就是整个数组了) ：

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

2. call(thisArg, arg1, arg2, ...) 方法

• 参数：与 apply 同样第一个参数也是对象，用来表明函数运行所处的上下文，但第二个参数并不是数组来表示参数，而是直接的参数列表。
• 返回值：调用有指定this值和参数的函数的结果。若该方法没有返回值，则返回 undefined。
  例如，用 call 方法继承父类构造函数

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

var cheese = new Food('feta', 5);
console.log(cheese); //Food: {category: "food", name: "feta", price: 5}

3. bind 方法

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
例如：

var name = "global";
function showName() {
  console.log(this.name);
 }
var obj = {
  name: "obj"
}
showNameBindObj = showName.bind(obj);
showName();    //====> global
showNameBindObj();  //====> obj

三者的共同点和区别

    <script type="text/javascript">
        let variable = "global";
        obj = {
            variable: "obj"
        }
            
        function say(msg) {
            console.log(msg + this.variable);
        }
        
        console.log(say.apply(obj,["apply======>"]));
        console.log(say.call(obj,"call======>"));
        console.log(say.bind(obj)("bind======>"));
    </script>

• 共同点：

三者都是通过指定 this 来改变当前函数的执行上下文
三者都可以外加后续参数传参

• 区别：

call 和 apply 都是绑定新 this 时就传递参数然后就立即调用的；bind 指定新 this 后返回了一个新函数用以后续调用，并在后续调用时才传递参数。