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);                   //objlog(this.number);            //10} }  }obj.print()();

　　并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

　　产生箭头函数的绑定，箭头函数的this不再多变，（根据声明时，所绑定的执行，而不是运行时的对象）　

function函数this运行时绑定的理解：//代码段1var number = 10;
function foo () {console.log(this.number);
};var obj = {number:100,foo: foo
};obj.foo();     //100//代码段2var number = 10;
var obj = {number:100,foo: function () {console.log(this.number)}
}
obj.foo()    //100

　　function函数this是再代码运行时期绑定而不是在声明时期绑定的，而箭头函数是根据声明时绑定执行的，箭头函数的this不再多变

转载于:https://www.cnblogs.com/wlgz/p/7183729.html

es6箭头函数this问题相关推荐

ES6箭头函数中的this指向
1箭头函数中的this (1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this (2)箭头函数中的this指向 :访问上一个作用域的thi ...
es6 箭头函数 rest参数扩展运算符
Es6 箭头函数语法: 普通函数: fn=function(){} 箭头函数: fn=()=>{} 特性: this是静态的,this始终指向函数声明时所在作用域下的this的值(使用call ...
es6 箭头函数使用_如何使用ES6箭头功能使JavaScript易于阅读
es6 箭头函数使用 Arrow functions are the new fundamental building blocks of building modern web applicatio ...
es6箭头函数_【知识点】ES6箭头函数、箭头函数与普通函数的区别
作者:長安曹公子文章出处:ES6 - 箭头函数.箭头函数与普通函数的区别一.基本语法 ES6中允许使用箭头=>来定义箭头函数,具体语法,我们来看一个简单的例子: // 箭头函数 let fu ...
ES6箭头函数以及promise/async/await测试案例
ES6箭头函数的运用下面以一段代码解释 function one(){return 1 以上函数用箭头函数写步骤,参考下面代码 {}和里面的东西先删去 one = (里面写参数/无参数的里面为空)= ...
[OHIF-Viewers]医疗数字阅片-医学影像-ES6箭头函数(=)
[OHIF-Viewers]医疗数字阅片-医学影像-ES6箭头函数(=>) https://www.liaoxuefeng.com/wiki/1022910821149312/103154957 ...
什么时候不该使用es6箭头函数 1
从开始接触es6到在项目中使用已经有一段时间了,es6有很多优秀的新特性,其中最有价值的特性之一就是箭头函数,他简洁的语法以及更好理解的this值都非常的吸引我.但是新事物也是有两面性的,箭头函数有他 ...
Javascript/ES6箭头函数
Javascript/ES6箭头函数文章目录 Javascript/ES6箭头函数一.箭头函数是什么? 二.箭头函数与普通函数的区别三.箭头函数的使用 1.箭头函数是匿名函数,不能作为构造函数, ...
es6箭头函数(=)与展开特性运算符(...)的使用
2019独角兽企业重金招聘Python工程师标准>>> 箭头函数的几个写法 //当含有固定个参数的时候,es5写法 function test(a,b){ ..}//es6写法(es ...
es6箭头函数中this
普通函数: $scope.$on('$stateChangeSuccess',function(){this.list = this.getList();}); 箭头函数: $scope.$on('$ ...

es6箭头函数this问题

es6箭头函数this问题相关推荐

最新文章

热门文章