【JavaScript】箭头函数与普通函数的区别

箭头函数除了在写法上与传统的function不同外，最主要的区别在于this的指向
.箭头函数的this基于词法作用域，而普通函数的this基于上下文。
通俗讲就是箭头函数的this一直指向编辑该函数时的作用域，而普通函数的this指向要基于调用它的上下文，看下面实例可能更容易理解

//定义一个全局变量counter
var counter = 2;
//obj_arrow对象中的func方法返回一个函数，还函数用箭头函数编写
var obj_arrow = {
	counter :1,
	func:function(){
		 return () => {
			console.log(this.counter);
			console.log(this);
		}
	}
}
//obj_normal对象中的func方法返回一个函数，还函数用普通函数编写
var obj_normal = {
	counter :2,
	func:function(){
		 return function(){
			console.log(this.counter);
			console.log(this);
		}
	}
}
var obj_test = {
	counter:3
}

//测试
//直接调用时obj_arrow与 obj_normal，其上下文是Window对象，由于obj_arrow.func()返回的函数是用箭头函数编
//写，它是基于词法作用域，其this不受其上下文的影响，this指向仍然是obj_arrow,故其输出
//的时1；而obj_normal是用普通函数编写，其基于上下文，所以this指向的Window，故其输出
//的时Window中的counter=2.
obj_arrow.func()() //输出1 与 obj_arrow
obj_normal.func()()//输出undefined 与 Window


//es6箭头函数： 它本身没有this，会沿着作用域向上寻找，直到global / window。
var obj_arrow = {
	counter :1,
	func:()=>{
			console.log(this.counter);
			console.log(this);
		}
}
obj_arrow.func()//输出undefined和window
obj_arrow.func.call({counter:2}) //输出undefined和window
obj_arrow.func.bind({counter:2})() //输出undefined和window

var obj_func = {
	counter :1,
	func:function(){
			console.log(this.counter);
			console.log(this);
		}
}
obj_func.func()//输出1和window
obj_func.func.call({counter:2})//输出2和{counter：2}
obj_func.func.bind({counter:2})()//输出2和{counter：2}

① es5普通函数：
1. 函数被直接调用，上下文一定是window(立即执行函数)
2. 函数作为对象属性被调用，例如：obj.foo()，上下文就是对象本身obj
3.通过new调用，this绑定在返回的实例上

const arrow_func = ()=>{console.log(this)}
const func  = function(){console.log(this)}
//bind()方法不会改变箭头函数的this指向
arrow_func() //window
func()//windwo
arrow_func.bind({a:3}) //window
func.bind({a:3}) //{a:3}