js this 指向(es5)和es6箭头函数this指向问题总结（邹文丰版）

 本文纯属自己结合网上文章总结，有问题和不同想法欢迎留言指正
/********************简单小例子********************/
 ????var test =function () {
 ???????console.log(this);
 ???};
 ???// test(); //window
/*****************************2***********************************/
 ???var test2 =function () {
 ???????console.log(this);
 ???????return function () {
 ???????????console.log(this)
 ???????}
 ???};
 ???var bb={
 ???????a:‘1‘,
 ???????cc:test2 //赋值类型还未执行
 ???};
 ???// bb.cc()(); // 1.obj ?2.window
 ???/*****************************3***********************************/
 ???var test3 =function () {
 ???????console.log(this);
 ???????return function () {
 ???????????console.log(this)
 ???????}
 ???};
 ???var bb3={
 ???????a:‘1‘,
 ???????cc:test3() //默认在最外层执行
 ???};
 ???bb3.cc(); // 1.window ?2.obj
 ???
 ???//test2 tes3 只是一个括号的差别，决定指向的调用者；

 ???/************普通函数例子*****************/
 ???var obj = {
 ???????birth: 1990,
 ???????getAge: function () {
 ???????????var b = this.birth;
 ???????????var that=this;
 ???????????console.log(this); ?//this指向obj
 ???????????return function () {
 ???????????????console.log(that);//that缓存保留在指向obj
 ???????????????console.log(this); ?//this指向window ?最终的调用者不是obj而是window；
 ???????????};
 ???????}
 ???};
 ???// obj.getAge()();//直接指向调用者“obj.getAge()”执行后就变成“（）”而“（）直接在最外层window上”

 ???/************箭头函数登入*****************/
 ???var obj2 = {
 ???????name:‘obj2‘,
 ???????birth: 1990,
 ???????getAge: function () {
 ???????????var b = this.birth; // 1990
 ???????????return () => {
 ???????????????var c=‘hehe‘;
 ???????????????console.log(this);//obj2
 ???????????????return () => {
 ???????????????????console.log(this) //obj2 箭头函数this始终指向最外层obj2；
 ???????????????}
 ???????????}
 ???????}
 ???};
 ???// obj2.getAge()()();

//结合两个例子箭头函数的设计更加合理的，this始终保持指向定义时候的obj2，传统的函数在这种情况就直接指向window，
// 个人感觉有点不合理，

/*************************普通构造函数***************************************/
function Fn(name,age){
 ???this.name=name;
 ???this.age=age;
 ???console.log(this); //通过new一个实例之后this指向会指向这个对象
 ???return function () {
 ???????console.log(this) ?//最终执行调用的还是window；不是new出来的对象
 ???};
}
 ???// var obj=new Fn(‘张飞‘,‘14‘); //this Fn
 ???// obj(); //this window


 ???/*******************箭头构造函数*********************************************/
 ???function Fn2(name,age){
 ???????this.name=name;
 ???????this.age=age;
 ???????console.log(this); //obj2
 ???????return () => {
 ???????????console.log(this) //obj2
 ???????????return () => {
 ???????????????console.log(this) //obj2
 ???????????}
 ???????}
 ???}
 ???// var obj2=new Fn2(‘张飞‘,‘14‘); //this指向obj2
 ???// obj2(); //this指向obj2

 ???// Fn2()()()；//如果构造函数直接当做普通函数来执行，那么全部指向最初的window

 ???//通过对比可以发现总结一下箭头函数很好的解决了this原来在函数内部指向不合理的情况。你只要记住箭头函数会继承最初
 ???//最外层定义的this