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

更新日期: 2017-11-07 阅读: 4.5k 标签: 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.箭头函数不能换行。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/60

相关推荐

ES6 Decorator_js中的装饰器函数

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

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

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

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

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

ES5和ES6对象导出和导入

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

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

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

ES6实践:Symbols及其使用—SitePoint

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

详解JavaScript模块化开发require.js

js模块化的开发并不是随心所欲的,为了便于他人的使用和交流,需要遵循一定的规范。目前,通行的js模块规范主要有两种:CommonJS和AMD

如何将ES6转换成ES5?

ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码

ES6的7个实用技巧

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

基于ES6的tinyJquery

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

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!