前端框架VUE----箭头函数
箭头函数
基本语法:
ES6允许使用“箭头”(=>)定义函数
var f = a = > a //等同于
var f = function(a){
return a;
}
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 }; //多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
使用箭头函数注意点:
箭头函数有几个使用注意点。
(1)函数体内的this
对象,就是定义时所在的对象,而不是使用时所在的对象。
1 var name = '张三';
2 var person = {
3 name:'小马哥',
age:18,
4 fav:function(){
5 console.log(this)
6 console.log(this.name)
7 }
8 }
9
10 person.fav();
我们发现,打印的结果为
此时this指向的是使用它的对象,也就是person对象
var person2 = {
name:'小马哥',
age:18,
fav: ()=>{
// 当前this指向了定义时所在的对象(window)
console.log(this);
}
} person2.fav();
打印的结果:
使用箭头函数,它表示定义时所在的对象window。
再看一个例子吧!
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
} var id = 21; foo.call({ id: 42 });
// id: 42
上面代码中,setTimeout
的参数是一个箭头函数,这个箭头函数的定义生效是在foo
函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时this
应该指向全局对象window
,这时应该输出21
。但是,箭头函数导致this
总是指向函数定义生效时所在的对象(本例是{id: 42}
),所以输出的是42
。
(2)不可以使用arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
var person3 = {
name:'小马哥',
age:18,
fav: ()=>{
console.log(argument);
}
} person3.fav('把妹','把爷');
报出如下❎:
前端框架VUE----箭头函数的更多相关文章
- 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- 可能是目前最完整的前端框架 Vue.js 全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...
- 前端框架 Vue 初探
一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...
- 前端框架VUE——安装及初始化
本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...
- 前端框架VUE
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...
- 【入门篇】前端框架Vue.js知识介绍
一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...
- 前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化
本项目利用 VueI18n 组件进行国际化,使用之前,需要进行安装 $ npm install vue-i18n 一.框架引入步骤: 1. 先在 main.js 中引入 vue-i18n. // 国 ...
随机推荐
- Java的transient关键字(转)
Volatile修饰的成员变量在每次被线程访问时,都强迫从主内存中重读该成员变量的值.而且,当成员变量发生变化时,强迫线程将变化值回写到主内存.这样在任何时刻,两个不同的线程总是看到某个成员变量的同一 ...
- case关联表查询
select a.员工编号,b.`姓名`,b.`地址`,case when a.收入 is null then '没钱' when a.收入 < 2000 then '低收入'when a.收入 ...
- zabbix 监控 redis
redis 可以直接使用zabbix官方的模板 模板地址: https://github.com/blacked/zbx_redis_template redis 主机通过脚本把数据推送到zabbi ...
- pandas.query()
1. 查询 已知data: 查询概率等于0.4的所有行 问题所在:query后面只支持string形式的值,而"probability"==0.4返回的是一个bool类型,结果不是 ...
- python math random
很有用个的工具 值得好好看看,这是作者(python发明者)对于工作中使用到的大多数场景的提炼 //test.py 1 import math 2 3 print abs(-10) 4 print m ...
- iOS 设计模式-Block实现代理的逻辑
在A页面,点击跳转到B页面,B页面操作完,回到A页面,并刷新A页面的内容.典型的例子,就是在一个列表里,点击新增,跳到新增页面,新增完,把数据传回给列表页,并刷新列表页里的内容. 这个,我平时一般是通 ...
- 日期条控件 DateFieldControl
日期条控件 书:163 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns ...
- python number
一.number类型转换 int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float(x ) 将x转换到一个浮点数 complex(real ...
- C# - 匿名对象取值
在new出匿名对象的函数内可以直接调用该匿名对象的属性取值. 可是在其它函数就无法调用匿名对象的属性或方法. 这时,我们可以通过c#的反射机制取值: 文章出处:https://www.cnblogs. ...
- javaweb防止表单重新提交
一.前台验证 1.首先在from表单加一个隐藏域字段,设值为true.例如: <input type="hideen" name="tokenFlag" ...