js的This指向

function foo() {
 console.log(this.a)
}
var a = 1
foo()
const obj = {
 a: 2,
 foo: foo
}
obj.foo()
const c = new foo()

1.对于直接调⽤ foo 来说，不管 foo 函数被放在了什么地⽅， this ⼀定是 window

2.对于 obj.foo() 来说，我们只需要记住，谁调⽤了函数，谁就是 this ，所以在这个场
景下 foo 函数中的 this 就是 obj 对象

3.对于 new 的⽅式来说， this 被永远绑定在了 c 上⾯，不会被任何⽅式改变 this

我们再来看看箭头函数的this

function a() {
 return () => {
 return () => {
 console.log(this)
 }
 }
}
console.log(a()()())

1.⾸先箭头函数其实是没有 this 的，箭头函数中的 this 只取决包裹箭头函数的第⼀个
普通函数的 this 。在这个例⼦中，因为包裹箭头函数的第⼀个普通函数是 a ，所以此
时的 this 是 window 。另外对箭头函数使⽤ bind 这类函数是⽆效的

2.最后种情况也就是 bind 这些改变上下⽂的 API 了，对于这些函数来说， this 取决
于第⼀个参数，如果第⼀个参数为空，那么就是 window 。

3.那么说到 bind ，不知道⼤家是否考虑过，如果对⼀个函数进⾏多次 bind ，那么上下⽂
会是什么呢？

let a = {}
let fn = function () { console.log(this) }
fn.bind().bind(a)() // => ?

如果你认为输出结果是 a ，那么你就错了，其实我们可以把上述代码转换成
另⼀种形式

// fn.bind().bind(a) 等于
let fn2 = function fn1() {
 return function() {
 return fn.apply()
 }.apply(a)
}
fn2()

可以从上述代码中发现，不管我们给函数 bind ⼏次， fn 中的 this 永
远由第⼀次 bind 决定，所以结果永远是 window

let a = { name: 'poetries' }
function foo() {
 console.log(this.name)
}
foo.bind(a)() // => 'poetries'

以上就是 this 的规则了，但是可能会发⽣多个规则同时出现的情况，这时
候不同的规则之间会根据优先级最⾼的来决定 this 最终指向哪⾥。

⾸先， new 的⽅式优先级最⾼，接下来是 bind 这些函数，然后是
obj.foo() 这种调⽤⽅式，最后是 foo 这种调⽤⽅式，同时，箭头函数的
this ⼀旦被绑定，就不会再被任何⽅式所改变。

总结:

(1)普通函数调用: 函数名()         ->  this指向window
(2)对象方法调用: 对象名.方法名()   ->  this指向对象
(3)构造函数调用: new 函数名()      ->  this指向new创建的实例对象

上下文调用方式:

1.call上下文调

function fn(a,b){
            console.log( this )
            console.log(a+b)
        }
        fn(1,2)//this指向window
        //函数名.call(修改的this,参数1,参数2,....)
        fn.call({name:'张三'},10,20)

2.apply上下文调用                //场景1:伪数组转成真数组

function fn(a,b){
            console.log(this)
            console.log(a+b)
        }
//函数名.apply(修改的this, 数组/伪数组 )
        //apply传参的时候会自动的遍历这个数组，然后按照循序逐一传参  a = [30,40][0] b=[30,40]
fn.apply({name:'李四'},[30,40])

3.bind上下文调用

//bind不会立即调用函数，而是得到一个修改this之后的新函数
function fn(a,b){
            console.log(this)
            console.log(a+b)
        }
let newFn = fn.bind({name:'王五'}) //这里如果传实参后,下面传参就无效了
        newFn(25,66)