标签: arrow-functions

Typescript:如何在子类中使用super关键字调用基类中使用箭头函数定义的方法?

特定

class BaseClass{

  count:number=0;

  public someMethod=():void =>{
      this.count++;
  }
}

class ChildClass extends BaseClass{
  public someMethod=():void=>{
     super.someMethod();
     //Do more work here.
  }
}
Run Code Online (Sandbox Code Playgroud)

我收到错误消息:

只能通过'super'关键字访问基类的公共方法.

@Basarat在这里提供了一些信息,但这似乎是对该语言的真正破解. typescript箭头操作符在原型上定义函数

如何在保留"this"的上下文使用的同时做到这一点?

我是否正确使用箭头函数或者它们是否真的只能用作声明回调之类的方法?

typescript arrow-functions

10
推荐指数
2
解决办法
4239
查看次数

具有静态箭头功能的类

我目前正在实施静态土地规范(幻想土地的另一种选择).我不仅要使用普通对象作为类型,还要使用静态方法的ES2015类.我已经将这些静态方法实现为curry形式的箭头函数而不是普通函数.但是,ES2015类无法实现这一点:

class List extends Array {
  static map = f => xs => xs.map(x => f(x))
  static of = x => [x]
}
Run Code Online (Sandbox Code Playgroud)

map不需要它自己this,因为它只是List构造函数的curry函数.为了使它工作,我必须写static map(f) { return xs => xs.map(x => f(x)) },什么是非常烦人的.

  • 为什么我不能在ES2015类中使用箭头函数和赋值表达式?
  • 有没有简洁的方法来实现我的目标?

javascript functional-programming ecmascript-6 arrow-functions es6-class

10
推荐指数
1
解决办法
3483
查看次数

是否可以在ES6的类中使用箭头功能?

很简单,如果我在ES6中有一个类,可以在其中使用箭头功能.

import React, { Component } from 'react';

export default class SearchForm extends Component {

  state = {
    searchText: ''
  }

  onSearchChange = e => {
    this.setState({ searchText: e.target.value });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.onSearch(this.query.value);
    e.currentTarget.reset();
  }

