等于说, 只保留了函数的参数和返回. 省略 function 和 return.
写法:
(形参) => {statement;}
=> 等同于 return.
01, 参数:
01, 当只有一个参数时, 可以省略参数外面的圆括号 (). 可以省略结尾的分号.
简化为 Identifier => Expression
02, 当有多个参数, 或没有参数, 或 REST 参数和参数默认值, 或解构参数的函数, 都需要用圆括号将参数括起来.(记住第一个情况就好了)
03, 可以使用 REST 参数和参数默认值.
02,statement: 语句.
语句只有一个时, 可以省略外层的花括号 {}.
03, 可以链式写箭头函数.
比如 (x)=>(y)=>(x+y)
04, 注意,(形参) 和箭头 => 必须写在同一行, 否则报错.
- const fn = x
- => x * 2 // SyntaxError
- const fn = (x, y) //SyntaxError
- => {
- return x * y
- }
正确的写法应该像这样:
- const fn = (x, y) => {
- return x * y
- }
[02] 一定要关注箭头函数的 this 问题.
01, 箭头函数不绑定 this, 除了不绑定 this 之外, 还不会绑定 arguments,super 或 new.target.
02, 箭头函数体内的 this, 继承的是外层代码块的 this.
03, 如果对象的方法是箭头函数, 那么箭头函数中的 this 是 Windows, 因为对象中不存在 this, 只能往上找, 就找到了全局的 this, 指向的是 Windows. 即使这个对象在某一个函数内, 也是如此.
相同的规则也适用于在 prototype 对象上定义方法.
所以, 不用用箭头函数声明对象的方法.
- let o = {
- // 不要这么做.
- notThis: () => {
- console.log(this) // Windows
- this.objectThis() // Uncaught TypeError: this.objectThis is not a function
- },
- // 可以这么写
- objectThis: function () {
- console.log(this) // o
- }
- // 简化版
- objectThis2 () {
- console.log(this) // o
- }
- }
04, 不能使用箭头函数来创建事件监听器, 因为 this 不再绑定到附加到事件监听器的元素.
可以使用 event.currentTarget 获得正确的 this 上下文.
- button.addEventListener('click', function () {
- console.log(this) // button
- })
- button.addEventListener('click', e => {
- console.log(this) // Windows
- console.log(event.currentTarget) // button
- })
05, 适用于定时器, 定时器中的箭头函数中的 this, 继承外层代码块的 this.
- let o = {
- // Old way
- oldDoSthAfterThree: function () {
- let that = this
- setTimeout(function () {
- console.log(this) // Windows
- console.log(that) // o
- })
- },
- // Arrow function way
- doSthAfterThree: function () {
- setTimeout(() => {
- console.log(this) // o
- }, 3000)
- }
- }
06, 箭头函数没有自己的 this, 所以不能用 call(),apply(),bind() 这些方法去改变 this 的指向.
[03] 不可以当作构造函数
也就是说, 不可以使用 new 命令, 否则会抛出一个错误.
- var Person = (name, age) => {
- this.name = name
- this.age = age
- }
- var p = new Func('John', 33) // error
[04] 不可以使用 yield 命令
因此箭头函数不能用作 Generator 函数.
[05] 箭头函数的 typeof 运算符和普通的 function 一样:
- var func = a => a
- console.log(typeof func); // "function"
instanceof 也返回 true, 表明也是 Function 的实例:
console.log(func instanceof Function); // true
[06] 如果返回值是对象
不能直接使用花括号作为返回值, 那会导致错误.
JS 引擎在遇到对象的花括号时会把它当作代码块, 所以它不认识里面的变量标识, 冒号和逗号等.
想直接返回一个对象, 你只需要用小括号把整个对象包裹起来就好.
例子:
- const getInitialData = () => {
- id: 1,
- name: 'Jane Doe'
- };
- // 这里会抛出错误
- let initialData = getInitialData();
例子:
- // 这就完全有效
- const getInitialData = () => ({
- id: 1,
- name: 'Jane Doe'
- });
- let initialData = getInitialData();
[07] 箭头函数中不能使用 arguments 对象.
它里面的 arguments 指向它被包裹的外层函数的 arguments.
- var arguments = 42;
- var arr = () => arguments;
- arr(); // 42
- function foo() {
- var f = (i) => arguments[0]+i;
- // foo 函数的间接参数绑定
- return f(2);
- }
- foo(1); // 3
[08] 可以使用 REST 参数来访问不定数量的参数.
- function foo() {
- var f = (...args) => args[0];
- return f(2);
- }
- foo(1); // 2
[09] 可以在立即执行函数里使用箭头函数.
例子:
( x => x * 2 )( 3 ); // 6
[10] 不要在全局作用域定义箭头函数
因为在函数内部操作 this 会很容易污染全局作用域. 最起码在箭头函数外部包一层普通函数, 将 this 控制在可见的范围内;
[11] 一些常见例子:
例子:
- // click.JS
- const btn = document.querySelector('button');
- btn.addEventListener('click', (event) => {
- console.log('clicked');
- });
例子:
- // map.JS
- let numbers = [1,2,3,4];
- let multipliedBy2 = numbers.map((number) => {
- return number * 2;
- });
- console.log(multipliedBy2); // [2, 4, 6, 8]
例子:
- const numbers = [1, 2, 3, 4];
- const multipliedBy2 = numbers.map((n) => n * 2);
- // 或者不需要为参数加上括号
- const multipliedBy2WithShorterCallback = numbers.map(n => n * 2);
例子:
- const todos = (state = [], action) => {
- switch(action.type) {
- case ADD_TODO:
- return [..state, action.text];
- default:
- return state;
- }
- }
例子:
- const multiply = (x) => {
- return (y) => {
- return x * y;
- }
- };
- const multiplyBy3 = multiply(3);
- multiplyBy3(2); // 6
- multiplyBy3(3); // 9
例子:
- const multiply = (x) => (y) => x * y;
- const multiplyBy3 = multiply(3);
- multiplyBy3(2); // 6
- multiplyBy3(3); // 9
下面是箭头函数的使用模式:
- // 一个参数对应一个表达式
- param => expression;// 例如 x => x+2;
- // 多个参数对应一个表达式
- (param [, param]) => expression; // 例如 (x,y) => (x + y);
- // 一个参数对应多个表示式
- param => {statements;} // 例如 x => { x++; return x;};
- // 多个参数对应多个表达式
- ([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};
- // 表达式里没有参数
- () => expression; // 例如 var flag = (() => 2)(); flag 等于 2
- () => {statements;} // 例如 var flag = (() => {return 1;})(); flag 就等于 1
- // 传入一个表达式, 返回一个对象
- ([param]) => ({ key: value });
- // 例如 var fuc = (x) => ({key:x})
- var object = fuc(1);
- alert(object);//{key:1}
[] 例子: 一些写法
- // 有效的常规语法
- (function(x, y){
- x= x * 2;
- return x + y;
- } (3, "B") );
- // 无效的箭头函数语法
- ( (x, y) => {
- x= x * 2;
- return x + y;
- } ( 3, "A" ) );
- // 但是可以这样写就是有效的了:
- ( (x,y) => {
- x= x * 2;return x + y;
- } )( 3,"A" );// 立即执行函数
来源: http://www.bubuko.com/infodetail-3478697.html