|
ES6允许使用箭头 => 定义函数。
箭头函数就是个简写形式的函数表达式，并且 它拥有词法作用域的this值（即不会新产生自己作用域下的 this, arguments, super 和 new.target 等对象） 。此外， 箭头函数总是匿名的 。
箭头函数的引入有两个方面的影响：一是 更简短的函数书写 ，二是 对 this 的词法解析 。
箭头函数的语法
下面是 MDN 上箭头函数的基础语法和高级语法，以及一些示例。
// 基础语法 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression // equivalent to: => { return expression; }
// 如果只有一个参数，圆括号是可选的: (singleParam) => { statements } singleParam => { statements }
// 无参数的函数需要使用圆括号: () => { statements } // 高级语法 // 返回对象字面量时应当用圆括号将其包起来: params => ({foo: bar})
// 支持 Rest parameters 和 default parameters: (param1, param2, ...rest) => { statements } (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
// Destructuring within the parameter list is also supported varf = ([a, b] = [1,2], {x: c} = {x: a + b}) => a + b + c; f(); // 6 // 箭头函数写法 varf = v => v;
// 传统写法 varf =function(v){ returnv; }; varf = () =>5; // 等同于 varf =function(){return5};
varsum = (num1, num2) => num1 + num2; // 等同于 varsum =function(num1, num2){ returnnum1 + num2; }; // 箭头函数返回对象字面量时应当用圆括号将其包起来 varf = (name, age) => ({ name: name, age: age }); console.log(f("percy",20));// Object {name: "percy", age: 20} 箭头函数的特点
箭头函数不绑定 this 值 在箭头函数出现之前， 每个新定义的函数都有其自己的 this 值 （例如， 构造函数的 this 指向了一个新的对象 ； 严格模式下的函数的 this 值为 undefined ； 如果函数是作为对象的方法被调用的，则其 this 指向了那个调用它的对象 ）。
箭头函数则会捕获其所在上下文的 this 值，作为自己的 this 值。
// 这里我们用闭包来举例
// 传统写法，闭包中的 this 值的问题 varname ="The Window"; varobj = { name: "My Object",
getName: function(){ returnfunction(){ returnthis.name; }; } }; console.log(obj.getName()());// The Window
// 传统写法，解决方法 varname ="The Window"; varobj = { name: "My Object",
getName: function(){ varthat =this; returnfunction(){ returnthat.name; }; } }; console.log(obj.getName()());// My Object
// 箭头函数写法 varname ="The Window"; varobj = { name: "My Object", getName: function(){ return() =>this.name; } }; console.log(obj.getName()());// My Object 再举一个简单的例子。
letobj = { who: "percy", fun1: () => { console.log(`this.who =${this.who}, this =${this}`) }, fun2: function(){ console.log(`this.who =${this.who}, this =${this}`); } };
obj.fun1(); // this.who = undefined, this = [object Window] obj.fun2(); // this.who = percy, this = [object Object] 由于箭头函数没有自己的this，所以当然也就不能用 call()、apply()、bind() 这些方法去改变 this 的指向。
不绑定 arguments 对象 箭头函数没有自己的 arguments 对象，不过在大多数情形下，可以使用函数的 rest 参数来代替实现 arguments 对象的功能。
functionf1(a, b, c){ varfun = (a, b) => {console.log(arguments.length) }; console.log(arguments.length); fun(a, b); } f1(1,5,9);// 打印两个 3 箭头函数不能用作构造器 letf1 =function(name){ returnname; }; letf2 = (age) => age;
console.log(newf1("percy"));// f1 {} console.log(newf2(20));// Uncaught TypeError: f2 is not a constructor 箭头函数不能用作Generator函数 好了，就这些了，以后遇上别的用法，补！
|