改变this指向(call()和apply()的使用方式)

一般情况下，我们的this指向的都是调用者，也就是说  谁调用我，我的this就指向谁

var a = 1

function myFunction() {
    console.log(this.a);
}

myFunction() // 这种调用方式相当于 window.myFunction() this指向全局

new myFunction(); // new 一个方法 this指向自己

有一种情况不同，那就是new关键字，new关键字的this指向自己

我们现在创建一个对象，来验证这个说法

var person = {
    firstName: "Bill",
    lastName: "Gates",
    fullName: function () { // 函数是对象的方法
        return this.firstName + this.lastName; // 这里的this指向person 因为person是调用者
    }
}
console.log(person.fullName());

person是调用者，this就指向person

那么这个说法是一定的么？？？

其实也不一定，我们的JavaScript提供了两个方法来更改this的指向

call() 和 apply()

call的使用方式:

记住这句话：使用call()可以使调用的对象属于另一个对象

现在我们创建一个对象来测试一下

var school = {
    student: {
        sum: 100,
        girl: 50,
        boy: 50
    },
    teacher: {
        sum: 10,
        girl: 5,
        man: 5
    },
    logMsg: function (msg, msgTwo, msgThree) {
        console.log("学生总数:" + this.student.sum + " 男孩数量:" + this.student.boy + " 女孩数量:" + this.student.girl);
        console.log("老师总数:" + this.teacher.sum + " 男人数量:" + this.teacher.man + " 女人数量:" + this.teacher.girl);
        if (msg) {
            console.log("我是msg: " + msg);
            console.log("我是msgTwo: " + msgTwo);
            console.log("我是msgThree: " + msgThree);
        }
    }
}

school.logMsg();

打印结果:

学生总数:100 男孩数量:50 女孩数量:50
js.js:35 老师总数:10 男人数量:5 女人数量:5

this是指向school的，这也符合我们日常的理解

那么我们使用call()函数来试一下

// 现在我们创建第二个学校对象
var schoolTwo = {
    student: {
        sum: 322,
        girl: 122,
        boy: 200
    },
    teacher: {
        sum: 43,
        girl: 12,
        man: 31
    }
}

school.logMsg.call(schoolTwo, "信息", ["信息", "信息"], 1); // 此时this的指向变成了schoolTwo 
// call也是可以传递参数的

打印结果:

学生总数:322 男孩数量:200 女孩数量:122
js.js:35 老师总数:43 男人数量:31 女人数量:12
js.js:37 我是msg: 信息
js.js:38 我是msgTwo: 信息,信息
js.js:39 我是msgThree: 1

this的指向已经不同了，此时的this指向schoolTwo对象

那么可以看的出，我们call给方法传值是一个一个的传的，如果我们想用数组的方式一次性全传过去，可以使用apply

school.logMsg.apply(schoolTwo, [1, 2, 3]); // apply只接受一个数组形式的参数，会把数组中所有的值拆开一个个的传过去

打印出来是：

注意：apply只接受一个数组形式的参数，会把数组中所有的值拆开一个个的传过去

学生总数:322 男孩数量:200 女孩数量:122
js.js:35 老师总数:43 男人数量:31 女人数量:12
js.js:37 我是msg: 1
js.js:38 我是msgTwo: 2
js.js:39 我是msgThree: 3