  render() {
    return (
      <form className="search-form" onSubmit={this.handleSubmit} >
        <label className="is-hidden" htmlFor="search">Search</label>
        <input type="search"
               onChange={this.onSearchChange}
               name="search"
               ref={(input) => this.query = input}
               placeholder="Search..." />
        <button type="submit" id="submit" className="search-button">
          <i className="material-icons icn-search">search</i>
        </button>
      </form>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

我问的原因是我的控制台出现错误,即使使用Babel,虽然看起来互联网上有很多资源说明你可以做到这一点(其中大部分是关于使用React进行开发).

这是巴贝尔应该做的事情,并最终会得到本地支持吗?

我得到的错误是意外=符号,就在parens之前.

编辑:我忘了提到,我希望这样做的原因是在Class的上下文中使用'this'关键字,如果我使用常规函数 - 对我的理解 …

javascript class ecmascript-6 arrow-functions

10
推荐指数
1
解决办法
5056
查看次数

箭头函数的值

我想了解ECMAScript 6中的箭头功能.

这是我在阅读时遇到的定义:

箭头函数具有隐式this绑定,这意味着this箭头函数内部值的值与this定义箭头函数的范围中的值相同!

根据定义,我相信this一个arrow function应该包含箭头函数定义的相同块级别值.

码:

var test = {
  id: "123123",
  k: {
    laptop: "ramen",
    testfunc: () => console.log(this)
  }
}

console.log(test.k.testfunc);
Run Code Online (Sandbox Code Playgroud)

但是,我从代码中得到了这个结果

function testfunc() {
    return console.log(undefined);
}
Run Code Online (Sandbox Code Playgroud)

我以为我会得到的输出是:

{"laptop": "ramen"}
Run Code Online (Sandbox Code Playgroud)

如果我跑了

console.log(test.k.testfunc());

javascript ecmascript-6 arrow-functions

9
推荐指数
1
解决办法
285
查看次数

预计会返回箭头值; function array-callback-return.为什么?

我有一些问题需要理解为什么我会在这段反应代码上收到编译警告

fetch('/users')
        .then(res => res.json())
        .then(data => {
            data.map(users => {
                console.log(users);
            });
        });
Run Code Online (Sandbox Code Playgroud)

我得到的警告是 Expected to return a value in arrow function array-callback-return

但是我仍然从我的json对象值中获取/users它们,并且它们被单独打印到控制台.对象是:

    {
        id: 1,
        username: "Foo"
    }, {
        id: 2,
        username: "Bar"
    }
Run Code Online (Sandbox Code Playgroud)

我错过了一个返回语句,或者我错过了一些关于如何map返回值的东西.then()?我不清楚为什么编译警告会出现.

javascript arrays ecmascript-6 arrow-functions

9
推荐指数
4
解决办法
2万
查看次数

java脚本箭头函数返回(x++,x)

我不知道代码是如何const countFrom = x => () => (x++, x);工作

const countFrom = x => () => (x++, x);
let a = countFrom(1)

console.log('output:', a()) // output: 2
console.log('output:', a()) // output: 3
console.log('output:', a()) // output: 4
console.log('output:', a()) // output: 5
Run Code Online (Sandbox Code Playgroud)
.as-console-wrapper {min-height: 100%!important; top: 0;}
Run Code Online (Sandbox Code Playgroud)

javascript arrow-functions

9
推荐指数
1
解决办法
123
查看次数

使用lambda /箭头函数的TypeScript抽象方法

我正在使用TypeScript 1.6,并希望使用抽象方法创建一个抽象类,但在具体类中使用lambda /箭头函数.

这可能吗?下面显示的代码没有像它所说的那样编译

"Class'Base'定义实例成员函数'def',但扩展类'Concrete'将其定义为实例成员属性"......

abstract class Base {
    abstract abc(): void;
    abstract def(): void;
}

class Concrete extends Base {
    private setting: boolean;

    public abc(): void  {
        this.setting = true;
    }

    public def = (): void => {
        this.setting = false;
    }
}
Run Code Online (Sandbox Code Playgroud)

lambda abstract typescript arrow-functions typescript1.6

8
推荐指数
1
解决办法
1980
查看次数

解析来自 ES6 箭头函数的 promise

阅读我在 ES6 中理解的文档的含义:

foo => someFun(foo); 
Run Code Online (Sandbox Code Playgroud)

相当于:

foo => { return someFun(foo); }
Run Code Online (Sandbox Code Playgroud)

我正在返回一个新的 Promise 并在该代码中使用箭头函数调用解析和拒绝方法,例如

return new Promise(function(resolve, reject)
{
    someFunThatReturnsAPromise()
    .then(data => resolve(data))
    .catch(err => reject(err));
});
Run Code Online (Sandbox Code Playgroud)

因此实际上是当时的代码,

.then(data => return resolve(data))
Run Code Online (Sandbox Code Playgroud)

如果是这样,解析的结果(我不确定值的类型)是否重要,我是否应该稍微简洁一些并使用 {} 编写它以防止隐式返回

.then(data => { resolve(data); })
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 es6-promise arrow-functions

8
推荐指数
2
解决办法
2万
查看次数

如何避免开玩笑警告:“描述”回调一定不能返回值?

将Jest从版本23升级到版本24之后,在运行测试时,几乎所有测试都会收到类似以下的警告消息:

“描述”回调不得返回值。从“描述”中返回值将在以后的Jest版本中使测试失败。

相应的堆栈跟踪点指向此模块:

addSpecsToSuite (node_modules/jest-jasmine2/build/jasmine/Env.js:443:15)
Run Code Online (Sandbox Code Playgroud)

原因是我喜欢在测试中使用箭头函数的简写形式,当函数主体仅包含一个语句时,省略花括号,例如:

describe('true', () =>
    it('should be truthy', () =>
        expect(true).toBeTruthy()));
Run Code Online (Sandbox Code Playgroud)

it语句显然返回,而不是undefined,因此发出警告。

我发现了两种解决方法:

?不要使用速记箭头功能

describe('true', () => {
    it('should be truthy', () =>
        expect(true).toBeTruthy());
});
Run Code Online (Sandbox Code Playgroud)

?使用void到部队返回undefined

describe('true', () =>
    void it('should be truthy', () =>
        expect(true).toBeTruthy()));
Run Code Online (Sandbox Code Playgroud)

我发现这些选项都不可接受,我不想重构成千上万的测试只是为了让Jest(或Jasmine)高兴。

所以我的问题是:

有没有一种配置Jest的方法,以便在使用速记箭头功能时不会发出这些警告?

javascript jestjs arrow-functions

8
推荐指数
1
解决办法
3178
查看次数

Javascript'this'在对象内部返回未定义

我有以下代码:

let myObj = {
  foo: "bar",
  getFoo: function() {
    console.log(this.foo);
  },
  method: function() {
    if (true) {
      window.addEventListener('scroll', this.getFoo);
    } else {
      window.removeEventListener('scroll', this.getFoo);
    }
  }
}

window.addEventListener('click', () => {
  myObj.method();
});
Run Code Online (Sandbox Code Playgroud)

它返回 undefined,因为(出于我未知的原因)如果在函数中作为回调调用,则this引用该window对象。现在如果我在里面使用了一个箭头函数-getFooaddEventListenermyObj.method

window.addEventListener('scroll', () => {
  this.getFoo();
});
Run Code Online (Sandbox Code Playgroud)

这行得通,但后来我调用了一个匿名函数,以后就不能了removeEventListener。我怎么能用非匿名函数来完成这个工作?

javascript object this ecmascript-6 arrow-functions

7
推荐指数
2
解决办法
6649
查看次数