es6中的箭头函数

UsherChen 发布于2019-08-20 15:45 / 380人阅读

摘要：箭头函数箭头函数相当于一个匿名函数同等于下面的匿名函数传参如果箭头函数含表达式就必须加和如果箭头函数不是一个参数，参数就必须加两个参数没有参数可变参数是个如果的值是一个对象需要加进行区分，防止冲突箭头函数中的由上下文决定写法写法错误

箭头函数（arrow function）

箭头函数相当于一个匿名函数

x => x * x;
//同等于下面的匿名函数
//x - >传参
//x * x  -> return

function(x) {
    return x * x;
}

如果箭头函数含表达式就必须加{...} 和 return

x => {
    if(x>10) {
        return x + x;
    }else {
        return x * x;
    }
}

如果箭头函数不是一个参数，参数就必须加()->(x,y)

//两个参数
(x,y) => x * y
//没有参数
() = > 1 + 4
//可变参数
var fn = (x,...rest) => {
    for(var i = 0;i < rest.length; i++) {
        x += rest[i]
    }
    return x;
}
//rest是个Array [4,5]
fn(1,4,5);//10

如果return的值是一个对象需要加()进行区分，防止冲突

var fn = x => { foo: x }
fn(3);//undefined

var fn = x => ({ foo: x })
fn(3);//Object {foo: 3}

箭头函数中的this由上下文决定

//es6 =>写法

var obj = {
    age: 18,
    fnc : function (x) {
        var fn = x => this.age + x;//this->obj
        return fn(x);
    }
}
obj.fnc(5)//23

//es5写法

//错误的写法
var obj = {
    age: 18,
    fnc : function (x) {
        var fn = function (x) {
            return this.age + x;//this->window
        } 
        return fn(x);
    }
}
obj.fnc(5)//NaN
//正确的写法
var obj = {
    age: 18,
    fnc : function (x) {
        var that = this;//this->obj
        var fn = function (x) {
            return that.age + x;
        } 
        return fn(x);
    }
}
obj.fnc(5)//23

如果用call()或者apply()调用箭头函数时，无法对this进行绑定（传入的第一个参数被忽略）：

var obj = {
    age: 18,
    fnc : function (x) {
        var fn = x => this.age + x;//this->obj
        return fn.call({age:20},x);//用call无法改变this的指向，箭头函数中的age依然等于18
    }
}
obj.fnc(5)//23

云服务器私有云 es6中的class es6中的promise 箭头函数 javascript中的函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82463.html

es6 - 箭头函数

摘要：也就是说箭头函数的的值不再根据调用时上下文确定，而是像普通变量那样根据定义时的作用域链进行查找。箭头函数中的依然要根据定义时的作用域链进行查找。知乎这篇文章对箭头函数的一些不适合的场景进行了总结，可以作为参考。 es6 - 箭头函数哇，箭头函数...，听起来好NB，但是如果你知道它是因为使用了=>这样类似箭头的符号，所以才叫箭头函数。瞬间感觉：呵，这名字起的...。 es6增加了...

13651657101 2019-08-26 11:46 评论0 收藏0
深入ES6：箭头函数

摘要：令人震惊的箭头函数引入了写入函数的新语法。使用箭头函数创建简单对象时有一个警告。代码因此被默默地解释为一个不执行任何操作并返回未定义的箭头函数。内部函数是一个箭头函数，所以它从封闭范围继承此函数。箭头从一开始就一直是JavaScript的一部分。第一个JavaScript教程建议在HTML注释中包装内联脚本。这会阻止不支持JS的浏览器错误地将JS代码显示为文本。你会写这样的东西： ...

MasonEast 2019-08-22 17:14 评论0 收藏0
ES6 系列之箭头函数

摘要：回顾我们先来回顾下箭头函数的基本语法。主要区别包括没有箭头函数没有，所以需要通过查找作用域链来确定的值。箭头函数并没有方法，不能被用作构造函数，如果通过的方式调用，会报错。回顾我们先来回顾下箭头函数的基本语法。 ES6 增加了箭头函数： let func = value => value; 相当于： let func = function (value) { return ...

hsluoyz 2019-08-26 11:58 评论0 收藏0
ES6箭头函数体中this指向哪里？

摘要：注意因为箭头函数内部的是指向外层代码块的最近的，例中的函数的，所以我们可以通过改变外层代码块的的指向从而改变箭头函数中的指向例中使用了函数的方法。一、this关键字小测试 ES6箭头函数体中的this指向哪里？在回答这个问题之前先来揣揣你对this关键字的了解程度：（让我们回到ES6之前）题： var obj = { a: function() { cons...

Half 2019-08-22 15:48 评论0 收藏0
带你入门 JavaScript ES6 (三)

摘要：上一章我们学习了遍历和扩展字符语法。本章我们主要学习中的箭头函数箭头函数更准确来说叫箭头函数表达式。箭头函数余普通函数功能相同，但语法差别比较大。带你入门 JavaScript ES6 (三) 本文同步带你入门 JavaScript ES6 (三)，转载请注明出处。上一章我们学习了 for of 遍历和扩展字符语法。本章我们主要学习 ES6 中的箭头函数箭头函数更准确来说叫箭...

刘福 2019-08-21 18:35 评论0 收藏0
【ES6系列】函数部分

摘要：正是因为它没有，所以也就不能用作构造函数。不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。不可以使用对象，该对象在函数体内不存在。箭头函数在之前ES5的版本中，我们定义一个函数的形式如下： function a() { // do something…… } 但是在ES6中，则新增了箭头函数的方式，ES6中允许使用箭头（=>）来定义函数。 () => { ...

enda 2019-08-22 16:15 评论0 收藏0