vue2.0函数(箭头函数)的this作用域
在做vue项目时用到了axios,但是发现axios请求之后的回调函数里this并不指向当前vue实例,从而导致浏览器报错。
出错代码及结果:
created : function(){
axios.get('static/data.json').then(function(res){
console.log(this) //undefined
this.user = res.data.user
})
}
(报错截图)
普通函数代码改版(正确):
created : function(){
var _this = this
axios.get('static/data.json').then(function(res){
console.log(this) //undefined
console.log(_this) //VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_this.user = res.data.user
})
}
created : function(){
axios.get('static/data.json').then((res) => {
console.log(this) //VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
this.user = res.data.user
})
}
箭头函数相当于匿名函数,并且简化了函数定义。看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。此时this在箭头函数中已经按照词法作用域绑定了。很明显,使用箭头函数之后,箭头函数指向的函数内部的this已经绑定了外部的vue实例了.
vue2.0函数(箭头函数)的this作用域的更多相关文章
- js中 函数声明/函数表达式/匿名函数/箭头函数/立即执行函数
函数声明: function add(a, b) { // ... } 1.顾名思义,声明一个函数, 用关键字 “function” 来告诉,这是一个函数. 2.任何地方,想用就可以拿过来使用 函数表 ...
- 函数——箭头函数&自执行函数(二)
一.箭头函数是在es6中添加的一种规范,它相当于匿名函数,简化了函数的定义. 1.语法 a.function用var,let,cost来表示: b.参数要写在第一个等号后面: 参数有多个,需要加一 ...
- ES6——函数-箭头函数
箭头函数: 1.普通函数 function 函数名(){...} 2.箭头函数 注意: 1)如果只有一个返回值,{}return可以省略: let arr = [12,5,8,99,33,14,26 ...
- vue2.0之render函数
虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪.请近距离看一下这行代码 ...
- es6 箭头函数(arrow function) 学习笔记
箭头函数有两个好处. 1.他们比传统函数表达式简洁. const arr = [1, 2, 3]; const squares = arr.map(x => x * x); // 传统函数表达式 ...
- python 全栈开发,Day94(Promise,箭头函数,Django REST framework,生成json数据三种方式,serializers,Postman使用,外部python脚本调用django)
昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: ...
- 关于es6箭头函数
1 基本用法 ES6 允许使用 “ 箭头 ” (=>)定义函数. var f = v => v; //上面的箭头函数等同于: var f = function(v) { return v ...
- ES6学习之箭头函数
ES6学习笔记--箭头函数 箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a= ...
- ES6新增语法和内置对象(let,const, Array/String/Set 扩展方法(解构赋值,箭头函数,剩余参数))
1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...
随机推荐
- 抽象 abstract 和 接口 interface。 java 的 堆 和 栈。 参数传递(基本类型和普通对象的区别)
package com.test; import com.test.Pro; //protected 修饰的成员只能在本包中和 继承该类的方法中使用 public abstract class Tes ...
- DataStage 八、清除日志
DataStage序列文章 DataStage 一.安装 DataStage 二.InfoSphere Information Server进程的启动和停止 DataStage 三.配置ODBC Da ...
- Spring Boot之初始化项目
最简单的从Spring官网下载 :地址 https://start.spring.io/ 下拉选择需要的Spring Boot版本 修改Group和Artifact 直接点击Generate Pro ...
- 2018.07.23[PA2015]Siano(线段树)
[PA2015]Siano 描述 Description 农夫Byteasar买了一片n亩的土地,他要在这上面种草. 他在每一亩土地上都种植了一种独一无二的草,其中,第i亩土地的草每天会长高a[i]厘 ...
- 前端学习—React—初出茅庐
React学习—初出茅庐 对与React的学习思路,首先React中用到了Class.let.const.以及modual(模块)的导入(import)和导出(export),而这些都是ECMAScr ...
- BZOJ 1003 物流运输 (dp + dijkstra)
1003: [ZJOI2006]物流运输 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 8672 Solved: 3678[Submit][Stat ...
- SSH整合 第五篇 struts2的到来
struts2的好处,web层的显示,同时Action类相当于MVC模式的C.整合进来的话,是通过与Spring整合,减少重复代码,利用IoC和AOP. 1.struts-2.5.2.jar 以上是s ...
- google-glog功能介绍
google-glog功能介绍 分类: 其它类型2011-08-19 10:06 6618人阅读 评论(0) 收藏 举报 cookiesgooglestreammodulemapreducenull ...
- C - 无间道之并查集 HihoCoder - 1066
输入 每个测试点(输入文件)有且仅有一组测试数据. 每组测试数据的第1行为一个整数N,表示黑叔叔总共进行的操作次数. 每组测试数据的第2~N+1行,每行分别描述黑叔叔的一次操作,其中第i+1行为一个整 ...
- hdu 5007
http://acm.hdu.edu.cn/showproblem.php?pid=5007 字符串处理 暴力 #include <cstdio> #include <cstdlib ...