箭头函数

thursday 发布于2019-08-22 14:00 / 2848人阅读

摘要：的作箭头函数书写方式这里称作胖箭头，通常被当作关键字的简写。中的箭头函数引入了一个叫作词法的行为总结简单来说，箭头函数在涉及绑定时的行为和普通函数的行为完全不一致。箭头函数的绑定无法被修改。

1.ES6的作箭头函数书写方式：

var foo = a => {
  console.log( a );
};
foo( 2 ); // 2

这里称作“胖箭头”，通常被当作function 关键字的简写。

2.箭头函数有重要的作用(解决this作用域问题)，比较下面函数：

var obj = {
    id: "a",
    cool: function coolFn() {
        console.log( this.id );
    }
};
var id = "b"
obj.cool(); // a
setTimeout( obj.cool, 100 ); // b

问题在于cool() 函数丢失了同this 之间的绑定。（最好的解决方法也是最常用的解决方法是var self = this）
如下：

var obj = {
    count: 0,
    cool: function coolFn() {
        var self = this;
        if (self.count < 1) {
            setTimeout( function timer(){
                self.count++;
                console.log( "a" );
            }, 100 );
        }
    }
};
obj.cool(); // a
(self 只是一个可以通过词法作用域和闭包进行引用的标识符，不关心this 绑定的过程中发生了什么。)


ES6 中的箭头函数引入了一个叫作this 词法的行为：

var obj = {
count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout( () => { 
                this.count++;
                console.log( "a" );
            }, 100 );
        }
    }
};
obj.cool(); // a

总结：

简单来说，箭头函数在涉及this 绑定时的行为和普通函数的行为完全不一致。它放弃了所有普通this 绑定的规则，取而代之的是用当前的词法作用域覆盖了this 本来的值。因此，这个代码片段中的箭头函数并非是以某种不可预测的方式同所属的this 进行了解绑定，而只是“继承”了cool() 函数的this 绑定（因此调用它并不会出错）。箭头函数的绑定无法被修改。（new 也不行！）

解决的另一个办法：bind（）；

var obj = {
count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout( function timer(){
                this.count++; // this 是安全的， 因为bind(..)
                console.log( "a" );
            }.bind( this ), 100 ); 
        }
    }
};
obj.cool();//a

最后：无论你是喜欢箭头函数中this 词法的新行为模式，还是喜欢更靠得住的bind()，都需要注意箭头函数不仅仅意味着可以少写代码。它们之间有意为之的不同行为需要我们理解和掌握，才能正确地使用它们。

GPU云服务器云服务器箭头函数左右箭头箭头按钮箭头旋转

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

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

论普通函数和箭头函数的区别以及箭头函数的注意事项、不适用场景

摘要：第二种情况是箭头函数的如果指向普通函数它的继承于该普通函数。箭头函数的指向全局，使用会报未声明的错误。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。就是这种我们日常开发中一直在使用的API...

paulquei 2019-08-23 16:15 评论0 收藏0
ES6 - 箭头函数、箭头函数与普通函数的区别总结

摘要：但是因为箭头函数没有自己的，它的其实是继承了外层执行环境中的，且指向永远不会随在哪里调用被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用调用时会报错报错箭头函数没有自己的箭头函数没有自己的对象。这篇文章我们来了解一下ES6中的箭头函数。首先会介绍一下箭头函数的基本语法，因为基本语法比较好理解，我们用示例做简单介绍即可。之后，我们重点来讨论一下...

scola666 2019-08-23 16:32 评论0 收藏0
es6 - 箭头函数

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

13651657101 2019-08-26 11:46 评论0 收藏0
ES6—箭头函数（5）

摘要：因为它不产生属于它自己上下文的箭头函数的另一个用处是简化回调函数。箭头函数使用场景箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在的回调函数定义中，另外目前等库，都大量使用箭头函数，直接定义的情况已经很少了。 0.为什么会出现箭头函数？ 1.传统的javascript函数语法并没有提供任何的灵活性，每一次你需要定义一个函数时，你都必须输入function () {},这至少...

yanwei 2019-08-23 17:20 评论0 收藏0
ES6 箭头函数从了解到深入

摘要：有传闻说，箭头函数的语法，是受到了的影响，并且它与中的语法一样，共享上下文。箭头函数是新增加的一个特性。箭头函数没有自己的值，其值是通过继承其它传入对象而获得的通常来说是上一级外部函数的的指向。箭头函数 1. 简单的定义：胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全新特性。有传闻说，箭头函数的语法=>，...

Eminjannn 2019-08-20 16:37 评论0 收藏0
简单说 JavaScript的箭头函数

摘要：说明箭头函数本质还是函数，我们来看看他与中普通函数的区别，先看看写法上的区别。箭头函数会捕获其所在上下文的值，作为自己的值。箭头函数不可变。这些方法也无法改变箭头函数的指向。箭头函数不能用关键字来实例化对象，不然会报错。说明箭头函数本质还是函数，我们来看看他与JavaScript中普通函数的区别，先看看写法上的区别。 showImg(https://segmentfault...

Caizhenhao 2019-08-21 17:41 评论0 收藏0