this指向全解

结论：函数中this总是指向调用它的对象（箭头函数除外、特殊情况除外）。

1. 对象字面量。

var name = "win"
var p = {
  name: "p",

  fn1: function() {
    console.log(this.name);

    return function() {
      console.log(this.name);
    }
  },

  fn2: function() {
    console.log(this.name);
    
    return () => {
      console.log(this.name);
    }
  },

  fn3: () => {
    console.log(this.name);

    return () => {
      console.log(this.name);
    }
  }
};

p.fn1()()  // p win
p.fn2()()  // p p
p.fn3()()  // win win

箭头函数内的this向上指向，直到遇上非箭头函数内this，此处可理解为css中绝对定位向上查找父级。

2. call改变this指向。

var name = "win"
var p = {
  name: "p",

  fn1: function() {
    console.log(this.name);

    return function() {
      console.log(this.name);
    }
  },

  fn2: function() {
    console.log(this.name);
    
    return () => {
      console.log(this.name);
    }
  },

  fn3: () => {
    console.log(this.name);

    return () => {
      console.log(this.name);
    }
  }
};
var p2 = { name: "p2" };

p.fn1.call(p2)();  // p2 win
p.fn1().call(p2);  // p  p2
p.fn2.call(p2)();  // p2 p2
p.fn2().call(p2);  // p  p
p.fn3.call(p2)();  // win win
p.fn3().call(p2);  // win win

call对箭头函数内的this是无效的，但可通过改变其向上指向的this(其父级)来改变。

3. 构造函数。

var name = "win";
var P = function(name) {
  this.name = name;
  this.fn = () => {
    console.log(this.name);
  };
  this.fn2 = function() {
    console.log(this.name);

    return () => {
      console.log(this.name);
    };
  }
};

P.prototype = {
  fn3: () => {
    console.log(this.name);
  }
};

var p = new P("p");
p.fn();     // p
p.fn2()();  // p p
p.fn3();    // win

• 在构造函数内，即使使用箭头函数，其内this也指向正确。
• 原型上使用箭头函数会导致this指向错误。

4. 复合例子。

var name = "win"
var p = {
  name: "p",

  o: {
    name: "o",
    fn: function() {
      console.log(this.name);

      return () => {
        console.log(this.name);
      }
    },

    fn2: () => {
      console.log(this.name);

      return () => {
        console.log(this.name);
      }
    },

    fn3: () => {
      console.log(this.name);
      
      return function() {
        console.log(this.name);
      }
    }
  }
};

p.o.fn()();         // o o
p.o.fn2()();        // win win
p.o.fn3()();        // win win
p.o.fn.call(p)();   // p p
p.o.fn2.call(p)();  // win win
p.o.fn3.call(p)();  // win win
p.o.fn().call(p);   // o o
p.o.fn2().call(p);  // win win
p.o.fn3().call(p);  // win o

5. 特殊情况。

var name = "win";
var p = {
  name: "p",
  fn: function() {
    console.log(this.name);

   return () => {
     console.log(this.name);
   }
  }
}

function fn(f) {
  f && f()
}

fn(p.fn)          // win
fn(p.fn.bind(p))  // p

// fn(p.fn)可看作如下转化
var fn2 = p.fn;
fn(fn2);

// 值得注意的是箭头函数this指向的是该函数定义时确定的this，与调用它时的对象无关
fn(p.fn()); // p p

总结：

• 箭头函数通俗的理解为其父级this指向，定义时。
• 一般函数this指向调用其的对象。
• 函数被当作其他函数参数时，应理解为有中间变量将函数独立出来，以函数的归属对象无关。