Js箭头函数

Js箭头函数

Js箭头函数

箭头函数是​​ES6​​新增的语法，提供了一种更加简洁的函数书写方式，类似于匿名函数，并且简化了函数定义。

完整写法

完整写法类似于匿名函数，省略了​​function​​关键字。

var s = (a,b) => { console.log(a, b); // 1 2 return a + b;}s(1,2);

// 相当于var s = function(a,b) { console.log(a, b); // 1 2 return a + b;}s(1,2);

省略小括号

当参数只有​​1​​个时，可以省略小括号，当没有参数或者两个以上的参时不能省略小括号。

var s = a => { console.log(a); // 1 return a + a;}s(1);

// 相当于var s = function(a) { console.log(a); // 1 return a + a;}s(1);

省略大括号

当函数体只有一行语句时，可以省略​​{}​​​，并且会自动​​return​​这条语句的返回值。

var cmp = (a, b) => a - b;var a = [5, 4, 3, 2, 1];var sortedArr = a.sort(cmp);console.log(sortedArr); // [1, 2, 3, 4, 5]

// 相当于var cmp = function(a, b) { return a - b; };var a = [5, 4, 3, 2, 1];var sortedArr = a.sort(cmp);console.log(sortedArr); // [1, 2, 3, 4, 5]

省略小括号与大括号

当满足上述两个条件时，小括号与大括号可以全部省略。

var s = a => a * 2;console.log(s(1)); // 2

// 相当于var s = function(a) { return a * 2; }console.log(s(1)); // 2

返回对象字面量

省略写法返回对象时注意需要使用​​()​​​将对象包裹，否则浏览器会把对象的​​{}​​解析为箭头函数函数体的开始和结束标记。

var s = a => ({"a": a * 2});console.log(s(1)); // {a: 2}

// 相当于var s = function(a) { return {"a": a * 2}; }console.log(s(1)); // {a: 2}

没有单独的this

箭头函数没有单独的​​this​​​，在箭头函数的函数体中使用​​this​​​时，会取得其上下文​​context​​​环境中的​​this​​​。箭头函数调用时并不会生成自身作用域下的​​this​​​，它只会从自己的作用域链的上一层继承​​this​​​。由于箭头函数没有自己的​​this​​​指针，使用​​apply​​​、​​call​​​、​​bind​​​仅能传递参数而不能动态改变箭头函数的​​this​​指向。

var obj = { s1: () => { console.log(this); }, s2: function(){ console.log(this); }}obj.s1(); // Window ...obj.s2(); // {s1: ƒ, s2: ƒ}/* 在调用时运行的环境是Window，而s1为箭头函数不改变this指向，所以指向Window s2为普通函数，可以改变this指向，所以this指向了调用者*/

var contextObj = { e: function() { var obj = { s1: () => { console.log(this); }, s2: function(){ console.log(this); } } obj.s1(); // {e: ƒ} obj.s2(); // {s1: ƒ, s2: ƒ} }}contextObj.e();/* 在调用时运行的环境是contextObj对象，而s1为箭头函数不改变this指向，所以指向contextObj对象 s2为普通函数，可以改变this指向，所以this指向了调用者*/

利用箭头函数的​​this​​​指向特点可以解决一些问题，例如常见的回调函数中​​this​​指向问题。

// 常见的回调函数this指向问题var a = 1;var obj = { a: 2, run: function(){ var callback = function(){ console.log(this.a); } setTimeout(callback,1000); // 1 // 回调函数this调用时指向了Window }}obj.run();

对于这个问题可以将​​this​​值分配给封闭的变量来解决。

var a = 1;var obj = { a: 2, run: function(){ var that = this; var callback = function(){ console.log(that.a); } setTimeout(callback,1000); // 2 }}obj.run();

也可以使用​​bind​​​来事先将函数执行时的​​this​​绑定。

var a = 1;var obj = { a: 2, run: function(){ var callback = function(){ console.log(this.a); } setTimeout(callback.bind(this),1000); // 2 }}obj.run();

使用箭头函数可以直接编写回调函数而不改变​​this​​​指向，箭头函数不会创建自己的​​this​​​，它只会从自己的作用域链的上一层继承​​this​​。

var a = 1;var obj = { a: 2, run: function(){ var callback = () => { console.log(this.a); } setTimeout(callback,1000); // 2 }}obj.run();

不绑定arguments

箭头函数不绑定​​arguments​​​，在箭头函数函数体内取得​​arguments​​​只是引用了封闭作用域内的​​arguments​​​，不会生成自身作用域下的​​this​​​和​​arguments​​值。

function s(a,b){ console.log(...arguments); // 1 2 var ss1 = (c) => { console.log(...arguments); // 1 2 } var ss2 = function(c){ console.log(...arguments); // 3 } ss1(3); ss2(3);}s(1, 2);

不能用作构造器

箭头函数不能用作构造器，使用​​new​​实例化时会抛出异常。

var s = () => {};new s(); // Uncaught TypeError: s is not a constructor

没有原型属性

箭头函数没有​​prototype​​属性。

var s = () => {};console.log(s.prototype); // undefined

不能用作函数生成器

箭头函数不能用作​​Generator​​​，​​yield​​关键字通常不能在箭头函数中使用，除非是嵌套在允许使用的函数内。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://segmentfault.com/a/1190000010159725https://runoob.com/w3cnote/es6-function.htmlhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。