this指向（箭头函数）

以this的使用场景进行分类：

1.普通函数下，this 的指向

2.构造函数下，this 的指向

3.箭头函数下，this 的指向

普通函数下，this的指向

（1）函数的定义位置不影响其this指向，this指向只和调用函数的对象有关。

（2）多层嵌套的对象，内部方法的this指向离被调用函数最近的对象（window也是对象，其内部对象调用方法的this指向内部对象，而非window）。

（3）setTimeout & setInterval 对于延时函数内部的回调函数的this指向全局对象window

//时延函数的普通写法下的this指向
function Person() {  
    this.age = 0;  
    setTimeout(function() {
        console.log(this);
    }, 3000);
}
var p = new Person();//3秒后返回 window 对象

构造函数下，this 的指向

（1）构造函数中的this与被创建的新对象绑定。

箭头函数下，this 的指向

（1）箭头函数不绑定this，它会捕获其所在（即定义的位置）上下文的this值，作为自己的this值

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        this.age++;
    }, 3000);
}
var p = new Person(); //三秒之后age变为1

var adder = {
  base : 1,
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },
  addThruCall: function inFun(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };    
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3，因为箭头函数不绑定this，其内部的this并没有因为call() 而改变，其this值仍然为函数inFun的this值，指向对象adder

（2）以上的箭头函数都是在方法内部，总之都是以非方法的方式使用，如果将箭头函数当做一个方法使用会怎样呢？

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();  // undefined window{...}
obj.c();  // 10 Object {...}

作为方法的箭头函数this指向全局window对象，而普通函数则指向调用它的对象。

ps: 最近遇到的一个小坑：当字符串为空时，split（）返回一个包含一个空字符串的数组，而不是一个空数组，如果字符串和分隔符都是空字符串，则返回一个空数组。

最后编辑于：2018.10.29 19:06:04