javascript this 和 es6 箭头函数this 的理解以及call()、apply()、bind()的用法

普通函数，记住三点：

当函数作为对象的方法调用时，this就是该对象;

当函数作为单纯函数调用时，严格模式下，this是undefined，非严格模式下是全局对象，浏览器中就是window;

this不是变量，嵌套函数中的this不会从外层继承this值

1. var obj = {
2.    func: function() {},
3.    say: function () {
4.      var that = this;  
5.      setTimeout(function () {
6.        console.log(this)
7.        that.func()
8.        console.log(that)

9.      });
10.    }
11.  }
12.  obj.say();
13. 优雅做法把this绑定到对象上：
14. var obj = {  
    func: function() {},  
    say: function () {  
       // 此时的this就是obj对象  
      setTimeout(function () {  
        console.log(this)  
        this.func()  
      }.bind(this));  
    }  
  }  
  obj.say(); 
15. call()、apply()、bind() 都是用来重定义 this 这个对象的！

16. var name="小王",age=17;
var obj={
    name:"小张",
    objAge:this.age,
    myFun:function(){
        console.log(this.name+"年龄"+this.age);
    }
}
obj.objAge

17. obj.myFun()
18. -------华丽分割线-----------
19. var me={
20.     name:"文",
    
21.     age:25
    
22. }
23. obj.myFun.call(me) //相当于把this指向me这个对象上
24. obj.myFun.apply(me)
    
25. obj.myFun.bind(me)()
    
26. 以上出了bind 方法后面多了个 () 外 ，结果返回都一致！
    　　由此得出结论，bing 返回的是一个新的函数，你必须调用它才会被执行
27. function func(sex){
28.     console.log(sex)
    
29. }
30. func.call(me,"男")
    
31. func.apply(me,["男"])
    
32. func.bind(me,"男")()
    

1. window.val = 1;
2.  var obj = {
3.    val: 2,
4.    dbl: function () {
5.      this.val *= 2;
6.      val *= 2;
7.      console.log(val);
8.      console.log(this.val);
9.    }
10.  };
11.  // 说出下面的输出结果
12.  obj.dbl();
13.  var func = obj.dbl;
14.  func();

箭头函数： 没有它自己的this值，箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用。

箭头函数在定义之后，this 就不会发生改变了，无论用什么样的方式调用它，this 都不会改变；

function foo() {
  this.a = 1
  let b = () => console.log(this.a)
  b()
}
foo() 

function foo() {
  return () => console.log(arguments[0])
}
foo(1, 2)(3, 4) 

let a = {
  foo: 1,
  bar: () => console.log(this.foo)
}

a.bar()

let a = {
  foo: 1,
  bar: function() { console.log(this.foo) }
}

a.bar() 

function A() {
  this.foo = 1
}

A.prototype.bar = () => console.log(this.foo)

let a = new A()
a.bar()

答案在：

http://cnodejs.org/topic/584a207a3ebad99b336b1ede

什么时候应该使用箭头函数：

1、箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在map、reduce、filter的回调函数定义中；
2、不要在最外层定义箭头函数，因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；
3、如开头所述，箭头函数最吸引人的地方是简洁。在有多层函数嵌套的情况下，箭头函数的简洁性并没有很大的提升，反而影响了函数的作用范围的识别度，这种情况不建议使用箭头函数。

一句话就能讲明白 箭头函数没有this, 它里面的this按照变量查找的形式查找

function foo() {

	that = this

	this.arrow = () => { 
		console.log(this.name) 
	}

	this.simulationArrow = () => { 
		console.log(that.name) 
	}

	this.common = function() {
		console.log(this.name)
	}
}



var f = new foo()

arrow = f.arrow
simulationArrow = f.simulationArrow
common = f.common

f.name = "foo"
name = "global"

arrow() 
simulationArrow()  
common()