js中call和apply的作用和区别

call和apply

call和apply的作用是在改变函数中this的指向对象。

在普通函数中this指向window

现在写一个fn（）方法 直接调用打印this

function fn (){
	console.log(this);// 普通函数中 this 指向window
}
fn()

打印情况：

结果可以看到this指向window

call

使用call方法 传入一个对象

        function fn (){
            console.log(this);// 此时this指向obj
        }
        let obj = {
            name:'小范儿',
            age:18
        }
        fn.call(obj) // 使用call改变fn函数中的this指向obj对象

打印结果：

this指向obj

apply

使用apply方法 传入一个对象

        function fn (){
            console.log(this);// 此时this指向obj
        }
        let obj = {
            name:'小范儿',
            age:18
        }
        fn.apply(obj) // 使用apply改变fn函数中的this指向obj对象

打印情况：

this指向obj

call和apply的区别

apply方法接收连个参数，第一个参数是函数的指向对象，第二个是一个数组。

        function fn(a, b, c, d) {
            console.log(this.code + a + b + c + d); // 20
        }
        let obj = {
            code: 10
        }
        fn.apply(obj, [1, 2, 3, 4])  //第二个参数是一个数组 数组的每一个元素对应fn函数的一个参数

call方法第一个参数和apply方法的一样，但是传递给函数的参数必须列举出来。

        function fn(a, b, c, d) {
            console.log(this.code + a + b + c + d); // 20
        }
        let obj = {
            code: 10
        }
        fn.call(obj, 1, 2, 3, 4)  // 参数一一列举

想指哪就指哪

    function fn() {
      console.log(this);
    }
    let obj = {
      code: 10,
    };
    fn.call(obj); // obj
    fn.call(window); // window
    fn.call(document); // document
    fn.call(this); // vue 因为在vue中使用this 此时this指向vue 

打印情况：

看完麻烦一键三连啊！！！