ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
### 一个参数的时候 ~~~javascript var f = v => v; // 等同于 var f = function (v) { return v; }; ~~~ ### 多个参数或者没有参数的时候 * 使用一个圆括号代表参数部分。 ~~~javascript var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; }; ~~~ * 如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用`return`语句返回。 ``` var sum = (num1, num2) => { num1 = 100; return num1 + num2; }; console.log(sum(1, 1)); ``` ### 箭头函数可以与变量解构结合使用 ```javascript let person = { first: "wang", last: "yijia" }; const full = ({ first, last }) \=> first + " " + last; console.log(full(person)); ``` ### 可以简化回调函数 ~~~javascript // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x => x * x); ~~~ ### 尖头函数中的this * 函数体内的`this`对象,就是定义时所在的对象,而不是使用时所在的对象。 请问下面的代码之中有几个`this`? ~~~javascript function foo() { return () => { return () => { return () => { console.log('id:', this.id); }; }; }; } var f = foo.call({id: 1}); var t1 = f.call({id: 2})()(); // id: 1 var t2 = f().call({id: 3})(); // id: 1 var t3 = f()().call({id: 4}); // id: 1 ~~~ 上面代码之中,只有一个`this`,就是函数`foo`的`this`,所以`t1`、`t2`、`t3`都输出同样的结果。因为所有的内层函数都是箭头函数,都没有自己的`this`,它们的`this`其实都是最外层`foo`函数的`this`。不能用`call()`、`apply()`、`bind()`这些方法去改变`this`的指向。 ### 扩展:关于call和apply * 都是用于动态改变this的指向。只是参数不一样。 ~~~javascipt function fun(arg1, arg2, ...){ // Your code ... } fun.call(this, arg1, arg2, ...) fun.apply(this, [arg1, arg2, ...]) ~~~