[TOC]
>[success] # 箭头函数
~~~
'箭头函数'与'普通函数'的区别：
1. 没有'this'、'super'、'arguments'、'new.target'，使用'箭头函数'时只能用'剩余参数'和'具名参数'
来代替'arguments'
2. 不能被'new'调用，'箭头函数'没有'Constructor'方法，因为不能用作'构造函数'
3. 没有'prototype'属性
4.不能更改'this'
5. 不允许重复的'具名参数'，'传统函数'是可以传多个'同名'的'形参',但是'引用最后一个'重名参数
~~~
<br/>
>[success] ## 箭头函数语法
~~~
1. '无参数'需要写一个'空括号'
2. '单参数'可以不写括号，如果不写'{ }'会自动'return'
3. '多参数'要跟'传统函数'一样有'括号包裹参数'
~~~
<br/>
>[success] ### 无参数
~~~
let getName = () => "Nicholas"
等同于：
var getName = function() {
return "Nicholas"
}
~~~
<br/>
>[success] ### 单个参数
~~~
let reflect = value => value
等同于：
let reflect = function(value) {
return value
}
~~~
<br/>
>[success] ### 多个参数
~~~
let sum = (num1, num2) => num1 + num2
等同于：
let sum = function(num1, num2){
return num1 + num2
}
~~~
<br/>
>[info] ### 箭头函数，简写需要注意
~~~
'箭头函数'简写时候虽然说可以代替'传统函数'的'return'，但是返回数据的是'对象'的时候需要'加括号'
~~~
~~~
let getTempItem = id => ({ id: id, name: "Temp" })
等同于：
var getTempItem = function(id) {
return {
id: id,
name: "Temp"
}
}
~~~
<br/>
>[success] ## 创建自执行函数
~~~
自执行函数，创建即调用，
使用'传统函数'时， (function(){/*函数体*/})() 与 (function(){/*函数体*/}()) 这两种方式都是可行的。
但若使用'箭头函数'，则只有下面的写法是有效的： (() => {/*函数体*/})()
~~~
<br/>
>[success] ### ES5创建自执行函数写法
~~~
let person = function (name) {
return {
getName: function () {
return name
}
}
}('呵呵哒')
console.log(person.getName()) // '呵呵哒'
~~~
<br/>
>[success] ### ES6创建自执行函数写法
~~~
let person = ((name) => {
return {
getName: function () {
return name
}
}
})("呵呵哒")
console.log(person.getName()) // '呵呵哒'
~~~
<br/>
>[success] ## 无 this 绑定
~~~
下面这段代码会报错，因为'PageHandler.init()'方法中又创建了一个'监听事件方法'，并且在这个方法里使用
了'this.doSomething()'方法，这里的'this'实际上是'document'，'this'指向不对，所以会报错
~~~
~~~
let PageHandler = {
id: "123456",
init: function () {
document.addEventListener("click", function (event) {
console.log(this === document) // true
this.doSomething(event.type) // 错误
}, false)
},
doSomething: function (type) {
console.log(`我的事件是${ type }，我的id是${ this.id }`)
}
}
PageHandler.init()
~~~
<br/>
>[success] ### ES5解决this指向问题
~~~
'ES5'可以通过'bind()'方法来修改this，以达到好用的效果，但是'bind()'方法会创建一个'新函数'，为了
避免额外创建一个函数，修正此代码的更好方式是使用'箭头函数'。
~~~
~~~
let PageHandler = {
id: "123456",
init: function () {
document.addEventListener("click", function (event) {
console.log(this === document) // false
this.doSomething(event.type)
}.bind(this), false) // 在方法的后面加了bind方法
},
doSomething: function (type) {
console.log(`我的事件是${ type }，我的id是${ this.id }`)
}
}
PageHandler.init() // 我的事件是click，我的id是123456
~~~
<br/>
>[success] ### ES6解决this指向问题
~~~
'ES6'可以通过'箭头函数'的形式来解决此问题
~~~
~~~
let PageHandler = {
id: "123456",
init: function () {
document.addEventListener("click", event => this.doSomething(event.type) , false)
},
doSomething: function (type) {
console.log(`我的事件是${ type }，我的id是${ this.id }`)
}
}
PageHandler.init() // 我的事件是click，我的id是123456
~~~
<br/>
>[warning] ### 箭头函数不可以new
~~~
'箭头函数'不可以当做'构造函数'使用，不可以'new',因为'箭头函数'没有'Constructor'属性和'prototype'
属性，同样'箭头函数'也不可以使用'call()' 、 'apply()' 或 'bind()' 方法来改变其 'this' 值。
~~~
~~~
let myType = () => { },
object = new MyType() // 错误：你不能对箭头函数使用 'new'
~~~
<br/>
>[success] ## 箭头函数与数组方法
~~~
很多'ES5'的'数组方法'都可以使用'箭头函数'的方式来代替，例如'forEach'、'filter'、'map'、'some'...
~~~
传统数组方法写法：
~~~
let result = values.sort(function (a, b) {
return a - b
})
~~~
箭头函数数组方法写法：
~~~
let result = values.sort((a, b) => a - b)
~~~
<br/>
>[success] ## 没有 arguments 绑定
~~~
下面的例子实际上是做了一个'闭包',在'返回'的函数中使用'test'方法的第一个参数。
~~~
~~~
function test() {
return () => arguments[0]
}
let arrowFunction = test(5)
console.log(arrowFunction()) // 5
~~~
<br/>
>[success] ## 识别箭头函数
~~~
let comparator = (a, b) => a - b
console.log(typeof comparator) // "function"
console.log(comparator instanceof Function) // true
~~~
~~~
你仍然可以对箭头函数使用 'call()' 、'apply()'与 'bind()' 方法，虽然函数的'this'绑定并不会受影响。
这里有几个例子：
let sum = (num1, num2) => num1 + num2
console.log(sum.call(null, 1, 2)) // 3
console.log(sum.apply(null, [1, 2])) // 3
// bind方法创建一个新的函数
let boundSum = sum.bind(null, 1, 2)
console.log(boundSum()) // 3
~~~
~~~
'call'和'apply'以及'bind'后面的是'sum'方法的参数，他们三个方法的不同：
1. 'call'的第二个参数是'正常传参'
2. 'apply'的第二个参数是以'数组'的形式
3. 'bind'是虽然也可以改变'this'指向，它是'创建一个新的函数'，第二个参数是'正常传参'
~~~
- Javascript基础篇
- Array数组
- 数组插入值
- filter()
- forEach()
- push()
- pop()
- unshift()
- shift()
- valueOf()
- 面向对象思想
- Javascript 面向对象编程（一）：封装
- Javascript面向对象编程（二）：构造函数的继承
- Javascript面向对象编程（三）：非构造函数的继承
- 解构
- 数组的解构赋值
- 对象的解构赋值
- 函数参数解构
- 字符串的解构赋值
- 数值和布尔值的解构赋值
- 圆括号问题
- 字符串.
- split()
- charAt()
- charCodeAt()
- concat()
- indexOf()
- lastIndexOf()
- match()
- replace()
- includes()
- 初识递归
- 渲染ul-li树形结构
- 异步函数解决方案
- 1. callback回调函数
- 2. ES6 - Promise
- JavaScript高级程序设计（书）
- 在html中使用JavaScript
- script标签的位置
- 延迟脚本
- 异步脚本
- <noscript>元素
- 基本概念
- 严格模式
- 变量详解
- 数据类型
- typeof操作符
- undefined类型
- Null类型
- Boolean类型
- Number类型
- 深入了解ES6（书）
- var 、let 、 const
- 字符串与正则表达式
- 字符串
- 正则表达式
- 函数
- 函数形参默认值
- 使用不具名参数
- 函数构造器的增强能力
- 扩展运算符
- name属性
- 明确函数的多重用途
- 块级函数
- 箭头函数
- 尾调用优化
- 扩展的对象功能
- 对象类别
- 对象字面量语法的扩展
- ES6对象新增方法
- 重复的对象属性
- 自有属性的枚举顺序
- 更强大的原型
- 解构：更方便的数据访问
- 为什么要用解构？
- 对象解构
- 数组解构
- 混合解构
- 参数解构
- Symbol与Symbol属性
- 创建Symbol
- Symbol的使用方法
- Symbol全局私有属性
- Symbol与类型强制转换
- Symbol属性检索
- Symbol的一些构造方法
- Set集合与Map集合
- Set集合
- Weak Set集合（弱引用Set集合）
- Map集合
- JS标准内置对象
- Object 构造函数及属性
- Object 构造方法
- Symbol 内建对象类的函数及属性
- Set 构造函数及属性
- Weak Set 构造函数及属性
- JS杂项
- 类数组对象
- Class类的理解和使用