标签: arrow-functions

我在应用程序中使用箭头函数,有时需要获取函数本身的引用.对于普通的javascript函数,我可以命名它们并使用内部的名称.对于箭头功能,我目前正在使用arguments.callee.有没有办法命名箭头函数,以便可以从内部使用引用？

示例代码

//typescript
private evaluateIf(expr: parserModule.IIfExpression, callback: IEnvCallback) {
    this.evaluate(expr.condition, proceed=> {
        guard(arguments.callee, arguments, this);
        if (proceed !== false) this.evaluate(expr.then, callback);
        else if (expr.else) this.evaluate(expr.else, callback);
        else callback(false);
    });
}

//javascript
    Environment.prototype.evaluateIf = function (expr, callback) {
    var _this = this;
    this.evaluate(expr.condition, function (proceed) {
        guard(arguments.callee, arguments, _this);
        if (proceed !== false)
            _this.evaluate(expr.then, callback);
        else if (expr.else)
            _this.evaluate(expr.else, callback);
        else
            callback(false);
    });
};

在协助之后我决定了什么,因为争论可能不会永远存在

private evaluateIf(expr: parserModule.IIfExpression, callback: IEnvCallback) {
    var fn;
    this.evaluate(expr.condition, fn = proceed=> {
        guard(fn, …

我在我的React组件中使用了箭头函数来避免绑定这个上下文,例如我的组件看起来像这样;

class Comp extends Component {
   _fn1 = () => {}
   _fn2 = () => {}
   render() {
      return (<div></div>);
   }
}

如何在我的测试用例中测试_fn1和_fn2运行？因为这些功能与React组件本身无关,所以当我这样做时

 fnStub = sandbox.stub(Comp.prototype, "_fn1");

它不起作用,因为_fn没有绑定Comp.prototype.因此,如果我想用箭头语法创建函数,我如何在React中测试这些函数？谢谢!

使用Babel,我可以看到

 callback = () => {};

编译成

callback = function callback() {};

这是我所期待的.但是当我尝试使用它时出现错误||

callback = callback || () => {}

我期望相当于

 callback = callback || function(){};

为什么这是一个错误？另外,这个熟悉的语法有更正确的ES6版本吗？

我试图了解编写ES6的一些简写方法.我在下面的例子中无法完全理解的是最后一个简写"({length})" - 我理解它确实有效,并且它获取了数组的长度属性,但不是为什么.如何在另一个场景中应用此语法,而不涉及数组？

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

//Long version - ok
materials.map(function(material) { 
  return material.length; 
});

//Arrow function - ok
materials.map((material) => {
  return material.length;
});

//Shorthand arrow function - ok
materials.map(str => str.length);

//What? :)
materials.map(({length}) => length));

上面的例子来自箭头函数的mozilla文档. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

我是相当有经验的编程,但对TypeScript来说还是一个新手.

试图将它与jQuery一起使用并立即遇到回调问题(例如$(document).ready.

使用$ .proxy()是一种方法,但使用TypeScript的arrow(lambda)函数似乎要好得多.但我只看到它们用作表达式 - 即整个函数是内联定义的.我希望能够设置可以作为我的类的方法调用的箭头函数,类似于(在伪代码中):

class Something {
    constructor() {
    $(' nav li').click(this.menuClick);
    }
 private menuClick (and this would be an arrow function to preserve 'this')()=>    
  // it would call this.anotherMethod()
  // plus lots of other things so it won't easily fit inline

 private anotherMethod():void {
        // do something on the menu click, several lines perhaps, 
  }

}

我来自AS3的OOP背景,这就是我能够做到的 - "这个"很容易获得,或者很清楚如何访问它.我很想使用TypeScript来克服我在Javascript中遇到的OOP障碍 - 但是对我来说,代理所有jQuery调用似乎很麻烦(我知道有些类可以用来代替我,但有一个更简单的方法,使用箭头/ lambda函数？).

如果我不是很明显的话,请耐心等待,但这对我来说并不明显!

据我所知,箭头功能类似于普通功能.我这样使用时没有问题:

let X = () => {};
let Y = function() {};
X();
Y();

但是,当我使用它时发生错误 new

let X = () => {};
let Y = function() {};
x = new X();
y = new Y();

Uncaught TypeError: X is not a constructor

你能解释一下为什么吗？非常感谢.

该线程详细解释了同步与异步之间的区别以及可能的解决方案，但我已经在使用其中一种解决方案，但仍然出现错误。我想我ES在这里达到了我的理解极限，所以我真的需要关于这个问题的帮助，因为我只是不明白为什么它会丢失。下面是我在项目中使用的代码片段nuxt，但它与它没有任何关系，因为我从后端移植了这个代码片段，即express.

async fetch({store, error}) {
  let series = '', courses = [], album = {}
  store.state.courses.forEach(async course => {
    album = {...course}
    series = course.uri.split('/')[2]
    try {
     const {data: {data}} = await axios.get('http://localhost:3000/luvlyapi/videos', {
      params: {
        series  //? album id
      }
    })
    album['videos'] = data
    courses.push(album)
    console.log('loop', courses)
  } catch (err) {
    error({statusCode: err.statusCode, message: err})
  }
})
console.log({courses})
store.commit('SET_COURSES', courses)

}

您可以看到数组正在被推送，但循环结束后仍然为空。

我在理解为什么我的代码有效时遇到了一些麻烦。我期待参考错误，但一切正常。

我的代码：

const functionA = () => {
  let bResult = functionB();

  console.log("Function A " + bResult);
};

const functionB = () => {
  return "Function B";
};

functionA();

我得到这个输出（没有错误）；

? node test.js
Function A Function B

据我了解，只有函数声明被提升（不是函数表达式）http://adripofjavascript.com/blog/drips/variable-and-function-hoisting.html。

因此，我不应该期待一个错误，因为在 FunctionA 中调用它之前没有定义 FunctionB 吗？我在这里失踪了吗？

编辑：感谢大家的回答，我想我想通了。它确实没有被提升，因为如果我在开始时调用 functionA，它会给我一个错误。

functionA(); // ReferenceError: functionA is not defined

const functionA = () => {
  let bResult = functionB();

  console.log("Function A " + bResult);
};

const functionB = () => {
  return "Function B";
}; …

我的设置：

• VS代码
• eslint的arrow-body-style设置为always
• VSCode eslint 扩展配置为自动修复错误

我试图解决的问题是在块和表达式样式箭头函数之间切换很麻烦。这是一个比较：

// block style
const myBlockStyleArrowFn = () => {
  return {};
}

// expression style
const myExpressionStyleArrowFn = () => ({});

在很多情况下，我真的很喜欢速记表达风格，但是当需要扩展其中一个函数时，总是需要手动添加必要的大括号等。

更糟糕的是，如果我只是尝试进行更改，那么我发现 VSCode 会帮助将我的块样式箭头函数转换回表达式样式（我发现自己插入冗余console.log()语句只是为了防止这种情况发生）。

我真正喜欢的是一个扩展，它可以让我通过快捷方式在两种形式之间切换（也许有一个我还没有找到，或者我应该写一个！）。这是我的问题：

在 VSCode 中在两种形式的 JavaScript 箭头函数之间进行转换的最简单方法是什么？

我知道我可以关闭自动修复功能，但在 99% 的情况下它做得很好，所以我会在那里损失很多。

一如既往地感谢您的帮助。

PHP 7.4 引入了箭头函数。它还引入了隐式按值范围绑定，从而消除了对use关键字的需要。

现在，如果我们想通过引用常规匿名函数来使用闭包范围之外的变量，我们将这样做：

$num = 10;
call_user_func(function() use (&$num) {
$num += 5;
});
echo $num; // Output: 15

但是使用箭头函数似乎是不可能的

$num = 10;
call_user_func(fn() => $num += 5);

echo $num; // Output: 10

那么如何$num通过引用来使用变量呢？