这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
箭头函数,若有了解过 coffeeScript 的同学,或许对此印象深刻,因为它可以让语法省略不少,特别是对于回调函数,会让代码更清晰简洁。下面让我们一起来学习学习 ES6 中的箭头函数。
ES6 可以使用 "箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器)。
一、语法
1. 具有一个参数的简单函数
- var single = a = >a single('hello, world') // 'hello, world'
2. 没有参数的需要用在箭头前加上小括号
- var log = () = >{
- alert('no param')
- }
3. 多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加
- var add = (a, b) = >a + b add(3, 8) // 11
4. 函数体多条语句需要用到大括号
- var add = (a, b) = >{
- if (typeof a == 'number' && typeof b == 'number') {
- return a + b
- } else {
- return 0
- }
- }
5. 返回对象时需要用小括号包起来,因为大括号被占用解释为代码块了
- var getHash = arr = >{
- // ...
- return ({
- name: 'Jack',
- age: 33
- })
- }
6. 直接作为事件 handler
- document.addEventListener('click', ev = >{
- console.log(ev)
- })
7. 作为数组排序回调
- var arr = [1, 9, 2, 4, 3, 8].sort((a, b) = >{
- if (a - b > 0) {
- return 1
- } else {
- return - 1
- }
- }) arr // [1, 2, 3, 4, 8, 9]
二、注意点
1. typeof 运算符和普通的 function 一样
- var func = a = >a console.log(typeof func); // "function"
2. instanceof 也返回 true,表明也是 Function 的实例
- console.log(func instanceof Function); // true
3. this 固定,不再善变
- obj = {
- data: ['John Backus', 'John Hopcroft'],
- init: function() {
- document.onclick = ev = >{
- alert(this.data) // ['John Backus', 'John Hopcroft']
- }
- // 非箭头函数
- // document.onclick = function(ev) {
- // alert(this.data) // undefined
- // }
- }
- }
- obj.init()
这个很有用,再不用写
,
- me
,
- self
了,或者
- _this
。
- bind
4. 箭头函数不能用 new
- var Person = (name, age) = >{
- this.name = name this.age = age
- }
- var p = new Func('John', 33) // error
5. 不能使用 argument
- var func = () = >{
- console.log(arguments)
- }
- func(55) //
对于 5,在 Firefox36 里测试是可以输出 55 的,貌似并没有这个限制
三、总结
以上就是关于 ES6 中箭头函数的全部介绍内容,希望对大家了 ES6 中的箭头函数能有所帮助。如果有疑问可以留言讨论。
来源: http://www.phperz.com/article/17/0522/332352.html