前端-this的指向问题总结

本文是看了前端小姐姐的文章，想自己总结下，只是想为了自己看方面以后查阅，原文请参考嗨，你真的懂this吗？ps：小姐姐的文章很不错

1 默认绑定

在不应用其他绑定使用的默认规则,通常独立函数调用

   function bb(){
       console.log('Hello',this.name)
   }
   var name = 'ccc'
   bb()

在调用bb()时候，应用了默认绑定，this指向全局对象(非严格模式)，严格模式下，this指向undefined，undefined上没有this对象 在浏览器中结果是Hello,ccc 在node环境下运行结果是Hello,undefined 说白了就是定义一个函数, 在外面调用它， 那函数里面的this指向的是全局的就是函数外面定义的变量，不管有没有var

2 隐式绑定

函数调用是在对象上面触发的，形式是XXX.func(),譬如

    function sayHello() {
        console.log('Hello',this.name);
    }
    var person = {
        name:'aaa',
        sayHello:sayHello
    }
    var name="bbb";
    person.sayHello()

结果是Hello,aaa sayHello函数声明在外，严格说不属于person,但是在调用sayHello时，调用位置会使用person的上下文引用函数，隐式绑定把函数中的this由sayHello绑定到这个person对象上

有一种特殊情况

   function sayHi(){
      console.log('Hello,',this.name);
   }
   var person = {
       name:'aaa',
       sayHi:sayHi
   }
   var name = 'bb';
   vr Hi = person.sayHi;
   Hi();

打印结果是bb 因为这里Hi是指向了sayHi，没有调用，最后才被调用指向了最外面的 XXX.fn();fn()如果前面啥都没有，肯定不是隐式绑定 还有一种情况

   function sayHi() {
       cobsole.log('aaaa',this.name); 
   }
   var person1={
       name:'ccc',
       sayHi:function(){
         setTimeout(function(){
             console.log('Hello',this.name)
         })
       }
   }
   var person2 = {
       name:'Christina',
       sayHi:sayHi
   }
   var name="Wiliam"
   person1.sayHi();//Hello, Wiliam 默认绑定指向全局
   setTimeout(person2.sayHi,100);
   //Hello, Wiliam，person2.sayHi这里相当于person2.sayHi赋值给了一个变量然后在去调用
   setTimeout(function(){
       person2.sayHi()
   },200)//Hello, Christina

3 显示绑定

通过call,apply,bind的方式，显示的指定this所指向的对象(bind单独作为硬绑定讲解) call,apply和bind的第一个参数，就是对应函数的this所指向的对象，call和apply都会执行对应函数，bind方法不会

   function aa(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'YvetteLau',
    sayHi: sayHi
}
var name = 'Wiliam';
var Hi = person.sayHi;
Hi.call(person); //Hi.apply(person)