es6 箭头函数的使用总结,带你深入理解js中的箭头函数

时间: 2017-11-07阅读: 479标签: es6

箭头函数是ES6中非常重要的性特性。它最显著的作用就是:更简短的函数,并且不绑定this,arguments等属性。它最适合用于非方法函数,并且它们不能用作构造函数。

1.箭头函数的短语法,当单条语句返回时,可省略{}和return
var f = v => v;
// 等同于
var f = function(v) {
    return v;
}

var f = () => 5;
// 等同于
var f = function() {
    return 5;
}

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
    return num1 + num2;
}

​注意的是:上面的写法都是匿名函数来使用的,因此:箭头函数作为匿名函数,是不能作为构造函数的,不能使用new


2.不绑定this

在箭头函数出现之前,每个新定义的函数都有它自己的 this值(在构造函数的情况下是一个新对象,在严格模式的函数调用中为 undefined,如果该函数被称为“对象方法”则为基础对象等)。This被证明是令人厌烦的面向对象风格的编程。箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值。例如:

function fn(){
  this.num = 0;
  let s=setInterval(() => {
    if(this.num<10){
    	this.num++;
    }else{
    	console.log(this.num);
    	clearInterval(s);
    }
  }, 1000);
}
var f=new fn();//10秒后输出10

上面的例子可以看出,箭头功能不会创建自己的this;它使用封闭执行上下文的this值。setInterval的函数内的this与封闭函数中的this值相同。如果在一个对象中使用的时候,箭头函数中的this就为对象默认环境中的window对象了。例如:

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); //undefined
    console.log(this); //window
  },
  c:function() {
    console.log(this.a); //10
    console.log(this); //obj{...}
  }
}
obj.b(); 
obj.c();


3.使用call()和apply()调用

由于 this 已经在词法层面完成了绑定,通过 call() 或 apply() 方法调用一个函数时,只是传入了参数而已,对 this 并没有什么影响。

var adder = {
  base : 1,
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },
  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };       
    return f.call(b, a);
  }
};
console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2(而不是3 )



4.不绑定arguments

箭头函数不绑定arguments,取而代之用rest参数…解决,例如:

var fn = (a)=>{
  console.log(arguments); 
}
fn(1)
//ReferenceError: arguments is not defined

我们应该用rest参数的形式

var fn = (...a)=>{ //...a即为rest参数
  console.log(a);
}
fn(2)//[2]


5.使用prototype属性

箭头函数没有原型属性

var fn = () => {};
console.log(fn.prototype); // undefined


说明:

1.箭头函数的this永远指向其上下文的 this。

2.箭头函数不能使用new来为作为构造器。

3.箭头函数没有prototype属性。

4.箭头函数不绑定自己的this,arguments,super或 new.target。

5.箭头函数不能当做Generator(生成器)函数。

6.不能使用yield关键字(除非是嵌套在允许使用的函数内)。  

7.箭头函数不能换行。


ES6实践:Symbols及其使用—SitePoint

symbol(符号)是一种新的原始数据类型,一个确保不会和其它符号冲突的唯一令牌。从这个意义上讲,你可以把符号看作是一种UUID(通用唯一识别码)。 让我们看看符号是如何工作的,以及我们能用它做些什么。

es6中const定义的属性是否可以改变_为什么有人说const并非一定为常量

const是用来定义常量的,而且定义的时候必须初始化,且定义后不可以修改。const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。

ES5和ES6对象导出和导入

如果模块中使用 export default {},只能通过 import 对象名称 from 模块路径 ,不能通过 import {对象名称} from 模块路径。如果使用 import {对象名称} from 模块路径 导出具体某个对象或者方法名称

在使用es6语法class的时候,babel到底做了什么?

自从有了webpack之后,我们这些jscoder似乎得到了前所未有的解放,箭头函数,对象解构,let,const关键字,以及class、extends等等,webpack会帮我们把这些es6代码转换成浏览器能够识别的es5代码,那么有多少人真正的看过,babel转换之后的代码呢?

使用ES6让你的React代码提升到一个新档次

ES6使您的代码更具表现力和可读性。而且它与React完美配合!现在您已了解更多基础知识:现在是时候将你的ES6技能提升到一个新的水平!嵌套props解构、 传下所有props、props解构、作为参数的函数、列表解构

es6中新增的字符串方法

es6中新增的字符串方法:字符串模板用法${变量名}、字符串查找方法string.includes(要找得字符串)、检查字符串是否已xxx开头、字符串重复方法string.repeat(次数)、字符串填充string.padStart

ES6 中的一些技巧,使你的代码更清晰,更简短,更易读!

ES6 中的一些技巧:模版字符串、块级作用域、Let、Const、块级作用域函数问题、扩展运算符、函数默认参数、解构、对象字面量和简明参数、动态属性名称、箭头函数、for … of 循环、数字字面量。

基于ES6的tinyJquery

Query作为曾经Web前端的必备利器,随着MVVM框架的兴起,如今已稍显没落。用ES6写了一个基于class简化版的jQuery,包含基础DOM操作,支持链式操作...

ES6 Decorator_js中的装饰器函数

ES6装饰器(Decorator)是一个函数,用来修改类的行为 在设计阶段可以对类和属性进行注释和修改。从本质上上讲,装饰器的最大作用是修改预定义好的逻辑,或者给各种结构添加一些元数据。

ES6的7个实用技巧

ES6的7个实用技巧包括:1交换元素,2 调试,3 单条语句,4 数组拼接,5 制作副本,6 命名参数,7 Async/Await结合数组解构