js中的call()方法和apply()方法

参考：https://blog.csdn.net/ganyingxie123456/article/details/70855586

1. 每个函数都包含两个非继承而来的方法：call()方法和apply()方法。

2. 相同点：这两个方法的作用是一样的。

都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。

var scope = "global";
function log(){
    console.log("log:",this); // window
    console.log(arguments);
    var args = Array.prototype.join.call(arguments, ", ");
    console.log(args); // wow
    console.log(this.scope + ':' + args);
}
var dog = {
    scope:'dog',
    yelp: function(){
        console.log("dog:",this); // dog
        var scope = 'dog.yelp';
        log('wow');
    }
};
dog.yelp(); // global:wow
dog.yelp.call(dog); // global:wow // 各项打印跟上面的一样！

 var scope = "global";
 function log(){
     console.log("log:",this); // dog
     console.log(arguments);
     var args = Array.prototype.join.call(arguments, ", ");
     console.log(args); // wow
     console.log(this.scope + ':' + args);
 }
 var dog = {
     scope:'dog',
     yelp: function(){
         console.log("dog:",this); 
         var scope = 'dog.yelp';
         log('wow');
     }
 };
 log.call(dog, 'created'); // dog:created  // this指向dog！

arguments是一个类似数组的数组，没有join方法！

// arguments使用Array.join方法：
Array.prototype.join.call(arguments, ", ")
// 类似的：
arguments拥有了array.join方法，参数为"，";

window.number = 'one';
document.number = 'two';
var s1 = {number: 'three'};
function changeColor() {
    console.log(this.number);
}
changeColor.apply(); // one
changeColor.apply(window); // one 
changeColor.apply(document); // two
changeColor.apply(this); // one
changeColor.apply(s1); // three

3. 不同点：接收参数的方式不同。

• apply()方法 接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。
• call()方法 第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。

eg:

function add(c, d) {
    return this.a + this.b + c + d;
}
var s = {a: 1, b: 2};
console.log(add.call(s, 3, 4)); // 1+2+3+4 = 10
console.log(add.apply(s, [5, 6])); // 1+2+5+6 = 14 

window.firstName = "Cynthia";
window.lastName = "_xie";
var myObject = {firstName: 'my', lastName: 'Object'};
function getName() {
    console.log(this.firstName + this.lastName);
}
function getMessage(sex, age) {
    console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age);
}
getName.call(window); // Cynthia_xie
getName.call(myObject); // myObject
getName.apply(window); // Cynthia_xie
getName.apply(myObject);// myObject
getMessage.call(window, "女", 21);    // Cynthia_xie 性别: 女 age: "21
getMessage.apply(window, ["女", 21]); // Cynthia_xie 性别: 女 age: 21
getMessage.call(myObject, "未知", 22);    // myObject 性别: 未知 age: 22
getMessage.apply(myObject, ["未知", 22]); // myObject 性别: 未知 age: 22

参考：
https://blog.csdn.net/qq_30904985/article/details/81252712
https://blog.csdn.net/weixin_42400955/article/details/81453982
https://www.jb51.net/article/124024.htm
https://www.jb51.net/article/145614.htm
https://www.cnblogs.com/chenweizhen/p/6421564.html
https://www.cnblogs.com/faithZZZ/p/6999327.html