Javascript this 绑定

想要理解this，你可以先记住以下两点：

1：this永远指向一个对象；
2：this的指向完全取决于函数调用的位置；

this的绑定形式一共有如下四种

• 默认绑定
• 隐式绑定
• 显式绑定
• new 绑定

默认绑定：

故事1.1：里斯（this）到了天黑也没找到住所，这时候村长window大发慈悲的收留了他，于是里斯赖上了村长，绑定了他

例1:

function f(){
    console.log("this指向",this);
}
f()// 这时候打印出来发现，this指向了window

故事1.2：里斯（this）到了天黑也没找到住所，而且村里规定严格，不能随意收留人，这时候村长window也没辙了，于是里斯继续无家可归，谁也绑定不上

例2:

function f(){
   'use strict';
    console.log("this指向",this);
}
f()// 这时候打印出来发现，this是undefined

故事1.3：this不指向函数，this永远指向一个对象
例3:

function f () {
  // 我是被定义在函数内部的函数哦！
  function innerFire() {
      console.log(this === window)
  }
  innerFire(); // 独立函数调用
}
f();//true 

隐式绑定：

故事1：里斯租了个房子obj,this绑定了就是这个房子obj
例1:

var a=2
function f () {
      console.log(this.a)
}
  
var obj = {
      a: 1,
      f: f
  }
obj.f(); //1

故事2：里斯的房子就跟俄罗斯套娃一样，一层套一层，但是this只绑定最里层的房子
例2：

var obj = {
      a: 1,
      obj2: {
           a: 2,
           obj3: {
                a:3,
                getA: function () {
                    console.log(this.a)   
                 }
           }
       }
}
 
obj.obj2.obj3.getA();  // 输出3

里斯的房子丢失了
例3.1:隐式丢失

var a=2
function f () {
      console.log(this.a)
}
  
var obj = {
      a: 1,
      f: f
  }
var fGlobal = obj.f;
fGlobal() //2

例3.2:隐式丢失

var a=2
function f () {
      console.log(this.a)
}
  
var obj = {
      a: 1,
      f: f
  }
function otherF(fn){
   fn();
}
otherF(obj.f) //2

显式绑定(call和bind方法)：

里斯花钱买了个大房子

var obj = {
      a: 1,    // a是定义在对象obj中的属性
      fire: function () {
         console.log(this.a)
      }
}
 
var a = 2;  // a是定义在全局环境中的变量  
var fireInGrobal = obj.fire;
fireInGrobal();   // 输出2
fireInGrobal.call(obj); // 输出1

new绑定

执行new操作的时候，将创建一个新的对象，并且将构造函数的this指向所创建的新对象

function foo (a) {
     this.a = a;
}
 
var a1  = new foo (1);
var a2  = new foo (2);
var a3  = new foo (3);
var a4  = new foo (4);
 
console.log(a1.a); // 输出1
console.log(a2.a); // 输出2
console.log(a3.a); // 输出3
console.log(a4.a); // 输出4