箭头函数

ES6标准新增了一种新的函数: Arrow Function(箭头函数);

# 箭头函数
x=> x*x
# 正常常熟,和上面等同
function(x){return x*x
}this

箭头函数看上去是匿名函数的一种简写, 但实际上, 箭头函数和匿名函数有个明显的区别: 箭头函数内部的this是词法作用域,由上下文确定;
eg

// 正常函数,里面的this是一个vue实例test:function(){console.log(this);},//箭头函数写法,里面的this是一个window,改不了test1:()=>{console.log(this);}

不应该使用箭头函数来定义method函数,理由是箭头函数绑定了父级作用域的上下文, 所有this将不会按照期望指向vue实例;

eg

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"><script src="https://unpkg.com/axios/dist/axios.min.js"></script><style type="text/css"></style></head><body><div id="app"><button type="button" @click="getData">获取数据</button><p>{{user}}</p><button type="button" @click="test">获取数据</button><button type="button" @click="test1">获取数据</button></div></body>
</html>
<script type="text/javascript">    var url = 'http://139.196.186.154:8080/';var vm = new Vue({el:'#app',data:{user:'123',                  },methods:{getData:function(){// axios里面的函数导致了this的实例不对了, 里面要用this修改对象的值会出错,需要单独定义个变量代替this的vue实例,然后用那个变量替代vue的实例来修改值 // var that = this;// axios.get(url).then(function(res){// 直接用 this,这个是window对象,不能直接改变vue对象的值// that.user = res.data.data[0];                   // console.log(that)// })//法二 用箭头函数, this就是指向的vue实例,建议用箭头函数, 否则需要用上面那种那种方法处理axios.get(url).then(res=>{                  this.user = res.data.data[0];                  console.log(this)})},// 正常函数,里面的this是一个vue实例test:function(){console.log(this);},//箭头函数写法,里面的this是一个window,改不了test1:()=>{console.log(this);}}});
</script>

axios箭头函数和this问题处理相关推荐

Vue相关面试问答TOP2（能不能在method中使⽤箭头函数、如何定义组件的data、v-if 和 v-show的区别、computed、watch、methods的区别、axios的特点....）
1.能不能在method中使⽤箭头函数? 理论上可以使⽤,但是我不会使⽤,因为箭头函数中的this的指向与⼀般函数不同⼀般函数执⾏调⽤它的对象 ...
Java箭头函数,lambda函数
Java箭头函数,lambda函数 lambda表达式实质就是一种语法糖,(建议尽量不要使用lambda表达式,代码太简洁,难懂,难以调试) lambda表达式的简单例子: 不需要参数,返回5 ()- ...
es6箭头函数(=)与展开特性运算符(...)的使用
2019独角兽企业重金招聘Python工程师标准>>> 箭头函数的几个写法 //当含有固定个参数的时候,es5写法 function test(a,b){ ..}//es6写法(es ...
ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
es6箭头函数中this
普通函数: $scope.$on('$stateChangeSuccess',function(){this.list = this.getList();}); 箭头函数: $scope.$on('$ ...
JavaScript 初学者必看“箭头函数”
译者按: 箭头函数看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 本文采用意 ...
ES6新特性（函数默认参数，箭头函数）
ES6新特性之函数参数的默认值写法和箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
ES6 箭头函数易出错细节
箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或 new.target. 箭头函数基本语法 (参数1, 参数2, -, 参数N) => { 函数声明 ...
es6箭头函数this问题
最近做vue的项目,发现中用了很多es6中的新特性,随后开始恶补es6,发现箭头函数这一简洁的函数写法,不过还是感觉不习惯,箭头函数的格式: //有参数var foo = n => consol ...

axios箭头函数和this问题处理

箭头函数

eg

axios箭头函数和this问题处理相关推荐

最新文章

热门文章