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

时间: 2017-11-07阅读: 242标签: 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 中的一些技巧,使你的代码更清晰,更简短,更易读!

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

es6新特性之 class 基本用法

ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板。通过class关键字,可以定义类

基于ES6的tinyJquery

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

用 ES6 写全屏滚动插件

这篇文章将介绍如何使用原生 JS (主要使用 ES6 语法)实现全屏滚动插件,兼容 IE 10+、手机触屏,Mac 触摸板优化,支持自定义页面动画,压缩后 gzip 文件只有 2k。

ES6 Decorator_js中的装饰器函数

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

ES6 class创建对象和传统方法生成对象的区别

JS语言传统创建对象的方法一般是通过构造函数,来定义生成的,下面是一个使用function生成的例子。ES5是先新建子类的实例对象this,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数

ES6的7个实用技巧

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

ES6中let变量的特点,使用let声明总汇

ES6中let变量的特点:1.let声明变量存在块级作用域,2.let不能先使用再声明3.暂时性死区,在代码块内使用let命令声明变量之前,该变量都是不可用的,4.不允许重复声明

js解构赋值,关于es6中的解构赋值的用途总结

ES6中添加了一个新属性解构,允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。用途:交换变量的值、从函数返回多个值、函数参数的定义、提取JSON数据、函数参数的默认值...

JS 中的require 和 import 区别

require 和 import 区别:遵循的模块化规范不一样,出现的时间不同。Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。