关于ES6中箭头函数this和普通函数this指向

关于ES6中箭头函数this和普通函数this指向

普通函数中的this:

1. this代表他的直接调用者，例如obj.func,那么func的this就是obj
2. 在默认情况下（非严格模式），没直接找到调用者，则this指的是window
3. 在严格模式下,没有直接调用者的函数中的this是 undefined
4. 使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this

默认指向在定义他时，他所处的对象，而不是执行时的对象，定义它的时候可能环境是window(即继承父级的this)
##总结##
普通函数中的this表示调用此函数时的对象，箭头函数里面的this会继承自外部的this，普通函数中的this并不会向上继续找对象，箭头函数中会往上寻找this，直到找到所代表的this为止
箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
普通函数的this指向调用它的那个对象。

实例

示例一

<script>
	var obj = {
		say: function () {
    			console.log(this)
				}
		}
	obj.say();
</script>

结果为window
匿名函数，say函数没有默认的宿主对象，所以默认this指向window
如何使用这个对象的引用？
用一个 变量提前把正确的 this引用保存 起来, 我们通常使用that = this, 或者 _this = this来保存我们需要的this指针!

<script>
  	var obj = {
    func: function() {},
    say: function () {
      var that = this;   //此时的this就是obj对象
        console.log(this)
        that.func()
    }
  }
  obj.say();
</script>

结果为obj

示例二

window.val = 1;
var obj = {
  val: 2,
  dbl: function () {
    this.val *= 2;
    val *= 2;
    console.log(val);
    console.log(this.val);
  }
};
obj.dbl(); 
var func = obj.dbl;
func();

输出 2 4 8 8
<1> 12行代码调用
val变量在没有指定对象前缀,默认从函数中找,找不到则从window中找全局变量
即 val *=2 就是 window.val *= 2
this.val默认指的是 obj.val ;因为 dbl()第一次被obj直接调用
<2>14行代码调用
func() 没有任何前缀,类似于全局函数,即 window.func调用,所以
第二次调用的时候, this指的是window, val指的是window.val
第二次的结果受第一次的影响

示例三.在严格模式下的this

<script>
function test() {
    'use strict';
    console.log(this);
}
test();
</script>

结果是：undefined

示例四.箭头函数中的this

<script>
  var obj = {
    say: function () {
        console.log(this)
    }
  }
  obj.say(); // obj
</script>

此时的this是定义它的对象，即继承父级的this,obj调用了say()方法，故父级中的this指的是obj,而非window

示例五

<script>
  var obj = {
    say: function () {
      var f1 = () => {
        console.log(this); // obj
        setTimeout(() => {
          console.log(this); // obj
        })
      }
      f1();
    }
  }
  obj.say()
</script>

结果：都是obj
f1继承父级this指代的obj，不管f1有多层箭头函数嵌套，都是obj.

示例六

<script>
  var obj = {
    say: function () {
      var f1 = function () {
        console.log(this);    // window, f1调用时,没有宿主对象,默认是window
        setTimeout(() => {
          console.log(this); // window
        })
      };
      f1();
    }
  }
  obj.say()
</script>

结果：window,window
第一个this：f1调用时没有宿主对象，默认是window
第二个this:继承父级的this,父级的this指代的是window.父级为say(),this指代的是window