this

this是每一个函数中都有的一个变量
因为 this 的值在书写的时候无法确定，只有在函数被调用的时候才能确定

function fn() {
    // 这里只是书写了 this，但是无法确定 this 的值，只有等到函数调用的时候才能确定
    console.log(this)
}

如果函数直接在全局作用域调用，那么他的 this 就指向 window
将 fn 放在一个对象中，然后调用

const obj = {
    name: "当你看到我的时候，证明你看到了 obj 对象",
    cb: fn
}
obj.cb()      // 此时内部的 this 就指向了这个对象 

将函数当成一个事件处理函数使用

const box = document.querySelector("div")   
box.onclick = fn    // 此时 this 会指向事件源 

将函数放在定时器中执行

setTimeout(fn, 0)   // 此时 this 指向 window

自执行函数

(function fn(name) {
    console.log("我需要自己执行", name)
})("传递进去的参数")

(fn)()           // 此时内部的 this 指向 window

更改 this

1. call
   在 JS 中，每一个函数都自带一些方法，其中一个就是 call
   该方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
   第二个参数开始, 依次是向函数传递的参数 函数名.call("将函数内部的this更改为谁", "传递给函数的实参1", "传递给函数的实参2"....)

function fn(num) {
    console.log(num.this)
}
const obj = {
    name: "我是obj对象"
}
fn()    // undefined, window
fn.call(obj,10086)     // 10086, obj

2. apply
   该方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
   第二个参数是一个 数组, 数组里面的每一项依次是向函数传递的参数

函数名.apply("将函数内部的this更改为谁", [传递给函数的实参1, 传递给函数的实参2])

function fn(num) {
    console.log(num, this)
}
const obj = {
    name: "我是obj对象"
}
fn()      // undefined window
fn.apply(obj,[132,456])    // 132, obj

3. bind
   该方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
   函数名.bind("将函数内部的this更改为谁", [传递给函数的实参1, 传递给函数的实参2])

function fn(num){
    console.log(num,this);
}
var obj = {
name:'我是obj对象'
}
fn()        // undefined, window
var res = fn.bind(obj,'10086')     
// bind 调用的时候, 不会执行 fn 这个函数, 而是返回一个新的函数，个新的函数就是一个改变了 this 指向以后的 fn 函数
console.log(res);     // fn(num) {console.log(num, this)}
res()       // "10086", obj 
// res() 执行的是一个和 fn 一模一样的函数, 只不过里面的 this 指向改成了 obj

区别：call 和 apply 方法调用后都会低级执行，bind 方法不会立即执行，而是会返回一个内部的 this 更改过的函数