es6箭头函数this问题
最近做vue的项目,发现中用了很多es6中的新特性,随后开始恶补es6,发现箭头函数这一简洁的函数写法,不过还是感觉不习惯,箭头函数的格式;
//有参数 var foo = n => console.log(n); var foo = function (n) { console.log(n); } // 没有参数 var foo = () => 1; var foo = function () { return 1; } // 多个参数 var foo = (n1,n2) => n1+n2; var foo = function (n1,n2) { return n1+n2; } //返回值多行要用 {} var foo = (n) => { if(typeof n == 'number') { return n+=1; } } var foo = function (n) { if(typeof n == 'number') { return n+=1; } }
//总结:返回值为单行的时候,可以省去return;
箭头函数中this是一个空对象,在node.js中测试可发现:
let foo = ()=> { console.log(this) // {} }
箭头函数上层还是箭头函数,那么就仍然没有找到,最终都没有找到的话,那就是window对象了。
var number = 100, log = console.log.bind("console"); var obj = { number: 10, print: ()=> { return ()=> { log(this); //window log(this.number); //100 } } }; obj.print()();
如果上层是function格式的函数,那么就会绑定到箭头函数的this
var number = 100, log = console.log.bind("console"); var obj = { number:10, print: function () { return () => { log(this); //obj log(this.number); //10 } } } obj.print()();
并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。
产生箭头函数的绑定,箭头函数的this不再多变,(根据声明时,所绑定的执行,而不是运行时的对象)
function函数this运行时绑定的理解: //代码段1
var number = 10; function foo () { console.log(this.number); }; var obj = { number:100, foo: foo }; obj.foo(); //100 //代码段2
var number = 10; var obj = { number:100, foo: function () { console.log(this.number) } } obj.foo() //100
function函数this是再代码运行时期绑定而不是在声明时期绑定的,而箭头函数是根据声明时绑定执行的,箭头函数的this不再多变