箭头函数

基本语法:

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----箭头函数的更多相关文章

  1. 前端框架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 ...

  2. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  3. 前端框架 vue 和 react 的区别

    前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...

  4. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  5. 前端框架 Vue 初探

    一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...

  6. 前端框架VUE——安装及初始化

    本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...

  7. 前端框架VUE

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  8. 【入门篇】前端框架Vue.js知识介绍

    一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...

  9. 前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化

    本项目利用  VueI18n 组件进行国际化,使用之前,需要进行安装 $ npm install vue-i18n 一.框架引入步骤: 1. 先在 main.js 中引入 vue-i18n. // 国 ...

随机推荐

  1. 003-pro ant design 前端权限处理-支持URL参数的页面

    前天需要增加MD5引用 https://www.bootcdn.cn/blueimp-md5/ 1.修改权限文件(CheckPermissions.js)使用自定义权限 2.配置异常页面 2.1.创建 ...

  2. strlen函数细节

    strlen所作的仅仅是一个计数器的工作,它从内存的某个位置(可以是字符串开头,中间某个位置,甚至是某个不确定的内存区域)开始扫描,直到碰到第一个字符串结束符'\0'为止,然后返回计数器值. 原型: ...

  3. js将一位数组分割成每三个一组

    var data = [   {name:'Liming',age:'25'},   {name:'Liming',age:'25'},   {name:'Liming',age:'25'},   { ...

  4. 112A

    #include <iostream> #include <string> #include <cctype> using namespace std; int m ...

  5. sort(排序) qsort(快排) bsearch(二分查找)

    sort: 一.对int类型数组排序 int a[100]; int cmp ( int a , int b ) //不必强制转换 { return a < b;//升序排列. } sort ( ...

  6. Case when then esle end

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex ' THEN '男' ' THEN '女' ELSE '其他' END --Case搜索函数 ' T ...

  7. 日期格式化(类似QQ邮箱中的邮件列表显示日期)

    日期格式化(类似QQ邮箱中的邮件列表显示日期) public static string FormatDateDisplay(DateTime _datetime) { var ts = DateTi ...

  8. phing

    javascript compress java -jar ./compiler.jar --js {from} --js_output_file {to}

  9. QT linux

    一. 如果你是服务器版的CentOS,我建议你安装一下图形界面 1. 首先安装X window: yum groupinstall 'X WindowSystem'2. 然后安装GNOME: yum ...

  10. arcgis api for flex 开发入门

    参考:http://blog.sina.com.cn/s/articlelist_2346836525_1_1.html 参考教程:https://www.jb51.net/books/81280.h ...