javaScript中this基本绑定规则

在javaScript 中 this指向在不同的地方进行使用时，表现是各不相同的，但在大多数情况下，函数的调用方式决定了 的 值。
因为 this 是在运行时被绑定的，而不是在创建时绑定的，所以this 的指向跟函数所处的位置没有关系的，而是跟 有关系。

// 直接调用这个函数 ,this指向windonw
function foo(){
  console.log(this)
}
foo()
// 创建一个对象进行调用 ， this 指向obj
var obj = {
  name:'huai',
  foo:foo
}
obj.foo()

// 使用.apply() 或者.call()进行调用, this指向abc
foo().apply('abc')

（一）：this绑定的四种规则

function foo(){
  console.log(this)
}
//独立函数调用的时候（默认绑定）并且没有调用主题 this 指向window
foo()// foo()为独立调用

//
function foo1(){
  console.log(this)
}
function foo2(){
  console.log(this)
  // 函数中被独立调用
  foo1() 
}
// 独立函数调用
foo2()  // windonw

var obj ={
  name:'huai',
  foo:function(){
    console.log(this)
  }
}

var bar = obj.foo;
// 独立函数调用，且没有调用主题
bar()  // windonw

2.

  var obj ={
      name:'huai',
      foo:function(){
      console.log(this)
      }
  }
// 如果直接使用 obj.foo() 进行调用的话，当前算隐式绑定（obj是调用主题），所以this 则指向obj
obj.foo();
(obj.foo)(); 

3.

// 显示绑定下，this指向传入值
function foo(){
  console.log(this)
}

// 使用 .apply()
foo.apply(‘huai’)   // this指向 huai

// 使用 .call()
foo.call('huai') //this指向 huai

//.apply()和 .call() 不同之处   apply()
// 1. apply() 只能传入两个参数，第一个参数为this指向，第二个参数则为数组 []。 如 foo.apply('huai',[1,2,3....])
// 2. call() 可以传入n个参数，但第一个参数为this指向

// 使用.bind() 进行赋值，被赋值者this则永远指向 传入参数 
var bar  = foo.bind('huai');
bar()    // 当前为独立调用，但之前已被显示绑定所以this指向huai

4.

// new 创建一个全新的对象，这个新对象会执行prototype原型连接，这个新对象会绑定到函数调用的this 上，如果这个函数没有其他对象，表达式则则返回一个新的对象
function person(name,age){
  this.name = name;
  this.age = age;
}
var newPerson = new person('huai',18);
console.log(newPerson.name,newPerson.age)

（二）：this绑定的优先级

1.new > 显示绑定（aplly(),call(),bind()）> 隐式绑定 > 默认绑定

function foo(){
  console.log(this)
}

var obj ={
  name:'obj',
  foo:foo
}
// 默认绑定：this指向 window
foo()   //windonw
// 隐式绑定
obj.foo()  // obj
// 因为apply 是显示绑定：显示绑定优先级高于隐式绑定：所以this指向 apply
obj.foo().apply('apply')  //apply ,call ,bind  

function foo(){
  console.log(this)
}
var obj={
  name:'obj',
  foo:foo.apply('obj')
}
// new优先级最高
var newObj = new obj.foo()  // new 

（三）：this 指向的特殊情况

1.如果 apply() 、 bind() 、 call(), 参数 为 null 或者 undefined 时， 这时this 的指向 是window

// apply() .call()  .bind() 把this 指向 null undefined 时 ，this指向window 
function foo(){
  conso.log(this)
}  
foo.apply(null);  //window
foo.apply(undefined);  // window

2.间接调用的情况下

var obj ={
  name:'obj',
  foo:foo
}

var bar = {
  name:'bar'
};
// ()() 立即执行函数
(bar.foo = obj.foo)()；  // this 指向 bar

（四）：当前的函数为箭头函数时 ：()=>{}

// 箭头函数中不绑定this指向，而是根据外部作用域来决定this 的
vr obj={
  data:[],
  foo:function(){
    // 箭头函数没有进行this绑定，所以向上部作用域寻找，又因为 隐式调用了 foo，所以this执行了obj,s
    setTimeout(()=>{
        var result = [10,20,30]
        this.data=result
    }，2000)
  }
}
// 隐式调用，this指向 obj
obj.foo()