ES6箭头函数与普通函数的区别

Wesley13
• 阅读 712

箭头函数:

let fun = () => {
    console.log('lala');
}

普通函数

function fun() {
    console.log('lalla');
}

箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }和return。

箭头函数是匿名函数,不能作为构造函数,不能使用new

let FunConstructor = () => {
    console.log('lll');
}

let fc = new FunConstructor();

**结果:**报错 Uncaught TypeError: FunConstructor is not a consructor

箭头函数不绑定arguments,取而代之用rest参数...解决

//普通函数
function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]

//箭头函数
let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

function fun1(...theArgs) {
  console.log(theArgs.length);
}
fun1();  // 0
fun1(5); // 1
fun1(5, 6, 7); // 3

箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值

//例一:
var obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

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

箭头函数通过call()apply()方法调用一个函数时,只传入了一个参数,对 this 并没有影响。

箭头函数的 this 永远指向其上下文的 this,任何方法都改变不了其指向,如 call() , bind() , apply()

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj2.b(1));  // 11
console.log(obj2.c(1)); // 11

箭头函数没有原型属性

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

箭头函数不能当做Generator函数,不能使用yield关键字

点赞
收藏
评论区
推荐文章
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
菜园前端 菜园前端
1年前
JS难点:this 指向
原文链接:this指向分为两种情况,一种是普通函数中使用的this,另外一种是箭头函数中的this。普通函数this指向调用者。场景1javascriptfunctionsayHi()console.log(this)sayHi()//window这里的t
Wesley13 Wesley13
3年前
ES6新增内容(部分)
ES6新增内容(部分)一、两个声明变量的方法let、constlet:不能重复声明、有暂时性死区,不能提前访问、{}块级作用域。const:声明常量、声明之后不能被修改。二、箭头函数语法:(参数){表达式}箭头函数中this没有固定指向,一般指向宿主对象。
Wesley13 Wesley13
3年前
ES6箭头函数特点
1、语法简单constfunx1;constfun()1;constfun(x,y){1;returnxy;}2、内置return语句、单行代码返回当前代码的返回值、多行时返回undefined3、自动绑定this、this为上级的作用域
Wesley13 Wesley13
3年前
ES6 箭头函数
一、在es6中函数的定义和es5之间有明显区别。不需要关键字function来进行定义,使用来指向函数。不可以new也就是做构造函数以及没有arguments参数。箭头函数的this是在定义的时候确定指向这和es5不一样,es5是谁调用他,他就指向谁。1document.addEventListene
Wesley13 Wesley13
3年前
ES6特性总结(3)——函数的变化
前言es6中的一系列关于函数用法的变化是非常有趣的,在es6的新标准下,你可以更加轻便地使用函数,并且可以仿照面向对象编程的思想来使用函数,将函数转化为“类”。(这里的类加了引号,原因我们会在后面的学习中解释)下面就让我们来一起看一看es6下的函数有哪些有趣的变化。1.箭头函数箭头函数是es6下实现的一种新的函数书写方法。在过去的
Wesley13 Wesley13
3年前
go 的匿名函数和闭包
匿名函数匿名函数是指不需要定义函数名的一种函数实现方式。在Go语言中,函数可以像普通变量一样被传递或使用,这与C语言的回调函数比较类似。不同的是,Go语言支持随时在代码里定义匿名函数。匿名函数由一个不带函数名的函数声明和函数体组成,如下所示:!(https://
Wesley13 Wesley13
3年前
ES6新增的一些特性
1、let关键字,用来代替var的关键字,特点: 1、变量不允许被重复定义2、不会进行变量声明提升3、保留块级作用域中i的2、const定义常量,特点:1、常量值不允许被改变2、不会进行变量声明提升3、箭头函数  与普通函数的区别:1、书写上用代替了function         2、普通函数的this指向window而ES6
Stella981 Stella981
3年前
ES6中箭头函数与普通函数this的区别(转)
看到一篇别人的博客,对this的理解又加深了一些。普通函数中的this:1\.this总是代表它的直接调用者,例如obj.func,那么func中的this就是obj2.在默认情况(非严格模式下,未使用'usestrict'),没找到直接调用者,则this指的是window3.在严格模式下,没有直接调用者的函数中的thi
Wesley13 Wesley13
3年前
ES6中的箭头函数=>
ES6标准新增了一种新的函数:ArrowFunction(箭头函数)。为什么叫ArrowFunction?因为它的定义用的就是一个箭头:xxx相当于:function(x){returnxx;}箭头函数