ES6标准 Arrow Function(箭头函数=)(2)

var obj = { birth: 1996, getAge: function (year) { var b = this.birth; // 1996 var fn = (y) => y - this.birth; // this.birth仍是1996 return fn.call({birth:1990}, year); } }; obj.getAge(2018); // 22 ( 2018 - 1996)

由于this已经在词法层面完成了绑定,通过call或apply方法调用一个函数时,只是传入了参数而已,对this并没有什么影响 。因此,这个设计节省了开发者思考上下文绑定的时间。

3、箭头函数的特性

3.1 箭头函数没有 arguments

箭头函数不仅没有this,常用的arguments也没有。如果你能获取到arguments,那它

一定是来自父作用域的。

function foo() { return () => console.log(arguments) } foo(1, 2)(3, 4) // 1,2

上例中如果箭头函数有arguments,就应该输出的是3,4而不是1,2。

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

var foo = (...args) => { return args } console.log(foo(1,3,56,36,634,6)) // [1, 3, 56, 36, 634, 6]

箭头函数要实现类似纯函数的效果,必须剔除外部状态。我们可以看出,箭头函数除了传入的参数之外,真的在普通函数里常见的this、arguments、caller是统统没有的!

如果你在箭头函数引用了this、arguments或者参数之外的变量,那它们一定不是箭头函数本身包含的,而是从父级作用域继承的。

3.2 箭头函数中不能使用 new

let Person = (name) => { this.name = name; }; let one = new Person("galler");

运行该程序,则出现TypeError: Person is not a constructor

3.3 箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last; // 等同于 function full(person) { return person.first + ' ' + person.last; } full({first: 1, last: 5}) // '1 5'

3.4 箭头函数没有原型属性

var foo = () => {}; console.log(foo.prototype) //undefined

由此可以看出箭头函数没有原型。

另一个错误是在原型上使用箭头函数,如:

function A() { this.foo = 1 } A.prototype.bar = () => console.log(this.foo) let a = new A() a.bar() //undefined

同样,箭头函数中的this不是指向A,而是根据变量查找规则回溯到了全局作用域。同样,使用普通函数就不存在问题。箭头函数中不可加new,也就是说箭头函数不能当构造函数进行使用。

3.5 箭头函数不能换行

var func = () => 1; // SyntaxError: expected expression, got '=>'

如果开发中确实一行搞不定,逻辑很多,就加{},你就想怎么换行怎么换行了。

var func = ()=>{ return '来啊!互相伤害啊!'; // 1.加{} 2.加return }

4、箭头函数使用场景

JavaScript中this的故事已经是非常古老了,每一个函数都有自己的上下文。

以下例子的目的是使用jQuery来展示一个每秒都会更新的时钟:

$('.time').each(function () { setInterval(function () { $(this).text(Date.now()); }, 1000); });

当尝试在setInterval的回调中使用this来引用DOM元素时,很不幸,我们得到的只是一个属于回调函数自身

上下文的this。一个通常的解决办法是定义一个that或者self变量:

$('.time').each(function () { var self = this; setInterval(function () { $(self).text(Date.now()); }, 1000); });

但当使用箭头函数时,这个问题就不复存在了。因为它不产生属于它自己上下文的this:

$('.time').each(function () { setInterval(() => $(this).text(Date.now()), 1000); });

箭头函数的另一个用处是简化回调函数。

// 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x => x * x);

当然也可以在事件监听函数里使用:

document.body.addEventListener('click', event=>console.log(event, this));
// EventObject, BodyElement

5、总结

5.1 箭头函数优点

箭头函数是使用=>语法的函数简写形式。这在语法上与 C#、Java 8 、Python( lambda 函数)和 CoffeeScript 的

相关特性非常相似。

非常简洁的语法,使用箭头函数比普通函数少些动词,如:function或return。

() => { ... } // 零个参数用 () 表示。
x => { ... } // 一个参数可以省略 ()。
(x, y) => { ... } // 多参数不能省略 ()。

如果只有一个return,{}可以省略。
更直观的作用域和 this的绑定,它能让我们能很好的处理this的指向问题。箭头函数加上let关键字的使用,将会让我们javascript代码上一个层次。

5.2 箭头函数使用场景

箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下,例如用在map、reduce、filter的回调函数定义
中,另外目前vue、react、node等库,都大量使用箭头函数,直接定义function的情况已经很少了。
各位同学在写新项目的时候,要不断的琢磨箭头函数使用场景、特点,享受使用箭头函数带来的便利,这样才能更快地成长。

下面是廖雪峰网站的补充

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。

为什么叫Arrow Function?因为它的定义用的就是一个箭头:

x => x * x

上面的箭头函数相当于:

function (x) {
return x * x;
}

在继续学习箭头函数之前,请测试你的浏览器是否支持ES6的Arrow Function:


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/6a710ae46e37b67e616adb098b93d24c.html