JS中this指向问题

1. 函数中的this指向

调用函数的时候this才会指向调用者。注：箭头函数除外

// 定义一个函数
function t() {
    // 直接执行this的打印
    console.log(this);
}
// 在window中直接调用
t(); // 此时调用者为window,直接等价于window.t()
// this指向为window

2. 对象中的this指向

对象中的this默认受作用域的影响，箭头函数除外

// 定义一个对象
var obj = {
    fun: function(){ 
        // 指向obj对象，受默认作用域的影响
        console.log(this) 
    },
    fun1: () => {
        // 指向window，箭头函数作用域受影响
        console.log(this)
    },
    obj2: {
        fun3: function() {
            // 指向当前调用者，作用域对象obj2
            console.log(this)
        },
        fun4:() => {
            // 指向window，箭头函数作用域影响
            console.log(this)
        }
    },
    fun5: function() {
        return {
            fun6:() => {
                // 指向obj对象，因为obj中属于函数调用，而内层属于箭头函数作用域影响
                console.log(this)
            }
        }
    }
}

3. this指向在定义时无法确定

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

var obj = {
    fun1: function() {
        console.log(this);
    }
}
obj.fun1() // 指向obj对象
var fun2 = obj.fun1;
fun2(); // 指向window
// 以上代码等同于
window = {
  fun2: function() {
    return obj.fun1
  }
}
// 最终调用的是window下的fun2函数，所以指向为window

3. 如何改变this的指向 --apply() call() bind()

用法：

每个Function对象都存在apply()、call()、bind()方法，其作用都是可以在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

window.name = "A" // 挂载到window对象的name
document.name = "B" // 挂载到document对象的name
var obj = {
    name: "C"
} // 自定义对象
var rollCall = {
    name: "Teacher",
    sayName: function() {
        console.log(this.name)
    }
}
rollCall.sayName(); // Teacher

// apply
rollCall.sayName.apply(); // 不传参数默认会绑定到window // 输出 A
rollCall.sayName.apply(window) // 传window绑定window // 输出 A
rollCall.sayName.apply(document)// 传document绑定document // 输出 B
rollCall.sayName.apply(obj) // 绑定自定义对象引用 // 输出 C

// call用法和apply一样
// call
rollCall.sayName.call(); // A // 不传参默认绑定window
rollCall.sayName.call(window); // A // 绑定window对象
rollCall.sayName.call(document); // B // 绑定document对象
rollCall.sayName.call(s); // C // 绑定自定义对象

// bind 需要加上()让其立即执行
rollCall.sayName.bind()(); //A // 不传参默认绑定window
rollCall.sayName.bind(window)(); //A // 绑定window对象
rollCall.sayName.bind(document)(); //B // 绑定document对象
rollCall.sayName.bind(s)(); // C // 绑定自定义对象

区别：

// apply与call传参方式不同
window.name = "Teacher";
var rollCall = {
    sayAllName: function(...args){
        console.log(this.name);
        args.forEach((v) => console.log(v));
    }
}

// apply 将参数作为一个数组传递
rollCall.sayAllName.apply(window,["A","B","C"]); // Teacher A B C

// call 将参数直接传递，使用逗号分隔
rollCall.sayAllName.call(window,"A","B","C"); // Teacher A B C

// bind 仅将对象绑定，并不立即执行，其返回值是一个函数，传参方式与 call 相同
var convertThis = rollCall.sayAllName.bind(window,"A","B","C"); 
convertThis(); // Teacher A B C