箭头函数除了在写法上与传统的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}