Es6（3）---箭头函数

最新推荐文章于 2023-12-11 09:12:25 发布

livingcc

最新推荐文章于 2023-12-11 09:12:25 发布

阅读量179

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 前端文章标签：箭头函数

本文链接：https://blog.youkuaiyun.com/liveingcc/article/details/86634545

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

4 篇文章

订阅专栏

本文深入探讨了JavaScript中的箭头函数，对比传统函数，解析了this指向、arguments对象、构造器和prototype属性的不同，并通过示例代码说明箭头函数在实际应用中的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.箭头函数：

什么是箭头函数

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

materials.map(function(material) { 
  return material.length; 
}); // [8, 6, 7, 9]

materials.map((material) => {
  return material.length;
}); // [8, 6, 7, 9]

materials.map(material => material.length); // [8, 6, 7, 9]

箭头函数和普通函数的区别：
1：this指向的区别

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0；
  setInterval(function growUp() {
    this.age++;
    console.log(this.log);//NaN
  }, 1000);	
}

var p = new Person();

上例中，计时器内的this指向window，window内没有定义age属性，所以会出现输出NaN.
在es6之前我们的处理方式如下：

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    //  回调引用的是`that`变量, 其值是预期的对象. 
    that.age++;
  }, 1000);
}

通过将this值分配给封闭的变量，可以解决this问题。

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}

var p = new Person();

2:arguments对象
箭头函数不绑定Arguments 对象。因此，在本示例中，arguments只是引用了封闭作用域内的arguments：

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
  return f();
}

foo(1); // 2

在大多数情况下，使用剩余参数是相较使用arguments对象的更好选择。

function foo(arg) { 
  var f = (...args) => args[0]; 
  return f(arg); 
}
foo(1); // 1

function foo(arg1,arg2) { 
    var f = (...args) => args[1]; 
    return f(arg1,arg2); 
} 
foo(1,2);  //2
3：箭头函数不能做构造器；

箭头函数不能用作构造器，和 new一起用会抛出错误。
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

4：箭头函数没有prototype属性

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