标签: arrow-functions

在coffeescript类的胖箭头函数中,如何访问类的范围以及函数？

例:

class Example
  foo: ->
    $('.element').each =>  # or ->
      @bar($(this))        # I want to access 'bar' as well as the jquery element
  bar: (element) ->
    element.hide()

所以在这个例子中,如果我使用a =>那么@引用类的这个,但是'this'然后是错误的,而如果我对每个使用 - >,那么'this'是正确的作用域但是但那我该如何引用类功能栏呢？

谢谢!

我发现'this'关键字似乎始终指向global在嵌套对象文字中使用箭头函数.

根据其他问题,下面的代码片段可以解释为箭头函数的'this'在词汇上下文中定义.

var c = 100;
var a = {c:5 , fn: () => {return this.c;} };
console.log(a.c); //100

但是,我无法理解以下代码(嵌套对象文字):

var c = 100;

var a = {
    c: 5,
    b: {
        c: 10,
        fn: ()=> {return this.c;}
    }
}

console.log(a.b.fn());// still 100, why not 5?

我的意思是,如果从词汇语境方面考虑,不应该在abfn中的'this'指向一个？

为什么,无论对象嵌套多少级别,所有'this'实例都指向窗口还是全局？

我尝试通过Angular 2 Observable subscribe方法的例子来理解typescript的箭头函数.有人可以解释我:

我有这个代码有效:

 this.readdataservice.getPost().subscribe(
            posts => { this.posts = posts; }
        );

但如果我使用它,它应该是一样的吗？但这不起作用.

this.readdataservice.getPost().subscribe(
            function (posts) {
                this.posts = posts;
            }

        );

在MDN上,以下代码用作如何使用箭头函数编写较短函数的示例.

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(({length}) => length); // [8, 6, 7, 9]

我先了解这两个.最后一个函数究竟发生了什么？

它是一个ES6对象解构赋值(即当一个物质String对象作为参数从map接收时,该字符串的长度属性被解构为长度变量,然后由箭头函数返回)？

我试图了解编写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

我有以下代码：

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();
});

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

window.addEventListener('scroll', () => {
  this.getFoo();
});

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

我们都知道我们需要在React中绑定函数以使其起作用。我知道为什么我们需要绑定它。

但是我不确定为什么我们不需要绑定箭头功能。

示例：使用箭头功能（无需绑定）

handleClick = () => {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });

};

现在，使用功能（需要绑定）

this.handleClick = this.handleClick.bind(this);

handleClick() {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });

};

我不是在问为什么我们需要绑定功能。我只想知道为什么箭头功能不需要绑定。

谢谢。

interface Foo1 {
  (param: number): number
  (param: string): string
}

const foo1: Foo1 = (param: number | string) => param as any
const foo2 = <T>(param: T) : T => param 

interface Foo3<T1, T2> {
  (param: T1): T1
  (param: T2): T2
}

const foo3: Foo3<T1, T2> = <T1, T2>(param: T1 | T2) => param as any
// [ts] Cannot find name 'T1'. [2304]
// [ts] Cannot find name 'T2'. [2304]

我在 StackOverflow 上搜索过，但问题只涉及其中一个或没有回答问题。

我想知道是否可以在 Angular 中的组件中使用箭头函数

<app-child [showItemCondition]="item => item.isVisible" [list]="items"></app-child>

所以我只是想知道使用一个而不是另一个的区别或原因是什么......

export function Name() { return <div /> }

对比

export const Name = () => { return <div /> }