关于箭头函数的思考

ytwman 发布于2019-08-26 13:26 / 2632人阅读

摘要：关于箭头函数的思考自从有了箭头函数这个灵活的功能，现在写函数都习惯写成箭头函数格式然而如果不理解箭头函数的原理，滥用它也会造成很大的影响。等同于等同于如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用语句返回。

关于箭头函数的思考

自从有了ES6箭头函数这个灵活的功能，现在写函数都习惯写成箭头函数格式

</>复制代码 
() => {}

然而如果不理解箭头函数的原理，滥用它也会造成很大的影响。
思考下面这个问题

</>复制代码 
let func = value => console.log(value)
let func = function(value) {
    console.log(value)
}

我们到平台上测试一下, 显然两者不等。

</>复制代码 
let func = value => console.log(value)
// 等同于
"use strict";
var func = function func(value) {
  return console.log(value);
};

而 console.log()方法返回 undefined
return undefined 与没有返回值一样。所以效果上问题中两种写法没有差异。

</>复制代码 
let func = value => value
// 等同于
let func = value => {
  return value
}
// 等同于
var func = function func(value) {
  return value;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

</>复制代码 
var sum = (num1, num2) => { 
    console.log("多条语句情况");
    return num1 + num2; 
}

那如果我使用了箭头，使用了大括号，没使用return呢？

</>复制代码 
var sum = (num1, num2) => {
    console.log("多条语句情况");
    num1+num2
}
"use strict";
var sum = function sum(num1, num2) {
    console.log("多条语句情况");
    num1 + num2; // 这条语句没有任何作用
};

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号

</>复制代码 
let getInfo = name => ({ name: name, job: "moving bricks" });

使用箭头函数必须要有返回值吗？

</>复制代码 
// 如果箭头函数只有一行语句，且不需要返回值
let fn = () => void doesNotReturn(); // void

箭头函数表达式：没有自己的 this arguments super new.target, 不能用作构造函数，没有prototype属性，不能用作生成器

箭头函数不会创建自己的 this, 它只会从自己作用域链的上一层继承this 这点很重要。如下面示例，箭头函数内的this的作用域上一层即 Person 函数内的 this

</>复制代码 
function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++; // |this| 正确地指向person 对象
  }, 1000);
}
var p = new Person();

箭头函数没有自己的 this 指针， call() apply() bind() 调用的时候， 第一个参数会被忽略 (--- 对于这个，我有疑惑。第一个参数会被忽略是指原先调用 call 方法的 fun.call(thisArg, arg1, arg2, ...)的 thisArg 会被忽略呢？还是 arg1会被忽略呢？我们来看栗子

</>复制代码 
var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a); 
  },
  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  },
  addTest: function(a) {
   var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, 23, a);
  }
};
console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2
console.log(adder.addThruCall("a")); // 输出 24 （23+1）

很明显了，第一个参数会被忽略 是忽略 call 方法里的第一个参数(好像是我在思考的时候想多了，这很明显呀）

参考资源

es6 箭头函数 -- 阮一峰

箭头函数 MDN

GPU云服务器云服务器箭头函数人工智能的思考对人工智能的思考关于c语言函数返回值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108824.html

关于ES6中箭头函数的this问题

摘要：对象的指向是可变的，但是在箭头函数中，它是固定的。同样的由于箭头函数没有自己的所以传统的显性绑定无效内部的指向外部在的学习中，的指向问题一直是个难点，特别是在对象方法中使用时，必须更加小心。由此箭头函数在很大程度上减少了我们的困扰。什么是箭头函数用法 ES6 允许使用箭头（=>）定义函数测试 var p1 = document.getElementById(test1)...

LeviDing 2019-08-22 10:53 评论0 收藏0
面试官问：JS的this指向

摘要：之前写过一篇文章面试官问能否模拟实现的和方法就是利用对象上的函数指向这个对象，来模拟实现和的。虽然实际使用时不会显示返回，但面试官会问到。非严格模式下，和，指向全局对象前言面试官出很多考题，基本都会变着方式来考察this指向，看候选人对JS基础知识是否扎实。读者可以先拉到底部看总结，再谷歌（或各技术平台）搜索几篇类似文章，看笔者写的文章和别人有什么不同（欢迎在评论区评论不同之处），...

warnerwu 2019-08-23 14:17 评论0 收藏0
ES6 class继承与super关键词深入探索

摘要：请看对应版本干了什么可知，相当于以前在构造函数里的行为。这种写法会与上文中写法有何区别我们在环境下运行一下，看看这两种构造函数的有何区别打印结果打印结果结合上文中关于原型的论述，仔细品味这两者的差别，最好手动尝试一下。 ES6 class 在ES6版本之前，JavaScript语言并没有传统面向对象语言的class写法，ES6发布之后，Babel迅速跟进，广大开发者也很快喜欢上ES6带...

jubincn 2019-08-26 10:58 评论0 收藏0
从 React 绑定 this，看 JS 语言发展和框架设计

摘要：在语言中，关于这个关键字的行为一直以来困扰着一代又一代初级开发者。同时，也充分反应了的诡异与灵活。这种情况下，无法自动绑定。总结本文在对比绑定的五种方法的同时，也由远及近了解了语言的发展从的，到的箭头函数，再到对的改进。在 javascript 语言中，关于 this 这个关键字的行为一直以来困扰着一代又一代初级开发者。同时 this，也充分反应了 javascript 的诡异与灵活...

jemygraw 2019-08-20 17:47 评论0 收藏0
ES6—箭头函数（5）

摘要：因为它不产生属于它自己上下文的箭头函数的另一个用处是简化回调函数。箭头函数使用场景箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在的回调函数定义中，另外目前等库，都大量使用箭头函数，直接定义的情况已经很少了。 0.为什么会出现箭头函数？ 1.传统的javascript函数语法并没有提供任何的灵活性，每一次你需要定义一个函数时，你都必须输入function () {},这至少...

yanwei 2019-08-23 17:20 评论0 收藏0